前端 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="https://bbs.csdn.net/topics/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=https://bbs.csdn.net/topics/JSON.stringify(message);
alert('--jsondata='https://bbs.csdn.net/topics/+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="https://bbs.csdn.net/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， 如有用戶咨詢客服，應該有個即時提醒客服的功能。
詳細可以參考公眾號“五谷農齋”體驗。
歡迎大家 點評。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/137098.html
標籤：微信開發