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;
    //O 
PEN：值為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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。