前端怎么使用websocket
时间: 2023-12-05 22:01:18 浏览: 34
前端可以使用 JavaScript 中的 WebSocket API 来与服务器建立 WebSocket 连接。
以下是一个简单的示例代码:
```javascript
// 创建 WebSocket 对象并连接服务器
const socket = new WebSocket('ws://localhost:8080');
// 当连接成功时触发
socket.addEventListener('open', function (event) {
console.log('WebSocket 连接成功');
});
// 当接收到消息时触发
socket.addEventListener('message', function (event) {
console.log('接收到消息:' + event.data);
});
// 当连接关闭时触发
socket.addEventListener('close', function (event) {
console.log('WebSocket 连接关闭');
});
// 当连接出错时触发
socket.addEventListener('error', function (event) {
console.error('WebSocket 连接出错');
});
// 发送消息到服务器
socket.send('Hello, Server!');
```
在这个例子中,我们使用 `new WebSocket('ws://localhost:8080')` 创建了一个 WebSocket 对象并连接到了服务器。然后,我们监听了 `open`、`message`、`close` 和 `error` 事件来处理连接的不同状态和接收消息。最后,我们使用 `send` 方法向服务器发送了一条消息。
注意:在使用 WebSocket API 前,需要确保服务器已经正确配置和实现了 WebSocket 协议的支持。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.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)