vue項目使用websocket做聊天，斷開連接及刷新重連

一、首先我們先了解一下websocket的使用：

1、創建websocket

const ws = new WebSocket("ws://192.168.31.136:9998/ws");

2、已連接上，使用 send() 方法發送用戶信息給后端

ws.onopen = ()=>{

　　 ws.send("發送數據");

}

3、收到消息

ws.onmessage=(evt)=>{

　　var received_msg = evt.data;

}

4、連接斷開

ws.onclose=(evt)=>{

　　console.log(evt)　　

}

二、vue項目使用websocket思路.

1、登錄成功后連接websocket。

    為了防止刷新頁面后websocket會斷開連接，我們在main.js中添加如下代碼。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { initWebSocket } from "./plugins/socket";
try {
  const userInfo = JSON.parse(localStorage.getItem("userInfo"));
  if (userInfo) {
    store.commit("setUserInfo", userInfo);
    initWebSocket();
  }
} catch (error) {
  console.log(error);
}
Vue.config.productionTip = false;
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

　　

2、收到消息后保存到vuex state狀態中

3、聊天頁面監聽vuex state數據。

4、push進聊天記錄數組。

 

以下是我簡單封裝的websocket方法：

import vuex from "../store";
let ws = null;
export function initWebSocket() {
  let userInfo = vuex.state.userInfo;
  // 創建websocket
  ws = new WebSocket("ws://192.168.31.141:5566/ws");
  // 連接成功發送用戶信息給后端
  ws.onopen = function() {
    let msg = {
      token: userInfo.token,
      type: 1,
      msgType: 0,
      sendUserId: userInfo.id
    };
    ws.send(JSON.stringify(msg));
  };
  // 收到消息保存到vuex
  ws.onmessage = function(event) {
    vuex.commit("setMsg", event.data);
    console.log(event);
  };
  // 斷開連接后進行重連
  ws.onclose = function(event) {
    console.log(event);
    let userInfo = vuex.state.userInfo;
    if (userInfo) {
      setTimeout(() => {
        initWebSocket();
      }, 5000);
    }
  };
}
// 發送消息（可以引入使用，也可以掛在到Vue原型上面使用）
export function webSocketSend(data) {
  if (ws.readyState === 1) {
    ws.send(JSON.stringify(data));
  }
}

　希望能幫助到大家！