vue3-native-websocket

仅支持vue3的websocket插件 | Only supports vue3 websocket plugin

English documents please move: README-EN.md

本插件改造自vue-native-websocket-vue3，如果项目使用Vuex，建议使用原插件。

本插件仅做了支持Pinia的兼容处理。

插件安装

1npm install vue3-native-websocket --save

插件使用

如果你的项目启用了TypeScript，则在main.ts文件中导入并使用插件。

没有启用就在main.js中导入并使用。

使用插件时，第二个参数为必填项，是你的websocket服务端连接地址。

1import VueNativeSock from "vue3-native-websocket";
2
3// 使用VueNativeSock插件，并进行相关配置
4app.use(VueNativeSock,"");

注意：插件依赖于Vuex，你的项目一定要安装vuex才可以使用本插件。vuex的相关配置请查阅文档后面的插件配置项中的内容。

插件配置项

插件提供了一些配置选项，提高了插件的灵活度，能更好的适配开发者的业务需求。

启用Vuex集成

在main.ts | main.js中导入vuex，在使用插件时，第三个参数就是用户可以传配置项，他为一个对象类型，在对象中加入store属性，值为导入的vuex。

1import store from "./store";
2
3app.use(VueNativeSock,"",{
4    store: store
5});

如果启用了vuex集成，就需要在其配置文件中定义state以及mutations方法。mutations中定义的方法为websocket的6个监听，你可以在这几个监听中做相应的操作。

1import { createStore } from "vuex";
2import main from "../main";
3
4export default createStore({
5  state: {
6    socket: {
7      // 连接状态
8      isConnected: false,
9      // 消息内容
10      message: "",
11      // 重新连接错误
12      reconnectError: false,
13      // 心跳消息发送时间
14      heartBeatInterval: 50000,
15      // 心跳定时器
16      heartBeatTimer: 0
17    }
18  },
19  mutations: {
20    // 连接打开
21    SOCKET_ONOPEN(state, event) {
22      main.config.globalProperties.$socket = event.currentTarget;
23      state.socket.isConnected = true;
24      // 连接成功时启动定时发送心跳消息，避免被服务器断开连接
25      state.socket.heartBeatTimer = setInterval(() => {
26        const message = "心跳消息";
27        state.socket.isConnected &&
28          main.config.globalProperties.$socket.sendObj({
29            code: 200,
30            msg: message
31          });
32      }, state.socket.heartBeatInterval);
33    },
34    // 连接关闭
35    SOCKET_ONCLOSE(state, event) {
36      state.socket.isConnected = false;
37      // 连接关闭时停掉心跳消息
38      clearInterval(state.socket.heartBeatTimer);
39      state.socket.heartBeatTimer = 0;
40      console.log("连接已断开: " + new Date());
41      console.log(event);
42    },
43    // 发生错误
44    SOCKET_ONERROR(state, event) {
45      console.error(state, event);
46    },
47    // 收到服务端发送的消息
48    SOCKET_ONMESSAGE(state, message) {
49      state.socket.message = message;
50    },
51    // 自动重连
52    SOCKET_RECONNECT(state, count) {
53      console.info("消息系统重连中...", state, count);
54    },
55    // 重连错误
56    SOCKET_RECONNECT_ERROR(state) {
57      state.socket.reconnectError = true;
58    }
59  },
60  modules: {}
61});

自定义方法名

你也可以自定义mutations中自定义websocket的默认监听事件名。

1// mutation-types.ts
2const SOCKET_ONOPEN = '✅ Socket connected!'
3const SOCKET_ONCLOSE = '❌ Socket disconnected!'
4const SOCKET_ONERROR = '❌ Socket Error!!!'
5const SOCKET_ONMESSAGE = 'Websocket message received'
6const SOCKET_RECONNECT = 'Websocket reconnected'
7const SOCKET_RECONNECT_ERROR = 'Websocket is having issues reconnecting..'
8
9export {
10  SOCKET_ONOPEN,
11  SOCKET_ONCLOSE,
12  SOCKET_ONERROR,
13  SOCKET_ONMESSAGE,
14  SOCKET_RECONNECT,
15  SOCKET_RECONNECT_ERROR
16}
17
18// store.ts
19import { createStore } from "vuex";
20import main from "../main";
21import {
22  SOCKET_ONOPEN,
23  SOCKET_ONCLOSE,
24  SOCKET_ONERROR,
25  SOCKET_ONMESSAGE,
26  SOCKET_RECONNECT,
27  SOCKET_RECONNECT_ERROR
28} from "./mutation-types"
29
30export default createStore({
31  state: {
32  socket: {
33      isConnected: false,
34      message: '',
35      reconnectError: false,
36     }
37  },
38  mutations: {
39    [SOCKET_ONOPEN](state, event)  {
40      state.socket.isConnected = true
41    },
42    [SOCKET_ONCLOSE](state, event)  {
43      state.socket.isConnected = false
44    },
45    [SOCKET_ONERROR](state, event)  {
46      console.error(state, event)
47    },
48    // default handler called for all methods
49    [SOCKET_ONMESSAGE](state, message)  {
50      state.socket.message = message
51    },
52    // mutations for reconnect methods
53    [SOCKET_RECONNECT](state, count) {
54      console.info(state, count)
55    },
56    [SOCKET_RECONNECT_ERROR](state) {
57      state.socket.reconnectError = true;
58    }
59  },
60  modules: {}
61});
62
63// index.js
64import store from './store'
65import {
66  SOCKET_ONOPEN,
67  SOCKET_ONCLOSE,
68  SOCKET_ONERROR,
69  SOCKET_ONMESSAGE,
70  SOCKET_RECONNECT,
71  SOCKET_RECONNECT_ERROR
72} from './mutation-types'
73
74const mutations = {
75  SOCKET_ONOPEN,
76  SOCKET_ONCLOSE,
77  SOCKET_ONERROR,
78  SOCKET_ONMESSAGE,
79  SOCKET_RECONNECT,
80  SOCKET_RECONNECT_ERROR
81}
82
83app.use(VueNativeSock,"",{
84  store: store,
85  mutations: mutations
86});

启用pinia集成

在main.js | main.ts中导入pinia，使用插件传入导入的pinia。

1import { useSocketStoreWithOut } from './useSocketStore';
2
3const store = useSocketStoreWithOut();
4
5app.use(VueNativeSock, "", {
6    store: store
7});

还需要在配置文件中定义actions，由于pinia去除了mutations，因此这里的配置与vuex不同。

1import { defineStore } from 'pinia';
2import { store } from '/@/store';
3import main from '/@/main';
4
5interface SocketStore {
6  // 连接状态
7  isConnected: boolean;
8  // 消息内容
9  message: string;
10  // 重新连接错误
11  reconnectError: boolean;
12  // 心跳消息发送时间
13  heartBeatInterval: number;
14  // 心跳定时器
15  heartBeatTimer: number;
16}
17
18export const useSocketStore = defineStore({
19  id: 'socket',
20  state: (): SocketStore => ({
21    // 连接状态
22    isConnected: false,
23    // 消息内容
24    message: '',
25    // 重新连接错误
26    reconnectError: false,
27    // 心跳消息发送时间
28    heartBeatInterval: 50000,
29    // 心跳定时器
30    heartBeatTimer: 0,
31  }),
32  actions: {
33    // 连接打开
34    SOCKET_ONOPEN(event) {
35      main.config.globalProperties.$socket = event.currentTarget;
36      this.isConnected = true;
37      // 连接成功时启动定时发送心跳消息，避免被服务器断开连接
38      this.heartBeatTimer = window.setInterval(() => {
39        const message = '心跳消息';
40        this.isConnected &&
41          main.config.globalProperties.$socket.sendObj({
42            code: 200,
43            msg: message,
44          });
45      }, this.heartBeatInterval);
46    },
47    // 连接关闭
48    SOCKET_ONCLOSE(event) {
49      this.isConnected = false;
50      // 连接关闭时停掉心跳消息
51      window.clearInterval(this.heartBeatTimer);
52      this.heartBeatTimer = 0;
53      console.log('连接已断开: ' + new Date());
54      console.log(event);
55    },
56    // 发生错误
57    SOCKET_ONERROR(event) {
58      console.error(event);
59    },
60    // 收到服务端发送的消息
61    SOCKET_ONMESSAGE(message) {
62      this.message = message;
63    },
64    // 自动重连
65    SOCKET_RECONNECT(count) {
66      console.info('消息系统重连中...', count);
67    },
68    // 重连错误
69    SOCKET_RECONNECT_ERROR() {
70      this.reconnectError = true;
71    },
72  },
73});
74
75// Need to be used outside the setup
76export function useSocketStoreWithOut() {
77  return useSocketStore(store);
78}

为了方便在组件外面使用pinia，这里额外导出了useSocketStoreWithOut，否则pinia会报错，提示找不到pinia实例。

引入的store代码如下：

1import type { App } from 'vue';
2import { createPinia } from 'pinia';
3
4const store = createPinia();
5
6export function setupStore(app: App<Element>) {
7  app.use(store);
8}
9
10export { store };

其它配置

下述方法，均为插件的可传参数，可以和store搭配使用

• 设置websocket子协议默，认为空字符串。

1{
2    "protocol": "my-protocol"
3}

• 启用JSON消息传递，开启后数据发送与接收均采用json作为数据格式。

1{ 
2    "format": "json"
3}

如果你没启用JSON消息传递，只能使用send方法来发送消息.

• 启用自动重连reconnection,启用时可配置重连次数reconnectionAttempts与重连间隔时长reconnectionDelay

1{
2  "reconnection": true,
3  "reconnectionAttempts": 5, 
4  "reconnectionDelay": 3000
5}

• 手动管理连接

1{
2  "connectManually": true
3}

启用手动管理连接后，项目启动时则不会自动连接，你可以在项目的特定组件调用连接方法来进行连接。在组件销毁时调用关闭方法来关闭连接。

如果你启用了手动连接，必须要要启用vuex，否则此设置将不会生效。

1  // 连接websocket服务器，参数为websocket服务地址
2  this.$connect("");
3  // 关闭连接
4  this.$disconnect();

• 自定义socket事件处理 触发vuex里的mutations事件时，你可以选择自己写函数处理，做你想做的事情，在使用插件时传入passToStoreHandler参数即可，如果你没有传则走默认的处理函数，默认函数的定义如下:

1export default class {
2    /**
3     * 默认的事件处理函数
4     * @param eventName 事件名称
5     * @param event 事件
6     */
7    defaultPassToStore(
8        eventName: string,
9        event: {
10            data: string;
11            mutation: string;
12            namespace: string;
13            action: string;
14        }
15    ): void {
16        // 事件名称开头不是SOCKET_则终止函数
17        if (!eventName.startsWith("SOCKET_")) {
18            return;
19        }
20        let method = "commit";
21        // 事件名称字母转大写
22        let target = eventName.toUpperCase();
23        // 消息内容
24        let msg = event;
25        // data存在且数据为json格式
26        if (this.format === "json" && event.data) {
27            // 将data从json字符串转为json对象
28            msg = JSON.parse(event.data);
29            // 判断msg是同步还是异步
30            if (msg.mutation) {
31                target = [msg.namespace || "", msg.mutation].filter((e: string) => !!e).join("/");
32            } else if (msg.action) {
33                method = "dispatch";
34                target = [msg.namespace || "", msg.action].filter((e: string) => !!e).join("/");
35            }
36        }
37        if (this.mutations) {
38            target = this.mutations[target] || target;
39        }
40        // 触发store中的方法 | Trigger the method in the store
41        if (this.store._p) {
42          // pinia
43          target = eventName.toUpperCase();
44          this.store[target](msg);
45        } else {
46          // vuex
47          this.store[method](target, msg);
48        }
49    }
50}

当你要自定义一个函数时，这个函数接收3个参数：

• event name 事件名
• event 事件
• 默认事件处理，这使你可以选择将事件移交给原始处理程序之前进行一些基本的预处理

下面是一个例子

1app.use(VueNativeSock, "", {
2  passToStoreHandler: function (eventName, event, next) {
3      event.data = event.should_have_been_named_data
4      next(eventName, event)
5  }
6})

在组件中使用

做完上述配置后，就可以在组件中使用了，如下所示为发送数据的例子。

1export default defineComponent({
2  methods: {
3    clickButton: function(val) {
4        // 调用send方法，以字符串形式发送数据
5        this.$socket.send('some data');
6        // 如果fomat配置为了json，即可调用sendObj方法来发送数据
7        this.$socket.sendObj({ awesome: 'data'} );
8    }
9  }
10})

注意：sendObj方法必须在你启用JSON消息传递时才可以使用，不然只能使用send方法。

消息监听，即接收websocket服务端推送的消息，如下所示为消息监听的示例代码。

1// optionsAPI用法
2this.$options.sockets.onmessage = (res: { data: string }) => {
3  console.log(data);
4}
5
6// CompositionAPI用法
7import { getCurrentInstance } from "vue";
8const { proxy } = getCurrentInstance() as ComponentInternalInstance;
9proxy.$socket.onmessage = (res: {
10  data: string;
11}) => {
12  console.log(data);
13}

发送消息，向服务端推送消息

1// optionsAPI用法
2this.$socket.sendObj({msg: '消息内容'});
3
4// compositionAPI写法
5const internalInstance = data.currentInstance;
6internalInstance?.proxy.$socket.sendObj({
7  msg: "消息内容"
8});

compositionAPI写法由于在setup中无法拿到vue实例，因此需要在页面挂载后将实例存储到全局对象中，用的时候再将实例取出来。详细使用方法可以参考我的chat-system中的写法：InitData.ts#L91 、EventMonitoring.ts#L50 、SendMessage.ts#L73 、contact-list.vue#L620

移除消息监听

1delete this.$options.sockets.onmessage

写在最后

至此，插件的所有使用方法就介绍完了。

想进一步了解插件源码的请移步项目的GitHub仓库：vue-native-websocket-vue3

Vue2版本请移步原插件：vue-native-websocket