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