现在NODEJS已经很流行了，基本做前端的人都需要这个，nodejs安装一个nodejs-websocket包，就可以轻松实现在线客服功能，下面这是我做的一个在线客服，大家有需要可以拿去用。
首先你得下载一个NODEjs,然后用npm安装nodejs-websocket包，命令用npm i nodejs-websocket,就可以安装了
下面是客服的源代码
<html>
<head>
<title>客服系统</title>
</head>
<body>
<h1>客服系统-客服</h1>
<input type="text" id="snedTxt" value="在的" />
<button id="sendb">发送</button>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
span{ margin: 10px}
</style>
<div class="vip"></div>
<div id="recv"></div>
<script src="jquery.min.js"></script>
<script src="jquery.cookie.min.js"></script>
<script type="text/javascript">
var guest='kefu';
var ws = new WebSocket("ws://localhost:3000/");// 设置服务器地址 //
ws.onopen=function(){ // onopen 连接触发 //
console.log("连接");
document.getElementById("recv").innerHTML="已连接"; // innerHTML 可以 获取 也可以 插入 /
}
ws.onclose=function(){ // onclose 断开触发 //
console.log("连接关闭");
}
ws.onmessage =function(e){ // onmessage 接收到信息触发 //
//$.cookie('th-ws-user','',{expires:7});
console.log(e.data);
var obj=JSON.parse(e.data);
var name=obj.name;
//alert(name);
var str=$.cookie('th-ws-user');
//alert(user);
//console.log(user);
if(!str){
console.log(1);
user=[];
user.push(name);
}else{
console.log(2);
user=str.split(",");
if(str.indexOf(name)==-1){
//alert(name);
user.push(name);
}
}
str = user.join(',');
$.cookie('th-ws-user',str,{expires:7});
console.log(user);
$(".vip").html('');
$.each(user,function(i,n){
//alert(n);
$("<span>").html(n).appendTo($(".vip")).click(function(){
guest=n;
});
});
document.getElementById("recv").innerHTML = obj.content;
}
document.getElementById("sendb").onclick=function(){ // 监测 id=“sendb”的 按钮 触发 onclick 就会发送数据 send //
var txt = document.getElementById("snedTxt").value;
var obj={name:'kefu',content:txt,guest:guest};
var txt=JSON.stringify(obj);
ws.send(txt);
}
</script>
</body>
</html>
下面再把客户端的代码贴出来
<html>
<head>
<title>客服系统</title>
</head>
<body>
<h1>客服系统-客户</h1>
<input type="text" id="snedTxt" value="在吗?" />
<button id="sendb">发送</button>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div id="recv"></div>
<script src="jquery.min.js"></script>
<script src="jquery.cookie.min.js"></script>
<script type="text/javascript">
// $(function(){
// var name=$.cookie('th-ws-name');
//alert(name);
//if(name==="undefined"){
var name=get_random(32);
// $.cookie('th-ws-name', name, { expires: 7 });
// name=$.cookie('th-ws-name');
console.log(name);
// }
//alert(name);
//return false;
var ws = new WebSocket("ws://localhost:3000/");// 设置服务器地址 //
ws.onopen=function(){ // onopen 连接触发 //
console.log("连接");
document.getElementById("recv").innerHTML="已连接"; // innerHTML 可以 获取 也可以 插入 /
}
ws.onclose=function(){ // onclose 断开触发 //
console.log("连接关闭");
}
ws.onmessage =function(e){ // onmessage 接收到信息触发 //
console.log(e.data);
document.getElementById("recv").innerHTML = e.data;
}
document.getElementById("sendb").onclick=function(){ // 监测 id=“sendb”的 按钮 触发 onclick 就会发送数据 send //
var txt = document.getElementById("snedTxt").value;
var obj={name:name,content:txt};
var str=JSON.stringify(obj);
ws.send(str);
}
window.onunload = function(){
var obj={name:name,content:'关闭'};
var str=JSON.stringify(obj);
ws.send(str);
}
function get_random(length) {
var chars='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
var result = '';
for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
return result;
}
// });
</script>
</body>
</html>
再来把nodejs端的代码贴出来
var ws = require('nodejs-websocket');
var port=3000
var user=[];
var server = ws.createServer(function(conn){
//受到连接触发//
//在服务端cmd安装npm install nodejs-websocket//
console.log('连接成功');
conn.on("text",function(str){
// 收到信息触发 接收 //
var obj=JSON.parse(str);
var txt=obj.content;
var name=obj.name;
console.log("收到信息:"+obj.content);
console.log("用户:"+obj.name);
boardcast(txt,name,str) // 广播消息 //
conn.sendText(str) // 发送数据给自己 //
conn.name=obj.name;
var off=false;
user.forEach(function(item){
if(item.name==obj.name){
off=true;
}
})
if(off==false){
user.push(conn);
}
})
conn.on("close",function(code,reason){
// 断开连接触发 //
console.log("连接关闭");
})
conn.on("error",function(err){
// 出错触发 //
console.log("连接出错")
console.log(err)
})
function boardcast(txt,name,str){ // 广播 //
// server.connections 保存每个连接进来的用户 //
console.log("BOAR："+str);
var obj=JSON.parse(str);
console.log("S----------------");
user.forEach(function(item){
if(name=='kefu'){//客服发的信息
console.log("T-F:"+item.name+" VS "+obj.guest);
if(item.name==obj.guest){
item.sendText(str);
console.log("客户收:"+name);
}
}else{//客户发的信息
console.log("T-H:"+item.name);
if(item.name=='kefu'){
item.sendText(str)
console.log("客服收:"+name);
}
}
})
console.log("E------------------");
console.log(user.length);
server.connections.forEach(function(conn){ // .forEach 是调用数组里每个元素 //
var item=conn.frameBuffer;
console.log(server.connections.length);
//if(conn.frameBuffer.name==null){
//conn.sendText(str)
//}
})
}
}).listen(port)
console.log("^^^^^")
运行的效果是这样的
