插件使用

vue-native-websocket-vue3

安装

npm install vue-native-websocket-vue3 --save

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

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

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

插件必须依赖于Vuex或者pinia任选其一即可。

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

一、启用Vuex集成

1.在mian.js中

import VueNativeSock from "vue-native-websocket-vue3";
import store from "/@/store";
app.use(VueNativeSock, '你的websocket服务端连接地址', {// 启用pinia集成 | enable pinia integrationstore: store,// 数据发送/接收使用使用jsonformat: "json",// 开启手动调用 connect() 连接服务器connectManually: true,// 开启自动重连reconnection: true,// 尝试重连的次数reconnectionAttempts: 5,// 重连间隔时间reconnectionDelay: 3000
});
export default app;

2.store/index.js文件中

import { createStore } from "vuex";
import main from "../main";
export default createStore({state() {return {socket: {// 连接状态isConnected: false,// 消息内容message: "",// 重新连接错误reconnectError: false,// 心跳消息发送时间heartBeatInterval: 50000,// 心跳定时器heartBeatTimer: 0}};},mutations: {// 连接打开SOCKET_ONOPEN(state, event) {main.config.globalProperties.$socket = event.currentTarget;state.socket.isConnected = true;// 连接成功时启动定时发送心跳消息，避免被服务器断开连接state.socket.heartBeatTimer = window.setInterval(() => {const message = "心跳消息";state.socket.isConnected &&main.config.globalProperties.$socket.sendObj({code: 200,msg: message});}, state.socket.heartBeatInterval);},// 连接关闭SOCKET_ONCLOSE(state, event) {state.socket.isConnected = false;// 连接关闭时停掉心跳消息clearInterval(state.socket.heartBeatTimer);state.socket.heartBeatTimer = 0;console.log("连接已断开: " + new Date());console.log(event);},// 发生错误SOCKET_ONERROR(state, event) {console.error(state, event);},// 收到服务端发送的消息SOCKET_ONMESSAGE(state, message) {state.socket.message = message;},// 自动重连SOCKET_RECONNECT(state, count) {console.info("消息系统重连中...", state, count);},// 重连错误SOCKET_RECONNECT_ERROR(state) {state.socket.reconnectError = true;}}
});

3.要websocket使用的页面

插件暴露的函数
send 发送非json类型的数据（使用插件时不能启用JSON消息传递）
sendObj 发送json类型的数据（必须在使用插件时启用JSON消息传递）
$connect 连接websocket服务器（必须在使用插件时启用手动管理连接选项）
onmessage 收到服务端推送消息时的监听
$disconnect 断开websocket连接移除消息监听
delete proxy.$socket.onmessage

<script setup>
import { onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
onMounted(()=>{proxy.$disconnect();//断开连接proxy.$connect(`你的websocket服务端连接地址`);//连接websocket//收消息proxy.$socket.onmessage = res => {// console.log(res, "我收到的消息");};// 调用send方法，以字符串形式发送数据proxy.$socket.send('some data');// 如果fomat配置为了json，即可调用sendObj方法来发送数据proxy.$socket.sendObj({ msg: 'data'} );
})
</script>

二、启用Piain集成

1.在mian.js中

import { useSocketStoreWithOut } from "/@/store/useSocketStore";
import VueNativeSock from "vue-native-websocket-vue3";
const piniaSocketStore = useSocketStoreWithOut(app);
app.use(VueNativeSock, `你的websocket服务端连接地址`, {// 启用pinia集成 | enable pinia integrationstore: piniaSocketStore,// 数据发送/接收使用使用jsonformat: "json",// 开启手动调用 connect() 连接服务器connectManually: true,// 开启自动重连reconnection: true,// 尝试重连的次数reconnectionAttempts: 5,// 重连间隔时间reconnectionDelay: 3000
});

2.根目录下创建store文件夹，分别创建PiniaType.ts，store.ts，useSocketStore.ts文件

①.PiniaType.ts文件

export type SocketStore = {// 连接状态isConnected: boolean;// 消息内容message: string;// 重新连接错误reconnectError: boolean;// 心跳消息发送时间heartBeatInterval: number;// 心跳定时器heartBeatTimer: number;
};
export type socketType = {$connect: () => void;
};

②.store.ts文件

import { createPinia } from "pinia";
import { App } from "vue";
const store = createPinia();
export function setupStore(app: App<Element>) {app.use(store);
}
export { store };

③.useSocketStore.ts文件

import { App } from "vue";
import { defineStore } from "pinia";
import { setupStore } from "./store";
import { SocketStore } from "./PiniaType";
export const useSocketStore = (app: App<Element>) => {return defineStore({id: "socket",state: (): SocketStore => ({// 连接状态isConnected: false,// 消息内容message: "",// 重新连接错误reconnectError: false,// 心跳消息发送时间heartBeatInterval: 50000,// 心跳定时器heartBeatTimer: 0}),actions: {// 连接打开SOCKET_ONOPEN(event: any) {console.log("successful websocket connection");app.config.globalProperties.$socket = event.currentTarget;this.isConnected = true;// 连接成功时启动定时发送心跳消息，避免被服务器断开连接this.heartBeatTimer = window.setInterval(() => {const message = "心跳消息";this.isConnected &&app.config.globalProperties.$socket.sendObj({code: 200,msg: message});}, this.heartBeatInterval);},// 连接关闭SOCKET_ONCLOSE(event: any) {this.isConnected = false;// 连接关闭时停掉心跳消息window.clearInterval(this.heartBeatTimer);this.heartBeatTimer = 0;console.log("连接已断开: " + new Date());console.log(event);},// 发生错误SOCKET_ONERROR(event: any) {console.error(event);},// 收到服务端发送的消息SOCKET_ONMESSAGE(message: any) {this.message = message;},// 自动重连SOCKET_RECONNECT(count: any) {console.info("消息系统重连中...", count);},// 重连错误SOCKET_RECONNECT_ERROR() {this.reconnectError = true;}}})();
};
// Need to be used outside the setup
export function useSocketStoreWithOut(app: App<Element>) {setupStore(app);return useSocketStore(app);
}

3.要websocket使用的页面

插件暴露的函数
send 发送非json类型的数据（使用插件时不能启用JSON消息传递）
sendObj 发送json类型的数据（必须在使用插件时启用JSON消息传递）
$connect 连接websocket服务器（必须在使用插件时启用手动管理连接选项）
onmessage 收到服务端推送消息时的监听
$disconnect 断开websocket连接移除消息监听
delete proxy.$socket.onmessage

<script setup>
import { onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
onMounted(()=>{proxy.$disconnect();//断开连接proxy.$connect(`你的websocket服务端连接地址`);//连接websocket//收消息proxy.$socket.onmessage = res => {// console.log(res, "我收到的消息");};// 调用send方法，以字符串形式发送数据proxy.$socket.send('some data');// 如果fomat配置为了json，即可调用sendObj方法来发送数据proxy.$socket.sendObj({ msg: 'data'} );
})
</script>