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,})})},}