3,143
社区成员
发帖
与我相关
我的任务
分享wesocket打造在线客服
前端 mint-ui, Vue.js, stomp, websocket。 后端java
借助于微信、支付宝帐号打造在线客服功能
1, 先看看设计思路
1.1 t_dkdcset 表： 后台存储客服信息的表， 每个门店可以设置多个各服（在点餐行业中可以充当“待客点餐”和“在线客服”的角色。
kefuset字段，2代表开启客服。 unionid: 微信或者支付宝或者其他开放平台帐号的唯一标识。
1.2 用户登录公众号或者小程序或者 生活号， 可以看到门店的客服列表，见下图：
用户点客服务右边的“咨询”， 直接弹出聊天窗， 见下图：
以上就是客服聊天的效果。 只是实现了一个基本的功能：
（1） 新上线咨询的用户打开咨询窗口会将消息广播到客服。
（2）客服可以和用户一对一咨询。（选择右边的“咨询”按钮 ）
2， 后台设计：
2.1 聊天窗口 chatWin.vue
(1) 实现聊天内容自动滚动到底部（避免过多内容）；
(2) 将聊天的内容放在一个 msgList集合中，根据 watch 来监听变量chat_win_visible， 关闭窗口时由true变为false， 关闭窗口时清理
聊天集合 msgList。
(3) 用户连接socket， 执行一个订阅的动作和广播“欢迎XX”字样。
(4) 发送聊天内容， sendMsgToKefuAndMyself（）方法，先Ajax 调用服务器的HTTP接口，在服务器的HTTP接口再向“发送者”和“接收者”
双方客发送一条socket 信息，需要用到“点到点”的发送消息。
(5) 对于用户只能一对一和指定的客服聊天；
(6) 对于 客服可以 一对多回复用户的信息。
（7） 如何将消息广播到正确的用户和客服的客户端其实关键是连接的时候"name":unionid 这个携带消息， 三方平台的平台ID。
<template>
<div>
<hsy-dialog class="confirm" v-model="chat_win_visible" style="width:340px">
<div slot="title" style="width:340px">客服聊天</div>
<div slot="body" style="width:340px">
<div>
<div id="msg" class="msg-scroll">
<p v-for="msg in msgList">
<img :src="msg.headimgurl" width=30 height=30>
<b><font color="red">{{msg.nickname}}</font></b> <font color="#636363">{{msg.sendtime}}</font>
<mt-button :msg="msg" type="primary" size="small" @click.native="answer(msg.unionid)">和我聊</mt-button><br>
{{msg.msgtxt}}
</p>
</div>
<mt-field label="留言" type="textarea" v-model="ws_msg" ></mt-field>
<p style="text-align:center;">
<mt-button type="primary" size="large" @click.native="sendMsgToKefuAndMyself">发送</mt-button>
</p>
<p>
技术支持：汗牛科技（广州）有限公司
</p>
</div>
<div>
</div>
</div>
</hsy-dialog>
</div>
</template>
<script>
import {Button,Field,Toast} from 'mint-ui';
import constants from '../utils/constants.js';
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import $ from 'jquery';
export default {
data() {
return {
chat_win_visible:false,
domain: constants.domain,
ws_msg:null,
stompClient:null,
member_authen:null,
selected_client_id:null,
selected_kefu_id:null,
msgList:[]
}
},
methods: {
answer (id) {
alert('--answer id='+id);
},
//广播消息
broadCast (wsMessage) {
var json=JSON.parse(wsMessage);
if(json.unionid == this.member_authen.unionid || json.destination_unionid == this.member_authen.unionid)
{
this.msgList.push(json);
msgDiv.scrollTop = msgDiv.scrollHeight;
}
},
//打开客服咨询窗口，连接socket时发送一条问候消息,消息仅客服与发送的用户可以可见
connectMsg () {
var message={ "destination_unionid":this.selected_kefu_id,
"unionid":this.member_authen.unionid,
"nickname":this.member_authen.nickname,
"headimgurl":this.member_authen.headimgurl,
"msgtxt":this.ws_msg};
this.stompClient.send("/app/hello", {}, JSON.stringify(message));
},
sendMsgToKefuAndMyself () {
if(!this.ws_msg){
Toast({
message: '发送内容不可为空',
position: 'middle',
duration: 500
});
return false;
}
//alert('--this.selected_kefu_id='+this.selected_kefu_id);
var message={
"destination_unionid":this.selected_kefu_id,
"unionid":this.member_authen.unionid,
"nickname":this.member_authen.nickname,
"headimgurl":this.member_authen.headimgurl,
"msgtxt":this.ws_msg};
var jsondata=JSON.stringify(message);
alert('--jsondata='+jsondata);
var __this=this;
//通过http触发服务器向/user/{unionid}/queue/message订阅者发送消息
$.ajax({
type:"POST",
contentType: "application/json; charset=utf-8",
url:__this.domain+"/sendToUser",
data:jsondata,
datatype: "json",
success: function (message)
{
var resMsg=message.resMsg;
var resCode=message.resCode;
if(resCode == '0' ){
__this.ws_msg='';
}else
{
Toast({
message: resMsg,
position: 'middle',
duration: 1000
});
return false;
}
},
error: function (jqXHR, textStatus, errorThrown)
{
Toast({
message: "消息未发送成功，请检查网络",
position: 'middle',
duration: 1000
});
}
});
},
//清除子节点
clearDiv (div) {
var msgDiv=document.getElementById(div);
while(msgDiv.hasChildNodes()){
msgDiv.removeChild(msgDiv.firstChild);
}
},
disConnectSocket () {
if (this.stompClient !== null) {
this.stompClient.disconnect();
}
}
},
watch: {
//关闭窗口，清除上次的聊天记录
chat_win_visible (newValue, oldValue) {
if(oldValue){
if(!newValue){
Toast({
message: "感谢您的访问，再见!",
position: 'middle',
duration: 1000
});
this.msgList=[];
this.disConnectSocket();
}
}
}
},
created () {
// 监听来自kefu.vue中打开聊天窗口的事件
this.$bus.on('open_chat_win', (val) => {
//alert('--val='+val);
this.selected_kefu_id=val;
//打开聊天窗口
this.chat_win_visible=true;
var socket = new SockJS('/gs-guide-websocket');
this.stompClient = Stomp.over(socket);
//建立socket连接
var __this=this;
//将unionid作为用户标识
__this.stompClient.connect({"name":__this.member_authen.unionid}, function (frame) {
//订阅有新人加入消息,不需要经过服务器处理
__this.stompClient.subscribe('/topic/greetings', function (socketMessage) {
__this.broadCast(socketMessage.body);
});
//订阅服务器发给点到点用户的消息
__this.stompClient.subscribe('/user/queue/message', function (socketMessage) {
__this.broadCast(socketMessage.body);
});
__this.connectMsg();
});
});
this.$bus.on('memberAuthenChange', (val) => {
this.member_authen=val;
});
}
}
</script>
<style scoped>
.hsy-dialog .main .title .content>* {
width: 95%;
min-width: 85px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msg-scroll{
maxHeight: 260px;
height:260px;
overflow:auto;
}
</style>
服务器端非常简洁：
@MessageMapping("/hello")
@SendTo("/topic/greetings") //@SendTo只能推送给所有人（它是一个具体地址，不灵活）
public SocketMessage greeting(SocketMessage message) throws Exception {
log.info(">>> Greeting goes <<<<<");
SocketMessage greeting=new SocketMessage();
greeting.setMsgtxt("欢迎" + HtmlUtils.htmlEscape(message.getNickname()));
//发送者的ID
greeting.setUnionid(message.getUnionid());
//接收者的ID
greeting.setDestination_unionid(message.getDestination_unionid());
greeting.setHeadimgurl(message.getHeadimgurl());
greeting.setNickname(message.getNickname());
greeting.setSendtime(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));
return greeting;
}
@RequestMapping(value="/sendToUser",method=RequestMethod.POST)
public @ResponseBody BaseMessage sendToUser(@RequestBody SocketMessage message) throws Exception {
for(SimpUser user:simpUserRegistry.getUsers()) {
log.info("--online user="+user.getName());
}
BaseMessage res=new BaseMessage();
res.setResCode("0");
res.setResMsg("发送成功");
log.info(">>> sendToUser goes <<<<<");
message.setSendtime(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));
String payload=JacksonTool.fromObjectToJson(message);
log.info("---payload--"+payload);
/*
* 向订阅了 /user/${unionid}/queue/message的用户发送消息
*/
//自已发给自己
if(message.getDestination_unionid().equals(message.getUnionid())) {
this.messagingTemplate.convertAndSendToUser(message.getDestination_unionid(), "/queue/message", payload);
}else {
//向发送者发消息
this.messagingTemplate.convertAndSendToUser(message.getDestination_unionid(), "/queue/message", payload);
//向接收者发消息
this.messagingTemplate.convertAndSendToUser(message.getUnionid(), "/queue/message", payload);
}
log.info("---sent done--");
return res;
}
后期改进点：
1， 支持 图片、视频文件的传输 ，目前支持文字的传输聊天。
2， 消息可以存储在redis中， 方便客服不在线的时候可以在下次上线后收到历史未读消息。
3， 如有用户咨询客服，应该有个即时提醒客服的功能。
详细可以参考公众号“五谷农斋”体验。
欢迎大家 点评。
借助于微信、支付宝帐号打造在线客服功能
1, 先看看设计思路
1.1 t_dkdcset 表： 后台存储客服信息的表， 每个门店可以设置多个各服（在点餐行业中可以充当“待客点餐”和“在线客服”的角色。
kefuset字段，2代表开启客服。 unionid: 微信或者支付宝或者其他开放平台帐号的唯一标识。
1.2 用户登录公众号或者小程序或者 生活号， 可以看到门店的客服列表，见下图：
用户点客服务右边的“咨询”， 直接弹出聊天窗， 见下图：
以上就是客服聊天的效果。 只是实现了一个基本的功能：
（1） 新上线咨询的用户打开咨询窗口会将消息广播到客服。
（2）客服可以和用户一对一咨询。（选择右边的“咨询”按钮 ）
2， 后台设计：
2.1 聊天窗口 chatWin.vue
(1) 实现聊天内容自动滚动到底部（避免过多内容）；
(2) 将聊天的内容放在一个 msgList集合中，根据 watch 来监听变量chat_win_visible， 关闭窗口时由true变为false， 关闭窗口时清理
聊天集合 msgList。
(3) 用户连接socket， 执行一个订阅的动作和广播“欢迎XX”字样。
(4) 发送聊天内容， sendMsgToKefuAndMyself（）方法，先Ajax 调用服务器的HTTP接口，在服务器的HTTP接口再向“发送者”和“接收者”
双方客发送一条socket 信息，需要用到“点到点”的发送消息。
(5) 对于用户只能一对一和指定的客服聊天；
(6) 对于 客服可以 一对多回复用户的信息。
（7） 如何将消息广播到正确的用户和客服的客户端其实关键是连接的时候"name":unionid 这个携带消息， 三方平台的平台ID。
<template>
<div>
<hsy-dialog class="confirm" v-model="chat_win_visible" style="width:340px">
<div slot="title" style="width:340px">客服聊天</div>
<div slot="body" style="width:340px">
<div>
<div id="msg" class="msg-scroll">
<p v-for="msg in msgList">
<img :src="msg.headimgurl" width=30 height=30>
<b><font color="red">{{msg.nickname}}</font></b> <font color="#636363">{{msg.sendtime}}</font>
<mt-button :msg="msg" type="primary" size="small" @click.native="answer(msg.unionid)">和我聊</mt-button><br>
{{msg.msgtxt}}
</p>
</div>
<mt-field label="留言" type="textarea" v-model="ws_msg" ></mt-field>
<p style="text-align:center;">
<mt-button type="primary" size="large" @click.native="sendMsgToKefuAndMyself">发送</mt-button>
</p>
<p>
技术支持：汗牛科技（广州）有限公司
</p>
</div>
<div>
</div>
</div>
</hsy-dialog>
</div>
</template>
<script>
import {Button,Field,Toast} from 'mint-ui';
import constants from '../utils/constants.js';
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import $ from 'jquery';
export default {
data() {
return {
chat_win_visible:false,
domain: constants.domain,
ws_msg:null,
stompClient:null,
member_authen:null,
selected_client_id:null,
selected_kefu_id:null,
msgList:[]
}
},
methods: {
answer (id) {
alert('--answer id='+id);
},
//广播消息
broadCast (wsMessage) {
var json=JSON.parse(wsMessage);
if(json.unionid == this.member_authen.unionid || json.destination_unionid == this.member_authen.unionid)
{
this.msgList.push(json);
msgDiv.scrollTop = msgDiv.scrollHeight;
}
},
//打开客服咨询窗口，连接socket时发送一条问候消息,消息仅客服与发送的用户可以可见
connectMsg () {
var message={ "destination_unionid":this.selected_kefu_id,
"unionid":this.member_authen.unionid,
"nickname":this.member_authen.nickname,
"headimgurl":this.member_authen.headimgurl,
"msgtxt":this.ws_msg};
this.stompClient.send("/app/hello", {}, JSON.stringify(message));
},
sendMsgToKefuAndMyself () {
if(!this.ws_msg){
Toast({
message: '发送内容不可为空',
position: 'middle',
duration: 500
});
return false;
}
//alert('--this.selected_kefu_id='+this.selected_kefu_id);
var message={
"destination_unionid":this.selected_kefu_id,
"unionid":this.member_authen.unionid,
"nickname":this.member_authen.nickname,
"headimgurl":this.member_authen.headimgurl,
"msgtxt":this.ws_msg};
var jsondata=JSON.stringify(message);
alert('--jsondata='+jsondata);
var __this=this;
//通过http触发服务器向/user/{unionid}/queue/message订阅者发送消息
$.ajax({
type:"POST",
contentType: "application/json; charset=utf-8",
url:__this.domain+"/sendToUser",
data:jsondata,
datatype: "json",
success: function (message)
{
var resMsg=message.resMsg;
var resCode=message.resCode;
if(resCode == '0' ){
__this.ws_msg='';
}else
{
Toast({
message: resMsg,
position: 'middle',
duration: 1000
});
return false;
}
},
error: function (jqXHR, textStatus, errorThrown)
{
Toast({
message: "消息未发送成功，请检查网络",
position: 'middle',
duration: 1000
});
}
});
},
//清除子节点
clearDiv (div) {
var msgDiv=document.getElementById(div);
while(msgDiv.hasChildNodes()){
msgDiv.removeChild(msgDiv.firstChild);
}
},
disConnectSocket () {
if (this.stompClient !== null) {
this.stompClient.disconnect();
}
}
},
watch: {
//关闭窗口，清除上次的聊天记录
chat_win_visible (newValue, oldValue) {
if(oldValue){
if(!newValue){
Toast({
message: "感谢您的访问，再见!",
position: 'middle',
duration: 1000
});
this.msgList=[];
this.disConnectSocket();
}
}
}
},
created () {
// 监听来自kefu.vue中打开聊天窗口的事件
this.$bus.on('open_chat_win', (val) => {
//alert('--val='+val);
this.selected_kefu_id=val;
//打开聊天窗口
this.chat_win_visible=true;
var socket = new SockJS('/gs-guide-websocket');
this.stompClient = Stomp.over(socket);
//建立socket连接
var __this=this;
//将unionid作为用户标识
__this.stompClient.connect({"name":__this.member_authen.unionid}, function (frame) {
//订阅有新人加入消息,不需要经过服务器处理
__this.stompClient.subscribe('/topic/greetings', function (socketMessage) {
__this.broadCast(socketMessage.body);
});
//订阅服务器发给点到点用户的消息
__this.stompClient.subscribe('/user/queue/message', function (socketMessage) {
__this.broadCast(socketMessage.body);
});
__this.connectMsg();
});
});
this.$bus.on('memberAuthenChange', (val) => {
this.member_authen=val;
});
}
}
</script>
<style scoped>
.hsy-dialog .main .title .content>* {
width: 95%;
min-width: 85px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msg-scroll{
maxHeight: 260px;
height:260px;
overflow:auto;
}
</style>
服务器端非常简洁：
@MessageMapping("/hello")
@SendTo("/topic/greetings") //@SendTo只能推送给所有人（它是一个具体地址，不灵活）
public SocketMessage greeting(SocketMessage message) throws Exception {
log.info(">>> Greeting goes <<<<<");
SocketMessage greeting=new SocketMessage();
greeting.setMsgtxt("欢迎" + HtmlUtils.htmlEscape(message.getNickname()));
//发送者的ID
greeting.setUnionid(message.getUnionid());
//接收者的ID
greeting.setDestination_unionid(message.getDestination_unionid());
greeting.setHeadimgurl(message.getHeadimgurl());
greeting.setNickname(message.getNickname());
greeting.setSendtime(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));
return greeting;
}
@RequestMapping(value="/sendToUser",method=RequestMethod.POST)
public @ResponseBody BaseMessage sendToUser(@RequestBody SocketMessage message) throws Exception {
for(SimpUser user:simpUserRegistry.getUsers()) {
log.info("--online user="+user.getName());
}
BaseMessage res=new BaseMessage();
res.setResCode("0");
res.setResMsg("发送成功");
log.info(">>> sendToUser goes <<<<<");
message.setSendtime(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));
String payload=JacksonTool.fromObjectToJson(message);
log.info("---payload--"+payload);
/*
* 向订阅了 /user/${unionid}/queue/message的用户发送消息
*/
//自已发给自己
if(message.getDestination_unionid().equals(message.getUnionid())) {
this.messagingTemplate.convertAndSendToUser(message.getDestination_unionid(), "/queue/message", payload);
}else {
//向发送者发消息
this.messagingTemplate.convertAndSendToUser(message.getDestination_unionid(), "/queue/message", payload);
//向接收者发消息
this.messagingTemplate.convertAndSendToUser(message.getUnionid(), "/queue/message", payload);
}
log.info("---sent done--");
return res;
}
后期改进点：
1， 支持 图片、视频文件的传输 ，目前支持文字的传输聊天。
2， 消息可以存储在redis中， 方便客服不在线的时候可以在下次上线后收到历史未读消息。
3， 如有用户咨询客服，应该有个即时提醒客服的功能。
详细可以参考公众号“五谷农斋”体验。
欢迎大家 点评。
...全文
请发表友善的回复…
发表回复
