实时聊天室

创作时间:

作者:

@小白创作中心

实时聊天室

引用

CSDN

https://blog.csdn.net/bryant_liu24/article/details/145170521

背景：WebSocket来了，实时世界开始嗨！

如果HTTP是个老派的“单向广播”，那么WebSocket就是现代化的“实时聊天”。想象一下，你在一个聊天室里发消息，结果得等半天才收到回复——这可是轮询技术的锅！为了让服务器和客户端“你一言我一语”，WebSocket强势登场。它不仅让通信变得实时，还让开发者体验到了“实时爽感”。今天我们就来扒一扒WebSocket的技术内幕，以及它是如何在项目中大展身手的。

一、技术概念

WebSocket是一种协议，它在单个TCP连接上提供了全双工通信。与HTTP的“请求-响应”模式不同，WebSocket一旦建立连接，客户端和服务器可以随时互发消息，就像两个朋友在微信上实时聊天。

它的特点包括：

实时性：数据瞬时传输，无需等待。
双向通信：服务端和客户端都能主动发消息。
轻量级：使用更少的头部信息，降低了网络开销。

WebSocket的典型应用场景包括：实时聊天室、在线游戏、股票行情更新等。

二、项目实战

详细代码案例：WebSocket在三个项目中的实战

案例1：实时聊天室

目标：实现一个多人聊天系统，用户发送的消息能实时广播给所有在线用户。

完整服务端代码（Node.js）：

const WebSocket = require('ws');
// 创建 WebSocket 服务器
const server = new WebSocket.Server({ port: 8080 });
console.log('WebSocket 服务器已启动，端口 8080');
server.on('connection', (socket) => {
    console.log('有新客户端连接');
    // 接收到客户端消息
    socket.on('message', (message) => {
        console.log(`收到消息: ${message}`);
        // 将消息广播给所有连接的客户端
        server.clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
    // 客户端断开连接
    socket.on('close', () => {
        console.log('客户端已断开');
    });
});

完整客户端代码（HTML + JavaScript）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时聊天室</title>
</head>
<body>
    <h1>实时聊天室</h1>
    <div>
        <input id="message" type="text" placeholder="输入消息...">
        <button onclick="sendMessage()">发送</button>
    </div>
    <ul id="chat-log"></ul>
    <script>
        const socket = new WebSocket('ws://localhost:8080');
        socket.onopen = () => console.log('连接成功！');
        socket.onmessage = (event) => {
            const chatLog = document.getElementById('chat-log');
            const messageItem = document.createElement('li');
            messageItem.textContent = event.data;
            chatLog.appendChild(messageItem);
        };
        socket.onclose = () => console.log('连接已关闭');
        socket.onerror = (error) => console.error('WebSocket 错误:', error);
        function sendMessage() {
            const messageInput = document.getElementById('message');
            const message = messageInput.value;
            if (message) {
                socket.send(message);
                messageInput.value = '';
            }
        }
    </script>
</body>
</html>

案例2：股票行情实时更新

目标：实时推送股票数据，更新页面显示。

服务端代码：

const WebSocket = require('ws');
// 模拟股票数据
function generateStockData() {
    return {
        symbol: 'AAPL',
        price: (100 + Math.random() * 50).toFixed(2),
        timestamp: new Date().toISOString()
    };
}
// 创建 WebSocket 服务器
const server = new WebSocket.Server({ port: 8081 });
console.log('股票实时推送服务启动，端口 8081');
server.on('connection', (socket) => {
    console.log('客户端连接成功');
    // 定时推送股票数据
    const intervalId = setInterval(() => {
        const stockData = generateStockData();
        socket.send(JSON.stringify(stockData));
    }, 1000);
    // 客户端断开后清除定时器
    socket.on('close', () => {
        console.log('客户端断开连接');
        clearInterval(intervalId);
    });
});

客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>股票实时推送</title>
</head>
<body>
    <h1>股票实时推送</h1>
    <table border="1">
        <thead>
            <tr>
                <th>股票代码</th>
                <th>当前价格</th>
                <th>时间戳</th>
            </tr>
        </thead>
        <tbody id="stock-table">
        </tbody>
    </table>
    <script>
        const socket = new WebSocket('ws://localhost:8081');
        socket.onopen = () => console.log('连接成功');
        socket.onmessage = (event) => {
            const stockData = JSON.parse(event.data);
            const table = document.getElementById('stock-table');
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${stockData.symbol}</td>
                <td>${stockData.price}</td>
                <td>${stockData.timestamp}</td>
            `;
            table.innerHTML = ''; // 清空旧数据
            table.appendChild(row);
        };
        socket.onclose = () => console.log('连接已关闭');
        socket.onerror = (error) => console.error('WebSocket 错误:', error);
    </script>
</body>
</html>

案例3：多人协作白板

目标：实现一个实时共享画板，用户的绘图操作能同步给其他用户。

服务端代码：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8082 });
console.log('实时白板服务启动，端口 8082');
server.on('connection', (socket) => {
    console.log('客户端已连接');
    // 接收绘图数据并广播
    socket.on('message', (data) => {
        server.clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(data);
            }
        });
    });
    socket.on('close', () => {
        console.log('客户端断开连接');
    });
});

客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多人实时协作白板</title>
    <style>
        canvas {
            border: 1px solid black;
            cursor: crosshair;
        }
    </style>
</head>
<body>
    <h1>实时协作白板</h1>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const socket = new WebSocket('ws://localhost:8082');
        let drawing = false;
        canvas.addEventListener('mousedown', () => drawing = true);
        canvas.addEventListener('mouseup', () => drawing = false);
        canvas.addEventListener('mousemove', (event) => {
            if (!drawing) return;
            const { offsetX, offsetY } = event;
            ctx.fillRect(offsetX, offsetY, 2, 2);
            socket.send(JSON.stringify({ x: offsetX, y: offsetY }));
        });
        socket.onmessage = (event) => {
            const { x, y } = JSON.parse(event.data);
            ctx.fillRect(x, y, 2, 2);
        };
    </script>
</body>
</html>