浏览器端如何快速创建和使用 WebSocket 对象？

在浏览器端使用 WebSocket 对象可以让客户端和服务器之间建立持久的双向通信。以下是如何创建和使用 WebSocket 的简单步骤：

1. 创建 WebSocket 对象

在 JavaScript 中，可以通过 WebSocket 构造函数来创建 WebSocket 连接。

javascript
复制代码
const socket = new WebSocket('ws://example.com/socket');

其中，ws://example.com/socket 是 WebSocket 服务器的 URL，使用 ws:// 表示非加密连接，或使用 wss:// 表示加密连接（类似于 HTTPS）。

2. 监听事件

WebSocket 有多个事件，常用的包括：

• open：连接成功建立时触发。
• message：收到服务器消息时触发。
• close：连接关闭时触发。
• error：连接发生错误时触发。

示例代码如下：

javascript
复制代码
// 监听 WebSocket 连接打开事件
socket.addEventListener('open', (event) => {
    console.log('WebSocket 连接已打开');
    socket.send('Hello Server!');
});

// 监听 WebSocket 消息事件
socket.addEventListener('message', (event) => {
    console.log('收到消息:', event.data);
});

// 监听 WebSocket 连接关闭事件
socket.addEventListener('close', (event) => {
    console.log('WebSocket 连接已关闭');
});

// 监听 WebSocket 错误事件
socket.addEventListener('error', (event) => {
    console.error('WebSocket 错误:', event);
});

3. 发送消息

使用 send 方法可以向服务器发送消息：

javascript
复制代码
socket.send('Hello Server!');

4. 关闭连接

可以使用 close 方法主动关闭 WebSocket 连接：

javascript
复制代码
socket.close();

示例完整代码

javascript
复制代码
const socket = new WebSocket('ws://example.com/socket');

socket.addEventListener('open', (event) => {
    console.log('WebSocket 连接已打开');
    socket.send('Hello Server!');
});

socket.addEventListener('message', (event) => {
    console.log('收到消息:', event.data);
});

socket.addEventListener('close', (event) => {
    console.log('WebSocket 连接已关闭');
});

socket.addEventListener('error', (event) => {
    console.error('WebSocket 错误:', event);
});

总结

1. 使用 new WebSocket(url) 创建连接。
2. 使用事件监听器监听 open、message、close 和 error 事件。
3. 使用 send 方法发送消息，使用 close 方法关闭连接。

原文链接：https://juejin.cn/post/7434060620192038975