对于我们一般做网站的人来说,即时通信是很重要的,比如客户下订单及时通知商家,在线客服聊天系统等,都需要用到这方面的技术。
那么我们如何去做这个通信呢?老实说,别人的方法有很多,对于整个系统和项目来说是很复杂的,但是我在这里也只能说些简单的了,大家可以发散下思维,往深度的方向考虑一点。
我用的WebSocket来做的一个在线客服的东西。这方面的东西我也研究了好长的时间,但是只要明白了他的原理和机制,很多的东西都可以迎刃而解。
在B/S架构的网页中,添加这么一段JS。
//获取服务器的链接 这里我是需要做的是在url地址中传一个用户名,必须是英文的。拼装一个wss或是ws的URL
if (window.location.protocol == 'http:')
var urlinfo = window.location.href;
var userName = decodeURI(urlinfo.split("?")[1].split("=")[1]);
url = 'ws://' + window.location.host + "/ChatR/webSocket/" + userName;
} else {
var urlinfo = window.location.href;
var userName = decodeURI(urlinfo.split("?")[1].split("=")[1]);
url = 'wss://' + window.location.host + "/ChatR/webSocket/" + userName; //ChatR是项目名,webSocket是注解webSocket的类名,userName是参数
}
//创建服务器 这是一个创建ws服务器的一个过程。
if ('WebSocket' in window) {
ws = new WebSocket(url);
}
//与服务器进行连接
$(function() {
ws.onopen = function(evt) {
alert(' 连接已打开');
};
});
// 这里就是收发信息的过程了,接收服务器的消息
ws.onmessage = function(evt) {
var evtJson = JSON.parse(evt.data); //信息的传送以json数据格式传送
//客户连接时,接收服务器的传来的消息列表。
if (evtJson.length != undefined) {
//客户连接消息,拼接客户列表
$ .each( evtJson, function(i, a) {
$("#kefu").append(
"<li id='"+a.kf+"li' style='color:#16CEBA;'><input type='radio' value='"
+ a.kf
+ "' name='radioKF' id='"
+ a.kf
+ "' οnclick='connectKf(this)'>"
+ a.kf + "</li>");
$("#msgs") .append(
"<div id='acpMsg"+a.kf+"' class='Msg' style='display: none; border: 1px solid #CDE6FC;height:200px;width:700px;overflow-Y:auto;'></div>");
})
} else if (evtJson.operation == "kf_connect_send") {
//客服上线的消息,拼接客服列表
if ($("#" + evtJson.kf).val() == undefined) {
$("#kefu").append(
"<li id='"+evtJson.kf+"li' style='color:#16CEBA'><input type='radio' value='"
+ evtJson.kf + "' name='radioKF' id='"
+ evtJson.kf + "' οnclick='connectKf(this)'>"
+ evtJson.kf + "</li>");
$("#msgs") .append( "<div id='acpMsg"+evtJson.kf+"' class='Msg' style='display: none; border: 1px solid “+
” #CDE6FC;height:200px;width:700px;overflow-Y:auto;'></div>");
}
} else if (evtJson.operation == "kf_connect_clsoe") {//客服下线时的消息
$("#" + evtJson.kf + "li").remove();
} else if (evtJson.operation == "kf_connect") {//客服连接成功消息。
$("#acpMsg1").append("<li style='list-style:none;'>"+evtJson.msg + "</li>\n");
} else if (evtJson.operation == "message") {//回话消息,即双发发送聊天信息
embed.play();//提示语音
$("#acpMsg1").append("<li style='list-style:none;'>"+evtJson.content + "</li><br>");
//判断发送消息人是否在本页面中有显示
if ($("#" + evtJson.from).val() == undefined) {
$("#kehu") .append(
"<li id='"+evtJson.from+"li' style='color:red;'><input type='radio' name='radioKU' value='"
+ evtJson.from
+ "' id='"
+ evtJson.from
+ "' οnclick='connectKf(this)'>"
+ evtJson.from + "</li>");
}
//判断当前的回话窗口是否是传来消息者
if ($("#acpMsg" + evtJson.from).val() != undefined) {//判断本页面是否有该聊天窗口
$("#" + evtJson.from + "li").css("color", "red");
$("#acpMsg" + evtJson.from).append("<li style='list-style:none;text-align: right;'>"+evtJson.content + "</li><br>");
} else {
$("#msgs") .append(
"<div id='acpMsg"+evtJson.from+"' class='Msg' style='display: none; border: 1px solid #CDE6FC;height:200px;width:700px;overflow-Y:auto;'></div>");
$("#acpMsg" + evtJson.from).append("<li style='list-style:none;text-align: right;'>"+evtJson.content + "</li><br>");
}
}
scrollText();//控制滚动条
};
//关闭与服务器的链接
ws.onclose = function(event) {
console.log('Socket 连接关闭,请稍候...');
};
//发送消息 json数据
function send() {
var req = {
to : $("#to").val(),
content : $("#sendMsg").val()
};
var encoded = $.toJSON(req);
$("#acpMsg" + $("#nowhh").val()).append(
"<li style='list-style:none;'>我:" + $("#sendMsg").val() + "</li><br>");
$("#sendMsg").val('');
$("#" + $("#to").val() + "li").css("color", "#16CEBA");
scrollText();
if($("#nowhh").val()!=='1'&&$("#nowhh").val()!=''){
ws.send(encoded);
}else{
alert('请选择你要发送消息的用户');
}
}
//选中当前的客服账号
function connectKf(kefu) {
$("#" + $("#to").val() + "li").css("color", "#16CEBA");
$("#to").val(kefu.value);
//隐藏当前显示的回话窗口
$("#acpMsg" + $("#nowhh").val()).css("display", "none");
//打开回话窗口
$("#acpMsg" + kefu.value).css("display", "block");
$("#nowhh").val(kefu.value);
//去除radio的样式
$("#" + kefu.value + "li").css("color", "#16CEBA");
}
function scrollText() {
var height = $("#acpMsg" + $("#nowhh").val())[0].scrollHeight;
$("#acpMsg" + $("#nowhh").val()).scrollTop(height);
}
//当页面被刷新时,初始化参数
function refresh(){
$("#nowhh").val('1');
$("#to").val('');
}
function screenShot(){
$.ajax({
url:'sshot',
type:'get',
dataType:'json',
success:function(data){
alert(data);
}
})
}
这里的逻辑有点复杂,这是我做的一个简单的客服系统,里面有很多细节的东西需要注意,
a.收发消息是以json数据格式来传递的,进行前后台的交互使用。
b.与服务器之间的状态事件进行处理,连接(open)、收发消息(menssage)、关闭(close)、连接出错(error)
c.在浏览器上使用websocket,浏览器必须是当前高版本,版本低的话会无法使用的。
这里是js的部分,html和服务器代码请看下一篇文章。