什么是 WebSocket？

WebSocket 是 HTML5 标准的一部分，它提供了一种在客户端和服务器之间进行全双工通信的协议。相比传统的 HTTP 请求-响应模式，WebSocket 允许服务器主动向客户端发送消息，无需客户端频繁轮询。

特点：

  1. 全双工通信：客户端和服务器可以同时发送和接收数据。
  2. 实时性强：适合需要低延迟和高频通信的场景，比如在线聊天、游戏、实时通知等。
  3. 轻量级：相比轮询，大大减少了通信开销，因为它只需要一次握手来建立连接。
  4. 基于 TCP：WebSocket 使用 HTTP 协议的握手阶段升级为长连接，随后直接在 TCP 上进行通信。

前端如何使用 WebSocket？

WebSocket 在浏览器中通过 WebSocket 对象进行支持。以下是使用步骤：

  1. 创建 WebSocket 对象：

    const ws = new WebSocket('ws://yourserver.com/socket');

  2. 监听连接事件：

    ws.onopen = () => {
        console.log('WebSocket connection established');
        ws.send('Hello Server!');
    };

  3. 监听消息事件：

    ws.onmessage = (event) => {
        console.log('Message from server:', event.data);
    };

  4. 监听错误事件：

    ws.onerror = (error) => {
        console.error('WebSocket error:', error);
    };

  5. 监听关闭事件：

    ws.onclose = () => {
        console.log('WebSocket connection closed');
    };

  6. 发送消息：

    ws.send('Your message here');

使用 WebSocket 实现聊天室

后端服务器

后端可以使用 Node.js 的 ws 库来搭建一个 WebSocket 服务。

安装 ws：

npm install ws

实现简单的 WebSocket 服务：

const WebSocket = require('ws');
const os = require('os');

function getLocalIP() {
    const interfaces = os.networkInterfaces();
    for (const name in interfaces) {
        for (const iface of interfaces[name]) {
            if (iface.family === 'IPv4' && !iface.internal) {
                return iface.address;
            }
        }
    }
    return '127.0.0.1'; // 默认返回 localhost
}

const localIP = getLocalIP();
console.log('Local IP Address:', localIP);

const server = new WebSocket.Server({ port: 8090, host: getLocalIP  });

server.on('connection', (socket) => {
    console.log('A client connected');

    // 监听消息
    socket.on('message', (message) => {
      // console.log(socket)
      const text = message.toString();
        console.log('Received:', text);

        // 广播消息给所有客户端
        server.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(text);
            }
        });
    });

    // 监听关闭
    socket.on('close', () => {
        console.log('Client disconnected');
    });
});

前端客户端

创建一个简单的聊天界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat</title>
</head>
<body>
    <div id="chatbox">
        <div id="messages"></div>
        <input type="text" id="input" placeholder="Type a message..." />
        <button id="send">Send</button>
    </div>

    <script>
        const ws = new WebSocket('ws://192.168.20.33:8090');

        const messagesDiv = document.getElementById('messages');
        const input = document.getElementById('input');
        const sendButton = document.getElementById('send');

        ws.onmessage = (event) => {
            const message = document.createElement('div');
            message.textContent = event.data;
            messagesDiv.appendChild(message);
        };

        sendButton.addEventListener('click', () => {
            const message = input.value;
            ws.send(message);
            input.value = '';
        });
    </script>
</body>
</html>

启动服务

启动 Node.js 后端：

node server.js

打开 HTML 文件，运行聊天客户端。