websocket 服务 pinia 全局配置

websocket 方法类

// stores/webSocketStore.ts
import { defineStore } from "pinia";interface WebSocketStoreState {ws: WebSocket | null; // WebSocket 实例callbacks: ((message: string) => void)[]; // 消息回调函数列表connected: boolean; // 连接状态
}export const useWebSocketStore = defineStore("webSocket", {state: (): WebSocketStoreState => ({ws: null,callbacks: [],connected: false,}),actions: {// 连接 WebSocketconnect(url: string): void {if (this.ws) {console.warn("WebSocket already connected");return;}// 创建 WebSocket 实例this.ws = new WebSocket(url);// 监听连接打开事件this.ws.onopen = () => {console.log("WebSocket connected");this.connected = true;};// 监听消息事件this.ws.onmessage = (event: MessageEvent) => {// console.log("Received message:", event.data);this.callbacks.forEach((callback) => callback(event.data)); // 执行回调};// 监听错误事件this.ws.onerror = (error) => {console.error("WebSocket error:", error);};// 监听连接关闭事件this.ws.onclose = () => {console.log("WebSocket connection closed");this.connected = false;};},// 发送消息send(message: string): void {if (this.ws && this.ws.readyState === WebSocket.OPEN) {this.ws.send(message);} else {console.error("WebSocket is not open");}},// 注册接收消息的回调函数onMessage(callback: (message: string) => void): void {this.callbacks.push(callback);},// 重新连接 WebSocketreconnect(url: string): void {if (url) {console.log("Reconnecting WebSocket...");// 创建 WebSocket 实例this.ws = new WebSocket(url);// 监听连接打开事件this.ws.onopen = () => {console.log("WebSocket connected");this.connected = true;};// 监听消息事件this.ws.onmessage = (event: MessageEvent) => {// console.log("Received message:", event.data);this.callbacks.forEach((callback) => callback(event.data)); // 执行回调};// 监听错误事件this.ws.onerror = (error) => {console.error("WebSocket error:", error);};// 监听连接关闭事件this.ws.onclose = () => {console.log("WebSocket connection closed");this.connected = false;};} else {console.error("No URL available to reconnect");}},// 关闭 WebSocket 连接close(): void {if (this.ws) {this.ws.close();}},},
});

页面中使用例子

<template><div><el-button @click="connectWebSocket">Connect WebSocket</el-button><el-button @click="sendMessage">Send Message</el-button><el-button @click="closeWebSocket">Close WebSocket</el-button><el-button @click="reconnect('ws://localhost:3030')">Reset Connection</el-button><div v-if="webSocketStore.connected">WebSocket is connected</div><div v-else>WebSocket is disconnected</div></div>
</template><script lang="ts">
import { defineComponent } from "vue";
import { useWebSocketStore } from "@/store/webSocketStore"; // 根据实际路径调整export default defineComponent({setup() {// 获取 Pinia storeconst webSocketStore = useWebSocketStore();// 连接 WebSocketconst connectWebSocket = () => {const url = "ws://localhost:3030"; // 替换为实际的 WebSocket URLdebugger;if (!webSocketStore.connected) {webSocketStore.connect(url);}// if (webSocketStore.ws?.readyState != 1) {//   webSocketStore.ws?.onopen;// }};// 发送消息const sendMessage = () => {const message = "Hello, WebSocket!";webSocketStore.send(message);};// 关闭 WebSocketconst closeWebSocket = () => {webSocketStore.close();};const reconnect = (url: string) => {webSocketStore.reconnect(url);};// 注册接收到消息的回调函数webSocketStore.onMessage((message) => {console.log("Received message in component:", message);});return {connectWebSocket,sendMessage,closeWebSocket,reconnect,webSocketStore,connected: webSocketStore.connected, // 从 store 中获取连接状态};},
});
</script>

websocket 服务端测试实例

1.项目中安装 websocket 模块

npm install ws

2.添加如下服务代码

// 导入必要的模块
const express = require('express');
const http = require('http');
const WebSocket = require('ws');// 创建一个 Express 应用
const app = express();// 创建一个 HTTP 服务器
const server = http.createServer(app);// 创建 WebSocket 服务器，传入 HTTP 服务器对象
const wss = new WebSocket.Server({ server });// WebSocket 连接事件处理
wss.on('connection', (ws) => {console.log('A new client connected.');// 监听客户端发送的消息ws.on('message', (message) => {console.log(`Received message: ${message}`);// 发送消息回客户端ws.send(`${message}`);});// 连接关闭时的处理ws.on('close', () => {console.log('Client disconnected.');});const jsonData = {SendName: "server",ReceiveName: "connectionning client",SendDataInfo: { msg: "welcome connection success", type: "tips" },};const plainData = { ...jsonData };// 发送欢迎消息给客户端ws.send(JSON.stringify(plainData));
});// 设置一个基本的 HTTP 路由
app.get('/', (req, res) => {res.send('Hello, Node.js with WebSocket!');
});// 设置端口并启动服务器
const PORT = process.env.PORT || 3030;
server.listen(PORT, () => {console.log(`Server running on http://localhost:${PORT}`);
});