Vue2 使用WebSocket实现前端与后端的实时通讯

功能描述：WebSocket是一种在单个TCP连接上进行全双工通信的协议，它能够在客户端和服务器之间建立持久的连接，使得实时通讯成为可能。在前端开发中，WebSocket通常用于实现实时消息推送、实时数据更新等功能，为用户提供更流畅、即时的体验

本文将介绍如何在前端项目中利用WebSocket实现与后端的实时通讯，并结合具体的代码示例进行讲解。

实现单例模式的SocketService类

在本文中，我们将使用一个名为SocketService的类来封装WebSocket的相关操作，并通过单例模式确保在整个应用程序中只有一个SocketService实例存在。这样可以避免多次实例化和重复连接服务器的问题，同时方便在应用程序的不同模块中共享同一个SocketService实例，实现统一的数据传输和处理逻辑。

创建utils文件夹--->websocket.js文件

import { LoginWebSocketApi } from "@/request/api";export default class SocketService {    // 用于实现单例模式的写法    // 可以确保在整个应用程序中只有一个SocketService实例存在，避免了多次实例化和重复连接服务器的问题。通过单例模式，可以方便地在应用程序的不同模块中共享同一个SocketService实例，实现统一的数据传输和处理逻辑。    static instance = null;    static get Instance() {        if (!this.instance) {            this.instance = new SocketService()        }        return this.instance    }    ws = null    // 标识是否连接成功    connected = false    // 重试的次数    sendRetryCount = 0    // 重连的次数    connectRetryCount = 0    // 存储回调函数    // callBackMapping = {}    heartbeatInterval = null;    // 连接服务器的方法    connect(vue) {        // 连接服务器        if (!window.WebSocket) {            return console.log("浏览器不支持webSocket")        }        if (!localStorage.getItem("token")) {            console.log('没有token，不连接WebSocket');            return;        }        this.ws = new WebSocket("wss://你的地址");        // 连接成功的事件        this.ws.onopen = () => {            console.log("连接成功");            this.connected = true;            this.connectRetryCount = 0;            clearTimeout(this.heartbeatInterval);            this.start();        }        // 连接失败的事件        this.ws.onclose = () => {            console.log("连接失败")            this.connected = false;            if (this.connectRetryCount <= 100) {                this.connectRetryCount++            }            setTimeout(() => {                this.connect(vue)            }, this.connectRetryCount * 500)        }        // 收到数据的事件        this.ws.onmessage = (res) => {            // console.log("获取信息", res.data)            try {                console.log('接收消息', res.data);                let data_arr = JSON.parse(res.data);                let type = data_arr.type;                // 处理不同类型的消息                switch (type) {                    case 'login':                        this.login_websocket(data_arr.client_id);                        break;                    case 'charge_normal_end':                        vue.$bus.$emit('charge_normal_end', data_arr);                        break;                    case 'shots_count_change':                        vue.$bus.$emit('shots_count_change', data_arr);                        break;                    default:                        break;                }            } catch (e) {                console.log('e', e);            }        }    }    login_websocket(client_id) {        LoginWebSocketApi({            client_id: client_id,            ws_group: '首页'        }).then((webRes) => {            let ddd = {                type: 'login_success',                login_id: webRes.data.login_id            };            this.send(JSON.stringify(ddd));            console.log('发送登录消息', ddd);            this.manual_colse = false;        }).catch((err) => {            console.log('33err', err)        });    }    // 发送    send(data) {        // this.ws.send(data)        if (this.connected) {            this.sendRetryCount = 0;            this.ws.send(data)        } else {            this.sendRetryCount++            setTimeout(() => { }, this.sendRetryCount * 500)        }    }    // 关闭socket连接    close() {        if (this.ws) {            this.ws.close();            this.connected = false; // 更新连接状态            clearInterval(this.heartbeatInterval); // 清除心跳检测定时器        }    }    // 开启心跳检测    start() {        this.heartbeatInterval = setInterval(() => {            this.data = {                type: "ping"            };            this.send(JSON.stringify(this.data));        }, 5000);    }}

注意点：在webSocket.js这样的非Vue组件文件中，this并不指向Vue实例，因此无法直接通过this.$bus来访问事件总线，所以我这用的是vue.$bus.$emit.

在main.js文件中:我的事件总线是挂载在Vue原型上的，那么我在组件中就可以使用this.$bus来访问它

Vue.use(ElementUI);new Vue({  router,  store,  render: h => h(App),  beforeCreate() {    Vue.prototype.$bus = this  }}).$mount('#app')

在App.vue文件里的mounted生命周期钩子中执行，在登录成功后调用了SocketService.Instance.connect(this)来连接WebSocket。

<script>import SocketService from "./utils/websocket";import { AutoLoginApi } from "@/request/api";export default {  mounted() {    const token = localStorage.getItem("token");    if (token) {      AutoLoginApi()        .then(res => {          if (token) {            SocketService.Instance.connect(this);          }        })        .catch(error => {          console.log("自动登录error", error);        });    }  }};</script>

在需要监听数据的页面进行this.$bus.$on监听, this.$bus.$off 移除自定义事件监听器。

<script>export default {  data() {    return {    };  },  beforeDestroy() {    console.log("销毁");    this.stopListening();  },  created() {    this.startListening();  },  methods: {    startListening() {      this.$bus.$on("charge_normal_end", this.on_res_msg_charge_normal_end);      this.$bus.$on("shots_count_change", this.on_res_msg_shots_count_change);    },    stopListening() {      this.$bus.$off("charge_normal_end", this.on_res_msg_charge_normal_end);      this.$bus.$off("shots_count_change", this.on_res_msg_shots_count_change);    },    on_res_msg_charge_normal_end(data) {      //在这里处理逻辑      console.log("输出信息查看", data);    },    on_res_msg_shots_count_change(data) {      console.log("输出信息查看", data);    }  }};</script>

最后，在退出登录的时候，关闭webSocket

<script>import SocketService from "@/utils/websocket";export default {  data() {    return {          };  },  methods: {    // 退出登录    handleCommand(command) {     // 清除token        localStorage.removeItem("token");     // 关闭WebSocket连接        if (SocketService.Instance.connected) {          console.log("关闭WebSocket连接");          SocketService.Instance.ws.close();        }    }  }};</script>