前端WebSocket 通信入门

WebSocket 通信中，客户端和服务器端之间的通信流程有以下步骤：

1. 创建 WebSocket 服务器端：

   • 在服务器端，使用Node.js的ws模块创建WebSocket服务器实例非常简单。通过new ws.Server({ port: 8000 })可以创建一个WebSocket服务器实例，该服务器将在指定端口（例如8000）上监听传入的连接请求。

2. 处理连接事件：

   • 当客户端尝试连接到服务器时，服务器将触发connection事件。在connection事件处理函数中，你可以编写逻辑来处理新连接的情况，比如监听客户端发送的消息或执行其他操作。

3. error 事件：

   • 如果在WebSocket通信过程中发生错误，服务器端和客户端都会触发error事件。通过监听error事件，你可以捕获并处理任何错误情况。

4. 创建 WebSocket 客户端：

   • 在客户端，需要创建一个WebSocket客户端实例来连接到服务器。通过new WebSocket('ws://localhost:8000')可以创建一个WebSocket客户端实例，并指定要连接的服务器地址和端口。

5. 建立连接：

   • 当WebSocket客户端实例创建后，它会自动尝试连接到指定的服务器。一旦连接成功，客户端将触发open事件，表示连接已建立。

6. 发送和接收消息：

   • 在WebSocket通信中，客户端和服务器端可以使用send()方法来发送消息给对方。服务器端可以通过监听message事件来处理接收到的消息，客户端也可以通过监听message事件来处理服务器发送过来的消息。

7. 关闭连接：

   • 当通信结束或需要关闭连接时，可以调用close()方法来关闭连接。在服务器端，可以通过监听close事件来处理连接关闭的逻辑，执行清理操作或其他必要的处理。

服务器端代码：

const ws = require('ws');
const server = new ws.Server({ port: 8000 });

server.on('connection', (ws) => {
    console.log('New client connected');
    
    ws.on('message', (message) => {
        console.log('Received message:', message);
        server.clients.forEach((client) => {
            if (client !== ws && client.readyState === ws.OPEN) {
                client.send(message);
            }
        });
    });

    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

客户端代码：

const WebSocket = require('ws');
const client = new WebSocket('ws://localhost:8000');

client.on('open', () => {
    console.log('Connected to server');
    client.send('Hello, server!');
});

client.on('message', (message) => {
    console.log('Received message from server:', message);
});

client.on('close', () => {
    console.log('Connection closed');
});

在这个示例中，服务器端创建了一个 WebSocket 服务器并监听端口 8000，客户端连接到服务器后会发送一条消息，服务器接收到消息后会将消息广播给所有连接的客户端。