最近没有更新博客,项目中用到一个客服聊天并显示是否在线的小功能,记录一下:
要想可以查询qq的在线状态和发起及时聊天(参考上上篇博客),必须去此网址开通qq推广(http://shang.qq.com/v3/widget.html)
http://webpresence.qq.com/getonline?Type=1&123456:1111:
拼接请求网址.返回online数组
java代码
StringBuffer sb = new StringBuffer();
sb.append("http://webpresence.qq.com/getonline?Type=1&");
for (CustomerServiceDTO customerServiceDTO : customerList) {
sb.append(customerServiceDTO.getCustomerServiceQQ()+":");
}
model.addAttribute("qqList", sb);
<!--客服-->
<div class="kefu_wrap">
<img class="kefu_img" src="<%=basePath%>web/base/images/static/kefu.png"/>
<p class="link_icon">
<c:forEach items="${customerList}" var="customer">
<a class="shouhou0 shouhou1" href="tencent://Message/?Uin=${customer.customerServiceQQ}&site=qq&menu=yes" target="_Blank"><input class="active" type="text" value="${customer.customerServiceName}" style="border:none;" οnclick="window,location=this.parentNode.href;" readonly="readonly"/></a> <!--.shouhou0为离线状态,.shouhou1为在线状态 -->
</c:forEach>
</p>
<p class="kefu_phone">客服电话 <br />400-</p>
<img class="kefu_erweima" src="kefu.png"/>
</div>
<script type="text/javascript">
var online = new Array();
</script>
<script type="text/javascript" src="${qqList}"></script>
<script type="text/javascript">
for (var i = 0; i < online.length; i++) {
if (online[i] == 0) {
//此处是离线和在线显示不同的css,可根据自己的情况修改
$(".link_icon a").eq(i).find("INPUT").removeClass("active");
$(".link_icon a").eq(i).removeClass("shouhou1");
}
}
</script>