websoket使用记录

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