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}`);
});

3. 啟動websocket 測試服務端

node server.js