页面不刷新也能实时通信详解网页数据同步原理与异步请求实战案例

嘿，朋友，你有没有想过，那些网页上跳动着的数字、实时跳动的股票价格、聊天气泡弹出的一瞬间——它们到底是怎样”凭空”出现在你眼前的？页面明明没有刷新啊。今天我们就来聊聊这个有趣的话题，把网页数据同步的秘密一层一层剥开给你看。

一、先忘掉刷新，聊聊”通信”的本质

想象一下，你和朋友在房间里聊天。传统网页模式是什么？每次你想问朋友”现在几点了”，你得跑出房间，跑到墙上的钟那里看一眼，再跑回来告诉他。而实时通信呢？就像你朋友手机装了个感应器，时间一到，自动给你发条消息。

网页也是一样。浏览器和服务器之间，其实一直有一根”隐形的线”连着。问题的关键是：这根线该怎么搭？

二、最原始的方法：轮询（Polling）

最早的网页开发者很聪明，也很笨。聪明的是他们想到了办法，笨的是办法太笨了。

短轮询的工作方式是这样的：

// 每3秒向服务器问一次数据
setInterval(async () => {
    const response = await fetch('/api/data');
    const data = await response.json();
    updateUI(data);
}, 3000);

看着还行？但你想过没有，如果数据根本没变化，这3秒钟里服务器其实什么都没做，浏览器却在反复敲门：”有数据吗？有数据吗？有数据吗？”服务器也很无奈：”没有啊，你歇会儿。”

这就好比你在等外卖，每3秒打个电话问骑手”到哪了”。骑手烦不烦？你烦不烦？网络流量是不是也浪费了？

三、聪明一点：长轮询（Long Polling）

既然短轮询太笨，那就让服务器”憋一会儿”再回答。

浏览器: "嘿，有数据吗？"
服务器: "没有，但我先不挂电话"
        （服务器一直握着连接，等数据来了再回复）
        （一旦有数据，立刻回复并关闭连接）
浏览器: "收到！马上再问一次"
服务器: "好，我又握着了..."

用代码实现长轮询：

async function longPoll() {
    try {
        const response = await fetch('/api/long-poll');
        const data = await response.json();
        updateUI(data); // 更新页面
    } catch (error) {
        console.error('请求失败:', error);
    }
    // 无论成功失败，都继续轮询
    longPoll();
}

longPoll();

服务器端的逻辑（以Node.js + Express为例）：

const express = require('express');
const app = express();

// 存储等待中的连接
const waitingClients = [];

app.get('/api/long-poll', (req, res) => {
    // 把响应对象存入等待列表
    waitingClients.push(res);
    
    // 客户端断开时移除
    req.on('close', () => {
        const index = waitingClients.indexOf(res);
        if (index > -1) {
            waitingClients.splice(index, 1);
        }
    });
});

// 当有新数据时，推送给所有等待的客户端
function broadcast(data) {
    waitingClients.forEach(res => {
        res.json(data);
    });
    waitingClients.length = 0;
}

// 模拟每秒产生新数据
setInterval(() => {
    broadcast({ timestamp: Date.now(), value: Math.random() });
}, 1000);

长轮询比短轮询聪明多了。但注意看——每次响应结束后，浏览器又会发起新请求。连接还是断断续续的，只是”等”的时间变长了。

四、SSE：服务器单向推送的优雅方案

如果你只需要服务器主动推数据给浏览器（比如通知、股票行情、直播弹幕），Server-Sent Events（SSE） 是个不错的选择。

SSE 基于普通的 HTTP 连接，但它建立的是一个持久化的单向通道。浏览器开一个连接，服务器随时往里”倒”数据，浏览器自动接收。

// 浏览器端
const eventSource = new EventSource('/api/sse');

eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    updateUI(data);
};

eventSource.onerror = (error) => {
    console.error('SSE连接出错:', error);
    // 断开后浏览器会自动重连
};

服务器端（Node.js）：

app.get('/api/sse', (req, res) => {
    // 关键：设置SSE响应头
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    
    // 每隔1秒发送一条数据
    const timer = setInterval(() => {
        const data = JSON.stringify({
            time: new Date().toLocaleTimeString(),
            value: Math.random().toFixed(4)
        });
        // SSE格式：data: 内容\n\n
        res.write(`data: ${data}\n\n`);
    }, 1000);
    
    // 客户端断开时清理
    req.on('close', () => {
        clearInterval(timer);
    });
});

SSE 的好处是：

• 浏览器自动重连，你不用写重连逻辑
• 支持发送事件ID，断线后可以从断点续传
• 基于HTTP，穿透防火墙和代理更方便

缺点也很明显：只能服务器推给浏览器，浏览器不能通过这个通道给服务器发消息。如果你需要双向通信，SSE就不够用了。

五、WebSocket：真正的双向实时通道

WebSocket 是目前实现双向实时通信最主流的方案。它在浏览器和服务器之间建立了一条全双工的通道——双方随时可以互发消息，就像打电话一样，不用像SSE那样”单向广播”。

// 浏览器端
const ws = new WebSocket('wss://your-server.com/ws');

ws.onopen = () => {
    console.log('连接已建立');
    ws.send(JSON.stringify({ type: 'hello', payload: { userId: 123 } }));
};

ws.onmessage = (event) => {
    const message = JSON.parse(event.data);
    handleIncomingMessage(message);
};

ws.onclose = (event) => {
    console.log(`连接关闭: ${event.code} ${event.reason}`);
    // 处理断线重连...
};

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

服务器端（用Node.js + ws库）：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

// 存储所有连接
const clients = new Set();

wss.on('connection', (ws) => {
    clients.add(ws);
    console.log('新客户端连接，当前在线:', clients.size);
    
    // 发送欢迎消息
    ws.send(JSON.stringify({
        type: 'welcome',
        payload: { message: '欢迎连接实时服务', onlineCount: clients.size }
    }));
    
    ws.on('message', (data) => {
        const message = JSON.parse(data);
        console.log('收到消息:', message);
        
        // 广播给所有客户端
        const broadcastData = JSON.stringify({
            type: 'broadcast',
            payload: { from: 'server', data: message, timestamp: Date.now() }
        });
        
        clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(broadcastData);
            }
        });
    });
    
    ws.on('close', () => {
        clients.delete(ws);
        console.log('客户端断开，当前在线:', clients.size);
    });
});

WebSocket 连接建立后，通信过程是这样的：

1. 客户端发起 HTTP 升级请求
   GET /ws HTTP/1.1
   Upgrade: websocket
   Connection: Upgrade
   
2. 服务器响应 101 Switching Protocols
   HTTP/1.1 101 
   Upgrade: websocket
   Connection: Upgrade
   
3. 此后双方走 WebSocket 协议，不再是HTTP
   可以互相随时发送数据，延迟极低

这就是为什么 WebSocket 延迟那么低——建立连接后，数据帧直接传输，没有 HTTP 请求头的开销。

六、对比选择：到底该用哪个？

方案	实现难度	延迟	双向通信	自动重连	适用场景
短轮询	⭐	高	✅	✅	简单监控、数据不敏感
长轮询	⭐⭐	中	✅	❌	兼容旧浏览器、HTTP优先
SSE	⭐⭐	低	❌	✅	实时通知、股票行情、直播
WebSocket	⭐⭐⭐	极低	✅	❌	聊天、游戏、协作编辑

七、实战：做一个实时聊天室

光说不练假把式。我们来做一个完整的实时聊天室，把 WebSocket 用活。

项目结构：

chat-app/
├── server.js
├── public/
│   ├── index.html
│   ├── style.css
│   └── app.js

服务器端 server.js：

const WebSocket = require('ws');
const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
    // 静态文件服务
    let filePath = '.' + req.url;
    if (filePath === './') filePath = './public/index.html';
    
    const extname = path.extname(filePath);
    const contentTypes = {
        '.html': 'text/html',
        '.js': 'application/javascript',
        '.css': 'text/css',
        '.json': 'application/json'
    };
    
    fs.readFile(filePath, (err, content) => {
        if (err) {
            res.writeHead(404);
            res.end('文件未找到');
            return;
        }
        res.writeHead(200, { 'Content-Type': contentTypes[extname] || 'text/plain' });
        res.end(content, 'utf-8');
    });
});

const wss = new WebSocket.Server({ server });

// 存储用户信息
const users = new Map();
const conversations = new Map();

wss.on('connection', (ws, req) => {
    const userId = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    users.set(ws, { id: userId, name: `用户${userId.slice(-4)}`, joinTime: new Date() });
    
    console.log(`[${userId}] 已连接，当前在线: ${users.size}`);
    
    // 发送连接成功确认
    ws.send(JSON.stringify({
        type: 'connected',
        payload: { userId, onlineCount: users.size }
    }));
    
    // 广播用户列表
    broadcastUserList();
    
    ws.on('message', (data) => {
        try {
            const message = JSON.parse(data);
            const user = users.get(ws);
            
            if (!user) return;
            
            switch (message.type) {
                case 'chat':
                    handleChatMessage(ws, user, message.payload);
                    break;
                case 'typing':
                    broadcastTyping(user, message.payload.isTyping);
                    break;
                default:
                    console.log('未知消息类型:', message.type);
            }
        } catch (error) {
            console.error('消息解析错误:', error);
        }
    });
    
    ws.on('close', () => {
        const user = users.get(ws);
        if (user) {
            console.log(`[${user.id}] 已断开`);
            users.delete(ws);
            broadcastUserList();
            ws.send(JSON.stringify({
                type: 'user_left',
                payload: { userId: user.id, onlineCount: users.size }
            }));
        }
    });
    
    ws.on('error', (error) => {
        console.error(`[${users.get(ws)?.id || 'unknown'}] WebSocket错误:`, error.message);
    });
});

function handleChatMessage(ws, user, payload) {
    const { content, conversationId = 'general' } = payload;
    
    const chatMessage = {
        id: `msg_${Date.now()}`,
        userId: user.id,
        userName: user.name,
        content,
        conversationId,
        timestamp: Date.now()
    };
    
    // 存储消息
    if (!conversations.has(conversationId)) {
        conversations.set(conversationId, []);
    }
    conversations.get(conversationId).push(chatMessage);
    
    // 广播给所有客户端
    broadcast({
        type: 'chat_message',
        payload: chatMessage
    });
}

function broadcast(data) {
    const message = JSON.stringify(data);
    users.forEach((user, ws) => {
        if (ws.readyState === WebSocket.OPEN) {
            ws.send(message);
        }
    });
}

function broadcastUserList() {
    const userList = Array.from(users.values()).map(u => ({
        id: u.id,
        name: u.name,
        joinTime: u.joinTime.toISOString()
    }));
    broadcast({ type: 'user_list', payload: userList });
}

function broadcastTyping(sender, isTyping) {
    broadcast({
        type: 'typing_indicator',
        payload: { userId: sender.id, userName: sender.name, isTyping }
    });
}

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`🚀 聊天服务器运行在 http://localhost:${PORT}`);
});

前端页面 public/index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时聊天室</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>💬 实时聊天室</h1>
            <div class="status">
                <span id="connectionStatus" class="status-dot disconnected">●</span>
                <span id="onlineCount">0 人在线</span>
            </div>
        </header>
        
        <div class="main-layout">
            <aside class="sidebar">
                <h3>在线用户</h3>
                <ul id="userList" class="user-list">
                    <li class="empty-tip">暂无用户</li>
                </ul>
            </aside>
            
            <main class="chat-area">
                <div id="messages" class="messages"></div>
                <div id="typingIndicator" class="typing-indicator"></div>
                <form id="chatForm" class="chat-form">
                    <input type="text" id="messageInput" placeholder="输入消息..." autocomplete="off">
                    <button type="submit" id="sendBtn">发送</button>
                </form>
            </main>
        </div>
    </div>
    
    <script src="app.js"></script>
</body>
</html>

前端逻辑 public/app.js：

class ChatClient {
    constructor() {
        this.ws = null;
        this.userId = null;
        this.isConnected = false;
        this.typingTimers = new Map();
        
        this.cache = {
            messages: [],
            users: new Map()
        };
        
        this.initElements();
        this.bindEvents();
        this.connect();
    }
    
    initElements() {
        this.elements = {
            status: document.getElementById('connectionStatus'),
            onlineCount: document.getElementById('onlineCount'),
            userList: document.getElementById('userList'),
            messages: document.getElementById('messages'),
            typingIndicator: document.getElementById('typingIndicator'),
            form: document.getElementById('chatForm'),
            input: document.getElementById('messageInput'),
            sendBtn: document.getElementById('sendBtn')
        };
    }
    
    bindEvents() {
        this.elements.form.addEventListener('submit', (e) => {
            e.preventDefault();
            this.sendMessage();
        });
        
        this.elements.input.addEventListener('input', () => {
            this.handleTyping();
        });
    }
    
    connect() {
        const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsUrl = `${protocol}//${location.host}`;
        
        this.updateConnectionStatus('connecting');
        
        this.ws = new WebSocket(wsUrl);
        
        this.ws.onopen = () => {
            console.log('WebSocket连接成功');
            this.isConnected = true;
            this.updateConnectionStatus('connected');
        };
        
        this.ws.onmessage = (event) => {
            try {
                const data = JSON.parse(event.data);
                this.handleMessage(data);
            } catch (error) {
                console.error('消息解析失败:', error);
            }
        };
        
        this.ws.onclose = () => {
            console.log('WebSocket连接关闭');
            this.isConnected = false;
            this.updateConnectionStatus('disconnected');
            
            // 5秒后自动重连
            setTimeout(() => this.connect(), 5000);
        };
        
        this.ws.onerror = (error) => {
            console.error('WebSocket错误:', error);
            this.updateConnectionStatus('error');
        };
    }
    
    handleMessage(data) {
        switch (data.type) {
            case 'connected':
                this.userId = data.payload.userId;
                this.addSystemMessage(`欢迎加入！你的ID: ${this.userId}`);
                break;
                
            case 'chat_message':
                this.renderMessage(data.payload);
                break;
                
            case 'user_list':
                this.updateUserList(data.payload);
                break;
                
            case 'user_left':
                this.addSystemMessage(`用户已离开，当前在线: ${data.payload.onlineCount}人`);
                break;
                
            case 'typing_indicator':
                this.handleTypingIndicator(data.payload);
                break;
                
            default:
                console.log('未知消息类型:', data.type);
        }
    }
    
    renderMessage(msg) {
        const isSelf = msg.userId === this.userId;
        const messageEl = document.createElement('div');
        messageEl.className = `message ${isSelf ? 'message-self' : 'message-other'}`;
        
        const time = new Date(msg.timestamp).toLocaleTimeString('zh-CN', { 
            hour: '2-digit', 
            minute: '2-digit' 
        });
        
        messageEl.innerHTML = `
            <div class="message-header">
                <span class="message-user">${isSelf ? '我' : msg.userName}</span>
                <span class="message-time">${time}</span>
            </div>
            <div class="message-content">${this.escapeHtml(msg.content)}</div>
        `;
        
        this.elements.messages.appendChild(messageEl);
        this.scrollToBottom();
        
        // 缓存消息
        this.cache.messages.push(msg);
    }
    
    sendMessage() {
        const content = this.elements.input.value.trim();
        if (!content || !this.isConnected) return;
        
        this.ws.send(JSON.stringify({
            type: 'chat',
            payload: { content }
        }));
        
        this.elements.input.value = '';
        this.elements.sendBtn.disabled = true;
        setTimeout(() => this.elements.sendBtn.disabled = false, 500);
    }
    
    handleTyping() {
        if (!this.isConnected) return;
        
        this.ws.send(JSON.stringify({
            type: 'typing',
            payload: { isTyping: true }
        }));
        
        // 停止发送typing信号后2秒
        clearTimeout(this.typingTimers.get('self'));
        this.typingTimers.set('self', setTimeout(() => {
            this.ws.send(JSON.stringify({
                type: 'typing',
                payload: { isTyping: false }
            }));
        }, 2000));
    }
    
    handleTypingIndicator({ userId, userName, isTyping }) {
        if (userId === this.userId) return;
        
        clearTimeout(this.typingTimers.get(userId));
        
        if (isTyping) {
            this.elements.typingIndicator.textContent = `${userName} 正在输入...`;
            this.typingTimers.set(userId, setTimeout(() => {
                this.elements.typingIndicator.textContent = '';
            }, 3000));
        } else {
            this.elements.typingIndicator.textContent = '';
        }
    }
    
    updateUserList(users) {
        this.elements.userList.innerHTML = '';
        
        if (users.length === 0) {
            this.elements.userList.innerHTML = '<li class="empty-tip">暂无用户</li>';
            this.elements.onlineCount.textContent = '0 人在线';
            return;
        }
        
        this.elements.onlineCount.textContent = `${users.length} 人在线`;
        
        users.forEach(user => {
            const li = document.createElement('li');
            li.className = 'user-item';
            li.innerHTML = `
                <span class="user-name">${user.name}</span>
                <span class="user-id">${user.id.slice(-4)}</span>
            `;
            this.elements.userList.appendChild(li);
        });
    }
    
    addSystemMessage(text) {
        const msgEl = document.createElement('div');
        msgEl.className = 'system-message';
        msgEl.textContent = text;
        this.elements.messages.appendChild(msgEl);
        this.scrollToBottom();
    }
    
    updateConnectionStatus(status) {
        const el = this.elements.status;
        el.className = `status-dot ${status}`;
        
        const statusText = {
            connected: '已连接',
            connecting: '连接中...',
            disconnected: '未连接',
            error: '连接错误'
        };
        
        this.elements.onlineCount.textContent = statusText[status] || status;
    }
    
    scrollToBottom() {
        this.elements.messages.scrollTop = this.elements.messages.scrollHeight;
    }
    
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}

// 启动应用
document.addEventListener('DOMContentLoaded', () => {
    new ChatClient();
});

样式文件 public/style.css：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f0f2f5;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 90%;
    max-width: 1000px;
    height: 85vh;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    font-size: 1.4rem;
}

.status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.3s;
}

.status-dot.connected { background: #4caf50; }
.status-dot.connecting { background: #ff9800; animation: pulse 1s infinite; }
.status-dot.disconnected { background: #f44336; }
.status-dot.error { background: #f44336; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    border-right: 1px solid #e0e0e0;
    padding: 16px;
    overflow-y: auto;
}

.sidebar h3 {
    font-size: 1rem;
    color: #333;
    margin-bottom: 12px;
}

.user-list {
    list-style: none;
}

.user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.user-id {
    color: #999;
    font-size: 0.75rem;
}

.empty-tip {
    color: #999;
    font-size: 0.85rem;
    text-align: center;
    padding: 20px;
}

.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.message {
    margin-bottom: 12px;
    max-width: 70%;
}

.message-self {
    margin-left: auto;
}

.message-other {
    margin-right: auto;
}

.message-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 4px;
}

.message-content {
    padding: 10px 14px;
    border-radius: 12px;
    background: #f0f0f0;
    word-wrap: break-word;
    line-height: 1.5;
}

.message-self .message-content {
    background: #667eea;
    color: white;
    border-bottom-right-radius: 4px;
}

.message-other .message-content {
    background: #e8e8e8;
    color: #333;
    border-bottom-left-radius: 4px;
}

.system-message {
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    padding: 8px;
    margin: 8px 0;
}

.typing-indicator {
    padding: 4px 16px;
    font-size: 0.8rem;
    color: #999;
    height: 20px;
}

.chat-form {
    display: flex;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    gap: 10px;
}

.chat-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.chat-form input:focus {
    border-color: #667eea;
}

.chat-form button {
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.chat-form button:hover {
    opacity: 0.9;
}

.chat-form button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 滚动条美化 */
.messages::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.messages::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.messages::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

运行步骤：

# 1. 初始化项目
mkdir chat-app && cd chat-app
npm init -y
npm install ws

# 2. 创建文件结构（按上面给出的代码创建）

# 3. 启动服务器
node server.js

# 4. 浏览器打开 http://localhost:3000
# 打开多个窗口，就能体验实时聊天了！

八、一些实战中的坑和建议

1. 重连策略很重要

WebSocket 不是万无一失的，网络抖动、服务器重启都会断开连接。不要简单地 setInterval(connect, 5000)，要用指数退避：

let reconnectDelay = 1000;
const maxDelay = 30000;

function connect() {
    ws = new WebSocket(url);
    
    ws.onclose = () => {
        setTimeout(() => {
            connect();
            reconnectDelay = Math.min(reconnectDelay * 2, maxDelay);
        }, reconnectDelay);
    };
    
    ws.onopen = () => {
        reconnectDelay = 1000; // 重连成功，重置延迟
    };
}

2. 消息序问题

TCP 是有序的，但 WebSocket 经过代理或 CDN 时可能乱序。关键业务消息建议加上序列号：

let seq = 0;
function sendMessage(data) {
    ws.send(JSON.stringify({ seq: ++seq, ...data }));
}

3. 心跳保活

有些网关会在空闲一段时间后关闭连接。定期发心跳：

setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify({ type: 'ping' }));
    }
}, 30000);

4. 数据量大了怎么办？

如果消息很多，前端不要一次性渲染所有消息。用虚拟滚动，只渲染可视区域内的消息：

// 只保留最近100条消息在DOM中
const VISIBLE_COUNT = 100;
function renderMessages(messages) {
    const start = Math.max(0, messages.length - VISIBLE_COUNT);
    const visible = messages.slice(start);
    // 渲染 visible...
}

九、总结一下

网页实时通信的核心就一句话：让浏览器和服务器之间保持一条”长聊”的通道，而不是每次问一句挂一次电话。

• 简单单向推送 → SSE
• 复杂双向通信 → WebSocket
• 兼容老古董浏览器 → 长轮询
• 真的什么都不想搞 → 短轮询（但会被骂）

现在你再打开那些”实时”的网页，心里大概清楚它们在背后做了什么了吧？那些跳动的数字、闪烁的通知、同步的光标——都是这些技术在默默工作。理解了原理，下次再遇到相关问题，你就知道该往哪个方向去调试了。

有什么具体问题或者想深入的方向，随时聊聊。