前端 WebSocket 的一些使用

文章目录

前端 WebSocket 的一些使用
- 连接的建立
- 接收消息
- 发送消息
- 关闭连接
- 处理

WebSocket 是一种网络通信协议，用于实现双向通信。在前端中，你可以使用 JavaScript 中的 WebSocket 对象来创建 WebSocket 连接，发送和接收数据。

连接的建立

通过创建一个 WebSocket 对象建立一个 WebSocket 连接

例如：

const ws = new WebSocket('ws://localhost:8080/channel/echo');

传给对象的参数是通过 WebSocket 协议通讯的网络地址。

接收消息

接收消息这里指的是接收服务端的消息。

这里有两种方法。

使用 addEventListener：你可以使用 addEventListener 来监听 message 事件，这是最常见的方式，也是推荐的做法。

ws.addEventListener('message', (event) => {const receivedMessage = event.data;console.log('Received message from server:', receivedMessage);// 在这里处理接收到的消息
});

使用 onmessage 属性：除了使用 addEventListener，你还可以直接设置 onmessage 属性来指定消息处理函数。这与之前的示例相似，但更简洁：

ws.onmessage = function (event) {const receivedMessage = event.data;console.log('Received message from server:', receivedMessage);// 在这里处理接收到的消息
};

发送消息

发送消息到服务器：使用 send() 方法将消息发送到服务器：

ws.send('Hello, server!'); // 发送消息给服务器

关闭连接

关闭 WebSocket 连接：要关闭 WebSocket 连接，你可以简单地使用 WebSocket.close() 方法，例如：

ws.close();

如果 WebSocket 连接的 readyState 已经处于 CLOSE 状态，那么该方法不会执行任何操作

检查 WebSocket 是否打开：你可以通过检查 WebSocket 的 readyState 属性来判断 WebSocket 是否打开。如果 readyState 的值为 WebSocket.OPEN，则表示连接已打开：

if (ws.readyState === WebSocket.OPEN) {// WebSocket 连接已打开
}

这样你就可以在代码中判断 WebSocket 是否处于打开状态了

处理

处理连接状态：你可以监听其他事件，例如 open、close 和 error，以处理连接的不同状态：

ws.addEventListener('open', (event) => {console.log('WebSocket 已连接');
});ws.addEventListener('close', (event) => {console.log('WebSocket 连接已关闭');
});ws.addEventListener('error', (event) => {console.error('WebSocket 连接出现异常:', event.error);
});