1.項目使用記錄

1.醫療項目中渲染回收柜溫濕度，需要實時更新

2.回收柜安瓿回收和余液回收時，需要前端發送指令給回收柜，比如開門、關門等。還需要收到回收柜結果，比如回收的藥品信息等。

我項目中用的是瀏覽器自帶的websoket，也可以下載插件等

2.注意提示：

到線上環境時：地址要從 ws變為wss，并且需要后端或者運維更改websoket協議才可以用，const WS_URL = 'wss://10.20.21.31:9321/ws'

3.websoket用法

1.創建 WebSocket 連接

? const ws = new WebSocket('wss://example.com/socket');

2.websoket方法

.send()

• 發送消息到 WebSocket 服務器。
• ws.send('Hello, server!');

.close()

• 關閉 WebSocket 連接
• ws.close(); // 正常關閉
• ws.close(1000, 'Closing connection'); // 帶有狀態碼和原因

3.WebSocket 事件

onopen

• 當 WebSocket 連接成功建立時觸發。
• ws.onopen = function(event) { console.log('Connection established!'); };

onmessage

• 當從服務器接收到消息時觸發。
• socket.onmessage = function(event) {
  console.log('Message from server:', event.data);
  };

onerror

• 當發生錯誤時觸發。
• ws.onerror = function(event) {
  console.error('WebSocket error:', event);
  };

onclose

• 當 WebSocket 連接關閉時觸發。
• ws.onclose = function(event) {
  console.log('Connection closed:', event);
  };

4.?WebSocket 屬性

readyState

• 返回 WebSocket 的當前狀態。
• 狀態值：
  • 0?(CONNECTING)：正在連接。
  • 1?(OPEN)：連接已建立，可以通信。
  • 2?(CLOSING)：連接正在關閉。
  • 3?(CLOSED)：連接已關閉。

url

• 返回 WebSocket 連接的 URL。

protocol

• 返回與 WebSocket 服務器協商的子協議（如果有）。

5.?WebSocket 狀態碼 (用于?close()?方法)

WebSocket 協議定義了一些標準的關閉狀態碼，當調用 close() 方法時，可以傳遞一個狀態碼來表明關閉的原因。

• 1000：正常關閉連接。
• 1001：對方主機沒有響應。
• 1002：協議錯誤。
• 1003：接收到不支持的數據類型。
• 1004：無效的數據。
• 1005：無狀態碼（關閉沒有給出狀態碼）。
• 1006：連接異常關閉。
• 1007：收到數據不符合協議的格式。
• 1008：政策限制，服務器關閉連接。
• 1009：消息太大。
• 1010：擴展不接受的協商。
• 1011：服務器由于臨時條件無法完成請求。

6.?自定義事件監聽（推薦）

除了直接為事件設置回調函數外，你也可以使用 addEventListener() 方法來監聽 WebSocket 事件：

socket.addEventListener('open', function(event) {console.log('Connection established!');
});socket.addEventListener('message', function(event) {console.log('Message from server:', event.data);
});socket.addEventListener('error', function(event) {console.error('WebSocket error:', event);
});socket.addEventListener('close', function(event) {console.log('Connection closed:', event);
});

4.代碼：

1.文件位置：src\utils\ws.js

// ws.js
const WS_URL = 'wss://10.20.21.31:9321/ws' //線上環境用wss
//開發環境用 'ws://10.20.21.31:9321/ws'let ws = null
let reconnectTimer = null
let reconnectDelay = 3000 // 3秒重連間隔
let isManuallyClose = false
export function connectWS(options) {if (ws && ws.readyState === WebSocket.OPEN) return wsws = new WebSocket(WS_URL)ws.onopen = () => {console.log('WebSocket 已連接')if (typeof options === 'function') {// 舊寫法: connectWS(fn)// 不提供 onOpen 回調} else if (options && typeof options.onOpen === 'function') {options.onOpen()}}ws.onmessage = (event) => {if (typeof options === 'function') {options(event.data) // 舊寫法} else if (options && typeof options.onMessage === 'function') {options.onMessage(event.data) // 新寫法}}ws.onclose = () => {console.log('WebSocket 已關閉')// if (!isManuallyClose) {//   // 自動重連//   clearTimeout(reconnectTimer)//   reconnectTimer = setTimeout(() => {//     console.log('嘗試重連...')//     connectWS({ onMessage, onOpen, onError, onClose })//   }, reconnectDelay)// }// if (onClose) onClose()}ws.onerror = (err) => {console.error('WebSocket 錯誤:', err)}return ws
}export function sendWS(message) {if (ws && ws.readyState === WebSocket.OPEN) {ws.send(typeof message === 'string' ? message : JSON.stringify(message))} else {console.warn('WebSocket 未連接，無法發送消息')}
}export function closeWS() {if (ws) {ws.close()ws = null}
}

2.項目使用代碼

 mounted() {//去連接connectWS({onMessage: (data) => this.handleMessage(data)}) // 項目中首先給后端發送信息setTimeout(() => {this.sendMessage()}, 500)},
methods：{// 接收到 WebSocket 消息handleMessage(datas) {let data = JSON.parse(datas)console.log('后端返回：', data)if(data.deviceToken == this.deviceToken){this.dataBack = data}          this.pendLoading = false},
//給后端發送信息sendMessage() {// 獲取當前時間戳（毫秒）const timestamp = Date.now();// 拼接 "ABHS" 和時間戳const result = `ABHS${timestamp}`;console.log('給后端發送信息',{msgType: '5',deviceToken: this.deviceToken,// seqId: result,});return new Promise((resolve) => {sendWS({cmd: {msgType: '5',deviceToken: this.deviceToken,// seqId: result,},ip: this.ip,})})},}