当前位置： 首页 > article >正文

vue3使用vue-native-websocket-vue3通讯

article 2025/1/17 2:21:55

vue3使用vue-native-websocket-vue3通讯

      • 插件使用
      • 一、启用Vuex集成
        • 1.在mian.js中
        • 2.store/index.js文件中
        • 3.要websocket使用的页面
      • 二、启用Piain集成
        • 1.在mian.js中
        • 2.根目录下创建store文件夹，分别创建PiniaType.ts，store.ts，useSocketStore.ts文件
          • ①.PiniaType.ts文件
          • ②.store.ts文件
          • ③.useSocketStore.ts文件
        • 3.要websocket使用的页面

插件使用

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 integration
	store: store,
	// 数据发送/接收使用使用json
	format: "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 integration
	store: piniaSocketStore,
	// 数据发送/接收使用使用json
	format: "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>

http://www.kler.cn/a/505812.html

相关文章：

  • C++单例模式的设计
  • ASP.NET Core - IStartupFilter 与 IHostingStartup
  • Kylin Linux V10 替换安装源，并在服务器上启用 EPEL 仓库
  • 【RDMA学习笔记】1：RDMA（Remote Direct Memory Access）介绍
  • 响应式 Vue 页面布局组件-Element Plus
  • Onedrive精神分裂怎么办（有变更却不同步）
  • 省级-农业科技创新（农业科技专利）数据（2010-2022年）-社科数据
  • 30分钟内搭建一个全能轻量级springboot 3.4 + 脚手架 ＜5＞ 5分钟集成好caffeine并使用注解操作缓存
  • 力扣 20. 有效的括号
  • Java Python：从简单案例理解 HTTP 服务开发与调用！
  • 算法15、双指针（归并排序两种做法）
  • 视频本地化的特点
  • 本地视频进度加入笔记+根据进度快速锁定视频位置
  • LeetCode 每日一题 2025/1/6-2025/1/12
  • [Qt] 窗口 | QDialog | 常用内置对话框
  • 数据仓库的复用性：设计和构建一个高复用性的数仓
  • 软考信安20~数据库系统安全
  • 数据通过canal 同步es，存在延迟问题，解决方案
  • Web前端------HTML多媒体标签之音频和视频标签
  • 【MATLAB】subplot如何增加title
  • 如何开发一个分布式日志系统
  • 线上nginx编译参数
  • 回归预测 | MATLAB实SVM支持向量机多输入单输出回归预测
  • 设计模式02：结构型设计模式之适配器模式使用情景及其基础Demo
  • 反转字符串力扣--344
  • Abp vnext + OpenIddict的授权械与适应场景