websocket怎么读
时间: 2023-07-08 16:10:48 浏览: 95
WebSocket 是一种基于 TCP 协议的双向通信协议,它可以实现浏览器与服务器之间的实时通讯。在使用 WebSocket 时,可以通过以下两种方式来读取 WebSocket 服务器发送的消息:
1. 使用 WebSocket 实例的 `onmessage` 事件
当 WebSocket 服务器有消息发送过来时,客户端的 `onmessage` 事件将会被触发,客户端可以在该事件的回调函数中读取到服务器发送的消息。该事件的回调函数接收一个 `MessageEvent` 对象作为参数,该对象包含了服务器发送的消息信息,包括消息内容和消息类型。
以下是一个使用 `onmessage` 事件读取服务器消息的示例代码:
```javascript
const ws = new WebSocket('ws://localhost:3000')
ws.onopen = function() {
console.log('WebSocket连接成功')
}
ws.onmessage = function(event) {
const message = event.data // 从服务器读取消息内容
console.log('收到服务器消息:', message)
}
ws.onclose = function() {
console.log('WebSocket连接关闭')
}
ws.onerror = function(event) {
console.log('WebSocket连接发生错误:', event)
}
```
2. 使用 WebSocket 实例的 `WebSocket#receive` 方法
WebSocket 实例还提供了一个 `WebSocket#receive` 方法,可以用来读取服务器发送的消息。该方法会返回一个 Promise 对象,当有消息发送过来时,该 Promise 对象会被解析并返回消息内容。
以下是一个使用 `WebSocket#receive` 方法读取服务器消息的示例代码:
```javascript
const ws = new WebSocket('ws://localhost:3000')
ws.onopen = function() {
console.log('WebSocket连接成功')
}
ws.onclose = function() {
console.log('WebSocket连接关闭')
}
ws.onerror = function(event) {
console.log('WebSocket连接发生错误:', event)
}
async function readMessage() {
while (true) {
const message = await ws.receive() // 从服务器读取消息内容
console.log('收到服务器消息:', message)
}
}
readMessage()
```
无论使用哪种方式读取服务器发送的消息,客户端都可以实时地获取到服务器发送的消息,并做出相应的处理。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)