序言
目前linux设置环境变量,即时通信在线咨询在网站、APP、小程序中早已是不可获取的功能,尤其是专注于线上营销的店家,急切须要一套可以随时与访客交流的即时通信工具。
假如使用市面上的SaaS客服系统,会在功能上受限制,须要开通中级VIP,能够更好的使用linux移植,所以这种店家急切须要可以私有化独立布署的客服系统开源在线客服系统源码开源在线客服系统源码,来满足自己的营运要求。
为了就能随时随地与访客进行沟通,客服须要能在手机端及时收到消息,随时回复消息,所以可以参考我的客服系统uniapp客服端进行开发(尾部附送客服端uniapp源码下载地址)
开发打算
首先,开发者须要具备一定的后端基础,能够立刻代码逻辑结构,最好是了解现代化后端框架工具的使用
开发语言及工具
HBuilderXuniapp框架Vue.js
项目疗效客服访问H5页面或则下载APP后,步入登入页,在登陆页须要输入服务端地址、用户名、密码须要输入服务端地址的缘由是,当客服系统是私有化布署在其他服务器上时,也可以直接对接,不须要更改源码中的插口地址验证成功后,步入在线访客列表页,这儿只是列举所有正在聊天的访客
也可以点击顶部的tab标签,查看所有访客列表,这儿是所有历史访客,能按名称、标签搜索查询访客点击其中一个访客,步入访客聊天详情页面,在这个页面里可以看见聊天记录,发送消息给访客客服可以发送文本、图片、表情、附件等,也可以发起语音、视频通话恳求
代码目录结构
这是一个uniapp项目,和vue.js项目的结构也基本一致
即时通信功能开发
项目的即时通信功能,是基于WebSocket来实现的,不管是访客上下线,还是访客发送消息,就会通过webSocket发送到客服端。
客服端须要做的就是联接WebSocket,而且对接收到的消息按照类型进行不同的处理。
下边是聊天详情页对WebSocket部份进行处理的代码
上面对收到消息、上下线、消息预知、消息已读、语言视频恳求等都进行了处理
uni.onSocketMessage((res) => {
//uni.$on('message',(res) => {
var redata = JSON.parse(res.data);
switch (redata.type) {
case "message":
_this.recvMessage(redata.data);
break;
case "inputing":
if (redata.data.from != _this.visitor_id) {
return;
}
if (redata.data.content != "") {
_this.inputingAction="正在输入:"+redata.data.content
}else{
_this.inputingAction="";
}
uni.setNavigationBarTitle({
title: "[在线]:" + _this.visitor_name
});
break;
case "read":
if (redata.data.visitor_id == _this.visitor_id) {
for(var i=0;i {
if(res.confirm) {
console.log('comfirm') //点击确定之后执行的代码
_this.initPeerjs(redata.data.visitor_id);
} else {
uni.request({
url: _this.baseUrl + '/kefu/callVisitor?token='+_this.token,
method: 'POST',
data: {
peer_id:"222",
visitor_id:redata.data.visitor_id,
action:"refuse"
}
});
}
}
})
break;
}
});
打包生成APP或H5
通过uniapp官网,我们可以直接云打包成原生APP
也可以只打包成H5,发布到自己服务目录下,就可以直接访问
结语
这儿只展示了客服系统即时通信部份功能的实现,除此之外还有好多功能没有展示,假如想看更多代码和疗效,可以下载代码查看演示。
源码下载