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

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

一、建立websocket

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

二、已鏈接上，使用 send() 方法發送用戶信息給後端

ws.onopen = ()=>{

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

}

三、收到消息

ws.onmessage=(evt)=>{

　　var received_msg = evt.data;

}

四、鏈接斷開

ws.onclose=(evt)=>{

　　console.log(evt)　　

}

2、vue項目使用websocket思路.

一、登陸成功後鏈接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");

　　

二、收到消息後保存到vuex state狀態中

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

四、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));
  }
}

　但願能幫助到你們！

　　

原文出處：https://www.cnblogs.com/jhy1016/p/12114377.html