VUE 整合websocket 全局调用，局部监听，事件响应，自定义协议

最新推荐文章于 2025-06-20 17:38:52 发布

原创

最新推荐文章于 2025-06-20 17:38:52 发布 · 1.7w 阅读

53 ·

CC 4.0 BY-SA版权

文章标签：

#VUE VUEX websocket

本文介绍了如何在Vue项目中整合WebSocket，包括在websocketStore.js中创建连接，main.js中引入并初始化，如何发送消息，以及设置监听回调进行事件响应。通过这种方式，实现了WebSocket的全局调用和局部监听功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说直接贴代码

1，新建一个websocketStore.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        websock: null,
        eventlist:[]
    },
    getters: {
        onEvent(state) {
            return function (method) {
                let index = state.eventlist.map((eb) => {return eb.method}).indexOf(method);
                if (state.eventlist.length > 0 && index >= 0) {
                    let result = Object.assign({}, state.eventlist[index]);
                    state.eventlist.splice(index, 1);
                    return result.data;
                }
                return null;
            }
        }
    },
    mutations: {
        WEBSOCKET_INIT(state,url) {
            state.websock = new WebSocket(url);
            state.websock.onopen = function () {
                console.log("连接成功！");
            }
            state.websock.onmessage = function (callBack) {
                console.log("ws接收！");
                console.log(callBack.data);

                var receive = [];
                var type = 0;
                var length = 0;
                receive = receive.concat(Array.from(new Uint8Array(callBack.data)));
                if (receive.length < 6) {
                    console.log("包头大小错误：" + receive.length)
                    return;
                }


                var index = 0;
                type = new DataView(new Uint8Array(receive).buffer).getUint1