vue實現websocket客服聊天功能
阿新 • • 發佈:2021-10-09
本文章主要介紹如何實現一個基本的聊天,後續會新增表情包,傳照片等功能
其實剛開始接觸的時候,我最大的疑惑是聊天功能的前期是否需要搭建什麼框架、下載一些什麼東西之類的,結果就是,其實websochttp://www.cppcns.comket可以直接使用,然後前後端搭配,也是免費的,暫時沒發現需要收費功能的東西~ 能幫到你就趕緊點個贊啦~O>.O
實現效果圖:
首先封裝一個websocket.檔案(大家可以直接複製,然後把接收/傳送資料之類的格式改成自己的就可以啦)
import store from '@/store' var webSocket = null; var globalCallback = null;//定義外部接收資料的回撥函式 //初始化websocket export function initWebSocket (url) { //判斷瀏覽器是否支援websocket if ("WebSocket" in window) { webSocket = new WebSocket(url);//建立socket物件 } else { alert("該瀏覽器不支援websocket!"); } //開啟 webSocket.onopen = function () { webSocketOpen(); }; //收信 webSocket.onmessage = function (msg) { webSocketOnMessage(msg); }; //關閉 webSocket.onclose = function () { webSocketClose(); }; //連線發生錯誤的回撥方法 webSocket.onerror = function () { console.log("WebSocket連線發生錯誤");}; } //連線socket建立時觸發 export function webSocketOpen () { console.log("WebSocket連線成功"); } //客戶端接收服務端資料時觸發,e為接受的資料物件 export function webSocketOnMessage (e) { // 儲存在store中,然後在聊天介面中監控變化 自動拿取收到的資訊 store.commit('user/SET_WS_MSG',e) } //傳送資料 export function webSocketSend (data) { console.log('傳送資料'); //在這裡根據自己的需要轉換資料格式 webSocket.send(JSON.stringify(data)); } //關閉socket export function webSocketClose () { webSocket.close() console.log("對話連線已關閉"); // } } //在其他需要socket地方呼叫的函式,用來發送資料及接受資料 export function sendSock (agentData,callback) { globalCallback = callback;//此callback為在其他地方呼叫時定義的接收socket資料的函式,此關重要。 //下面的判斷主要是考慮到socket連線可能中斷或者其他的因素,可以重新發送此條訊息。 switch (webSocket.readyState) { //CONNECTING:值為0,表示正在連線。 case webSocket.CONNECTING: setTimeout(function () { console.log('正在連線。。。'); webSocketSend(agentData,callback); },1000); break; //OPEN:值為1,表示連線成功,可以通訊了。 case webSocket.OPEN: console.log('連線成功'); webSocketSend(agentData); break; //CLOSING:值為2,表示連線正在關閉。 case webSocket.CLOSING: setTimeout(function () { console.log('連線關閉中'); webSocketSend(agentData,1000); break; //CLOSED:值為3,表示連線已經關閉,或者開啟連線失敗。 case webSocket.CLOSED: console.log('連線關閉/開啟失敗'); // do something break; default: // this never happens break; } } //將初始化socket函式、傳送(接收)資料的函式、關閉連線的函式export出去 export default { initWebSocket,webSocketClose,sendSock };
在x中定義儲存下接收的資料
store/modules/user.js
let state = { webSocketMsg: '' }; //修改state const mutations = { // 儲存websocket推送的訊息 SET_WS_MSG: (state,msg) => { state.webSocketMsg = msg } } //提交異動mutations。 如果在接受塊出現問題,可以把這個加上去看看 //const actions = { // webSockets ({ commit }) { // commit('SET_WS_MSG',2) // } //}
store/getters.js
//獲取state的狀態 const getters = { webSocketMsg: state => state.user.webSocketMsg } export default getters
然後在聊天介面中開始使用啦 websocket.vue
<script> import { initWebSocket,sendSock,webSocketClose } frowww.cppcns.comm '@/utils/websocket.js' export default { data() { return { // 這個地址是後端給的,用來連線websocket。 加密wss 未加密ws wsUrl:'ws://地址',} },// 從store中獲取接收到的資訊 computed: { getSocketMsg() { return this.$store.state.user.webSocketMsg },},//監控 getSocketMsg 是否有接收到資料 watch: { getSocketMsg: { handler: function (val) { this.getConfigResult(val) },//這一步是我對我聊天框的設計,大家可以不用寫,需要的時候再參考。 //我將接收到的資訊和發出的資訊都儲存到obList中,然後通過監控數值變化,使聊天定位始終位於底部(css中 overflow: auto;) obList: { handler: function (val) { this.$nextTick(() => { this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight }) },immediate: true,methods: { // 點選按鈕-建立聊天連線 customerDialog() { initWebSocket(this.wsUrl) },// 接收socket回撥函式返回資料的方法,這個函式是我在監控接受資料的時候呼叫的(上面的watch中) getConfigResult(val) { },// 點擊發送按鈕 傳送資訊---傳送資訊的格式要和後端確認 sending() { sendSock('傳送的資訊') },// 處理聊天框關閉事件 handleClose() { //關閉連線 webSocketClose() },} </script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。