HTML5 从入门到精通（六）：构建实时互动 Web 应用 —— WebSocket 与 Server-Sent Events

摘要：实时互动 Web 应用在当今互联网领域占据重要地位，如在线聊天、实时协作编辑、金融数据实时推送等。本文深入剖析 HTML5 中 WebSocket 和 Server-Sent Events（SSE）技术，助力开发者构建低延迟、高效率的实时通信应用。文中将涵盖技术原理、代码示例、应用场景、注意事项，并辅以精美图片、架构图与流程图，采用优雅排版，为读者呈现全面实用的知识盛宴。

一、技术演进与实时通信需求

（一）传统轮询的弊端

早期 Web 应用多采用轮询机制实现 pseudo 实时通信，即客户端定时向服务器发送请求以获取数据更新。然而，轮询存在诸多缺陷：

高延迟 ：数据更新的及时性依赖轮询间隔，较短的轮询间隔虽能降低延迟，却大幅增加服务器负载与网络流量。
资源浪费 ：多数请求可能返回未更新的数据，导致带宽和服务器资源的浪费。

（二）WebSocket 与 SSE 的兴起

为克服传统轮询的不足，WebSocket 和 SSE 应运而生，它们均基于 HTTP 协议建立持久连接，显著降低通信延迟，提升数据传输效率，满足现代 Web 应用对 real - time 交互的需求。

二、WebSocket 技术详解

（一）WebSocket 原理与优势

工作原理 ：WebSocket 协议在客户端与服务器端之间建立全双工通信通道，双方可随时发送和接收数据，无需重复建立连接。
优势：
- 低延迟 ：数据传输近乎实时，延迟通常在几百毫秒以内。
- 高效率 ：减少了 HTTP 请求的头部信息和重复建立连接的开销，有效节省带宽和服务器资源。
- 全双工通信 ：支持客户端与服务器端同时发送和接收数据，实现真正的双向实时交互。

（二）WebSocket API 与代码示例

创建连接与事件处理

代码示例 ：

// 创建 WebSocket 连接
const ws = new WebSocket('ws://example.com/socket');
// 连接打开事件
ws.onopen = function(event) {
    console.log('WebSocket 连接已建立');
    // 发送消息
    ws.send('Hello Server!');
};
// 接收消息事件
ws.onmessage = function(event) {
    console.log('接收到服务器消息:', event.data);
    // 处理接收到的消息
};
// 连接关闭事件
ws.onclose = function(event) {
    console.log('WebSocket 连接已关闭');
};
// 错误事件
ws.onerror = function(event) {
    console.error('WebSocket 错误:', event);
};

发送不同类型数据

文本数据 ：ws.send('Hello Server!');

二进制数据（Blob 或 ArrayBuffer） ：

// 发送 Blob 数据
const blob = new Blob(['Hello Blob!'], { type: 'text/plain' });
ws.send(blob);
// 发送 ArrayBuffer 数据
const arrayBuffer = new ArrayBuffer(8);
const view = new Uint8Array(arrayBuffer);
for (let i = 0; i < view.length; i++) {
    view[i] = i;
}
ws.send(arrayBuffer);

（三）WebSocket 应用场景实例 —— 实时聊天应用

功能需求
- 用户可以输入用户名并加入聊天室。
- 用户发送的消息能实时显示在所有连接用户的聊天窗口中。
- 显示系统通知消息（如用户加入、离开等）。

代码实现

HTML 结构 ：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>WebSocket 实时聊天</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
            }
            #chat-container {
                border: 1px solid #ccc;
                border-radius: 5px;
                padding: 15px;
                margin-bottom: 20px;
            }
            #messages {
                height: 300px;
                overflow-y: auto;
                border: 1px solid #ddd;
                padding: 10px;
                margin-bottom: 10px;
                border-radius: 5px;
            }
            #input-area {
                display: flex;
                margin-bottom: 10px;
            }
            #message-input {
                flex: 1;
                padding: 8px;
                border: 1px solid #ddd;
                border-radius: 5px;
                margin-right: 10px;
            }
            button {
                padding: 8px 15px;
                background-color: #4CAF50;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }
            button:hover {
                background-color: #45a049;
            }
        </style>
    </head>
    <body>
        <h1>WebSocket 实时聊天</h1>
        <div id="login-area" style="margin-bottom: 20px;">
            <input type="text" id="username" placeholder="请输入用户名" style="padding: 8px; width: 200px; border: 1px solid #ddd; border-radius: 5px;">
            <button id="login-btn">加入聊天</button>
        </div>
        <div id="chat-container" style="display: none;">
            <div id="messages"></div>
            <div id="input-area">
                <input type="text" id="message-input" placeholder="请输入消息" disabled>
                <button id="send-btn" disabled>发送</button>
            </div>
        </div>
        <script>
            let ws;
            const loginArea = document.getElementById('login-area');
            const chatContainer = document.getElementById('chat-container');
            const usernameInput = document.getElementById('username');
            const loginBtn = document.getElementById('login-btn');
            const messagesDiv = document.getElementById('messages');
            const messageInput = document.getElementById('message-input');
            const sendBtn = document.getElementById('send-btn');
            loginBtn.addEventListener('click', function() {
                const username = usernameInput.value.trim();
                if (username) {
                    // 创建 WebSocket 连接
                    ws = new WebSocket('ws://example.com/chat');
                    // 隐藏登录区域，显示聊天容器
                    loginArea.style.display = 'none';
                    chatContainer.style.display = 'block';
                    // 启用消息输入和发送按钮
                    messageInput.disabled = false;
                    sendBtn.disabled = false;
                    // 连接打开事件
                    ws.onopen = function(event) {
                        console.log('WebSocket 连接已建立');
                        // 发送用户名给服务器
                        ws.send(JSON.stringify({ type: 'login', username: username }));
                    };
                    // 接收消息事件
                    ws.onmessage = function(event) {
                        const data = JSON.parse(event.data);
                        let messageHTML = '';
                        if (data.type === 'message') {
                            messageHTML = `<p><strong>${data.username}:</strong> ${data.content}</p>`;
                        } else if (data.type === 'system') {
                            messageHTML = `<p style="color: #888; text-align: center;">${data.content}</p>`;
                        }
                        messagesDiv.innerHTML += messageHTML;
                        // 滚动到底部
                        messagesDiv.scrollTop = messagesDiv.scrollHeight;
                    };
                    // 发送消息按钮点击事件
                    sendBtn.addEventListener('click', sendMessage);
                    // 消息输入框回车事件
                    messageInput.addEventListener('keypress', function(e) {
                        if (e.key === 'Enter') {
                            sendMessage();
                        }
                    });
                } else {
                    alert('请输入用户名');
                }
            });
            function sendMessage() {
                const message = messageInput.value.trim();
                if (message) {
                    ws.send(JSON.stringify({ type: 'message', content: message }));
                    messageInput.value = '';
                }
            }
            // 窗口关闭时关闭 WebSocket 连接
            window.addEventListener('beforeunload', function() {
                if (ws && ws.readyState === WebSocket.OPEN) {
                    ws.close();
                }
            });
        </script>
    </body>
</html>

服务器端实现（以 Node.js 为例） ：

const WebSocket = require('ws');
const http = require('http');
const server = http.createServer();
const wss = new WebSocket.Server({ server });
const clients = new Map();
wss.on('connection', function(ws) {
    // 存储客户端连接
    let username = '';
    ws.on('message', function(message) {
        const data = JSON.parse(message);
        if (data.type === 'login') {
            username = data.username;
            clients.set(username, ws);
            // 广播系统消息：用户加入
            broadcastSystemMessage(`${username} 加入了聊天`);
        } else if (data.type === 'message') {
            // 广播用户消息
            broadcastUserMessage(username, data.content);
        }
    });
    ws.on('close', function() {
        // 广播系统消息：用户离开
        if (username) {
            broadcastSystemMessage(`${username} 离开了聊天`);
            clients.delete(username);
        }
    });
});
// 广播系统消息
function broadcastSystemMessage(content) {
    const systemMessage = JSON.stringify({ type: 'system', content: content });
    clients.forEach(function(client) {
        if (client.readyState === WebSocket.OPEN) {
            client.send(systemMessage);
        }
    });
}
// 广播用户消息
function broadcastUserMessage(username, content) {
    const userMessage = JSON.stringify({ type: 'message', username: username, content: content });
    clients.forEach(function(client) {
        if (client.readyState === WebSocket.OPEN) {
            client.send(userMessage);
        }
    });
}
server.listen(8080, function() {
    console.log('WebSocket 服务器运行在 ws://localhost:8080');
});

（四）WebSocket 架构与流程

WebSocket 架构

架构：

客户端浏览器

| WebSocket 连接 | （全双工通信通道）
- 客户端脚本 ：使用 WebSocket API 创建连接，发送和接收消息。
- WebSocket 服务器 ：处理客户端连接，接收和广播消息。
- 应用服务器（可选） ：与 WebSocket 服务器交互，处理业务逻辑和数据存储。
WebSocket 通信流程

流程图：
1. 客户端创建 WebSocket 连接 ：客户端通过new WebSocket(url)创建连接请求。
2. 服务器接收并响应连接请求 ：服务器监听连接事件，建立 WebSocket 连接。
3. 连接建立后通信 ：双方通过send()方法发送数据，通过监听onmessage事件接收数据。
4. 关闭连接 ：任意一方调用close()方法关闭连接，触发onclose事件。

三、Server-Sent Events（SSE）详解

（一）SSE 原理与适用场景

工作原理 ：SSE 建立从服务器到客户端的单向通信通道，服务器可连续向客户端发送数据更新，客户端无需频繁轮询。客户端与服务器建立 EventSource 连接后，服务器通过发送事件消息向客户端推送数据。
适用场景 ：
- 服务器到客户端的实时数据推送 ：如股票行情、体育赛事比分、新闻快讯等。
- 进度通知 ：如文件上传进度、任务执行进度等。
- 实时通知系统 ：如邮件到达通知、即时消息提醒等。

（二）SSE API 与代码示例

客户端使用 SSE

代码示例

// 创建 EventSource 连接
const eventSource = new EventSource('http://example.com/events');
// 接收消息事件
eventSource.onmessage = function(event) {
    console.log('接收到消息:', event.data);
    // 处理接收到的数据
};
// 自定义事件类型处理
eventSource.addEventListener('custom-event', function(event) {
    console.log('接收到自定义事件:', event.data);
    // 处理自定义事件数据
});
// 错误事件处理
eventSource.onerror = function(event) {
    console.error('SSE 错误:', event);
    // 关闭连接
    eventSource.close();
};
// 关闭连接
// eventSource.close();

服务器端发送事件（以 Node.js 为例）

代码示例 ：

const http = require('http');
const server = http.createServer();
server.on('request', function(req, res) {
    if (req.url === '/events') {
        // 设置响应头
        res.setHeader('Content-Type', 'text/event-stream');
        res.setHeader('Cache-Control', 'no-cache');
        res.setHeader('Connection', 'keep-alive');
        // 发送事件消息
        let id = 1;
        setInterval(function() {
            const data = {
                id: id++,
                time: new Date().toISOString(),
                message: '服务器推送消息'
            };
            res.write('id: ' + data.id + '\n');
            res.write('data: ' + JSON.stringify(data) + '\n\n');
        }, 1000);
    } else {
        // 其他请求处理
        res.end('Hello World');
    }
});
server.listen(3000, function() {
    console.log('服务器运行在 http://localhost:3000');
});

（三）SSE 应用场景实例 —— 股票行情实时推送

功能需求
- 客户端实时显示股票行情数据，包括股票名称、当前价格、涨跌幅等。
- 数据更新时，页面自动刷新显示，无需用户手动刷新。

代码实现

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>
        <style>
            body {
                font-family: Arial, sans-serif;
                max-width: 1000px;
                margin: 0 auto;
                padding: 20px;
            }
            #stock-container {
                border: 1px solid #ddd;
                border-radius: 5px;
                padding: 15px;
                margin-top: 20px;
            }
            .stock-item {
                display: flex;
                justify-content: space-between;
                padding: 10px;
                border-bottom: 1px solid #eee;
            }
            .stock-item:last-child {
                border-bottom: none;
            }
            .stock-name {
                font-weight: bold;
            }
            .stock-price {
                color: #333;
            }
            .stock-change.up {
                color: red;
            }
            .stock-change.down {
                color: green;
            }
        </style>
    </head>
    <body>
        <h1>股票行情实时推送</h1>
        <div id="stock-container">
            <!-- 股票数据将通过 SSE 动态加载 -->
        </div>
        <script>
            const stockContainer = document.getElementById('stock-container');
            // 创建 EventSource 连接
            const eventSource = new EventSource('http://example.com/stock-events');
            // 接收消息事件
            eventSource.onmessage = function(event) {
                const stockData = JSON.parse(event.data);
                updateStockDisplay(stockData);
            };
            // 接收自定义事件（如市场开盘、收盘通知）
            eventSource.addEventListener('market-event', function(event) {
                const marketData = JSON.parse(event.data);
                const marketNotification = document.createElement('div');
                marketNotification.style.padding = '10px';
                marketNotification.style.backgroundColor = '#f0f8ff';
                marketNotification.style.marginTop = '15px';
                marketNotification.style.borderRadius = '5px';
                marketNotification.innerHTML = `<strong>${marketData.type}:</strong> ${marketData.message}`;
                stockContainer.insertBefore(marketNotification, stockContainer.firstChild);
            });
            // 错误事件处理
            eventSource.onerror = function(event) {
                console.error('SSE 错误:', event);
                const errorNotification = document.createElement('div');
                errorNotification.style.padding = '10px';
                errorNotification.style.backgroundColor = '#ffcccc';
                errorNotification.style.marginTop = '15px';
                errorNotification.style.borderRadius = '5px';
                errorNotification.innerHTML = '<strong>错误:</strong> 无法获取股票行情数据，请检查网络连接。';
                stockContainer.insertBefore(errorNotification, stockContainer.firstChild);
                // 尝试重新连接
                setTimeout(function() {
                    eventSource.close();
                    const newEventSource = new EventSource('http://example.com/stock-events');
                    // 重新绑定事件处理程序
                    newEventSource.onmessage = eventSource.onmessage;
                    newEventSource.addEventListener('market-event', function(e) {
                        eventSource.removeEventListener('market-event', eventSource.marketEvent);
                        eventSource.marketEvent(e);
                    });
                    newEventSource.onerror = eventSource.onerror;
                }, 5000);
            };
            // 更新股票数据显示
            function updateStockDisplay(stockData) {
                // 检查是否已存在该股票的显示元素
                const existingItem = document.querySelector(`.stock-item[data-id="${stockData.id}"]`);
                if (existingItem) {
                    // 更新现有元素内容
                    existingItem.querySelector('.stock-name').textContent = stockData.name;
                    existingItem.querySelector('.stock-price').textContent = stockData.price;
                    const changeElement = existingItem.querySelector('.stock-change');
                    changeElement.textContent = stockData.change;
                    // 根据涨跌情况设置颜色
                    if (stockData.change > 0) {
                        changeElement.className = 'stock-change up';
                    } else if (stockData.change < 0) {
                        changeElement.className = 'stock-change down';
                    } else {
                        changeElement.className = 'stock-change';
                    }
                } else {
                    // 创建新元素
                    const stockItem = document.createElement('div');
                    stockItem.className = 'stock-item';
                    stockItem.dataset.id = stockData.id;
                    stockItem.innerHTML = `
                        <span class="stock-name">${stockData.name}</span>
                        <span class="stock-price">${stockData.price}</span>
                        <span class="stock-change ${stockData.change > 0 ? 'up' : stockData.change < 0 ? 'down' : ''}">${stockData.change}</span>
                    `;
                    stockContainer.appendChild(stockItem);
                }
            }
        </script>
    </body>
</html>

服务器端实现（以 Node.js 为例） ：

const http = require('http');
const stocks = [
    { id: 1, name: '股票 A', price: 100.00, change: 0 },
    { id: 2, name: '股票 B', price: 50.50, change: 0 },
    { id: 3, name: '股票 C', price: 200.75, change: 0 }
];
const server = http.createServer();
server.on('request', function(req, res) {
    if (req.url === '/stock-events') {
        res.setHeader('Content-Type', 'text/event-stream');
        res.setHeader('Cache-Control', 'no-cache');
        res.setHeader('Connection', 'keep-alive');
        // 模拟股票数据更新
        let lastUpdate = new Date().getTime();
        function sendStockUpdate() {
            const now = new Date().getTime();
            if (now - lastUpdate >= 1000) { // 每秒更新一次
                lastUpdate = now;
                stocks.forEach(stock => {
                    // 随机模拟股票价格涨跌
                    const change = (Math.random() - 0.5) * 2;
                    stock.price += change;
                    stock.change = change.toFixed(2);
                    // 发送消息
                    res.write('id: ' + stock.id + '\n');
                    res.write('data: ' + JSON.stringify(stock) + '\n\n');
                });
                // 模拟市场事件通知
                if (Math.random() > 0.9) {
                    const marketEvents = ['market-open', 'market-close', 'market-alert'];
                    const marketEventType = marketEvents[Math.floor(Math.random() * marketEvents.length)];
                    let marketMessage = '';
                    if (marketEventType === 'market-open') {
                        marketMessage = '市场开盘，交易正式开始。';
                    } else if (marketEventType === 'market-close') {
                        marketMessage = '市场收盘，今日交易结束。';
                    } else {
                        marketMessage = '市场出现重大波动，请注意投资风险。';
                    }
                    res.write('event: market-event\n');
                    res.write('data: ' + JSON.stringify({ type: marketEventType, message: marketMessage }) + '\n\n');
                }
            }
            // 安排下一次更新
            setTimeout(sendStockUpdate, 200);
        }
        sendStockUpdate();
    } else {
        res.end('Hello World');
    }
});
server.listen(3000, function() {
    console.log('服务器运行在 http://localhost:3000');
});

（四）SSE 架构与流程

SSE 架构

架构：

客户端浏览器

| EventSource 连接 | （单向通信通道，服务器到客户端）
- 客户端脚本 ：使用 EventSource API 建立连接，监听服务器推送的事件消息并进行处理。
- 应用服务器 ：生成和管理事件数据，通过 HTTP 协议以文本/event - stream 格式持续向客户端发送事件消息。
SSE 通信流程

流程：
1. 客户端创建 EventSource 连接 ：客户端通过new EventSource(url)建立到服务器的连接。
2. 服务器接收连接并发送事件消息 ：服务器检测到连接后，开始定期或实时发送事件消息。
3. 客户端接收和处理事件消息 ：客户端通过监听onmessage事件或其他自定义事件类型，接收并处理服务器推送的数据。
4. 连接保持活跃 ：服务器保持连接活跃，持续推送数据更新，直至客户端调用close()方法关闭连接或网络异常中断连接。

四、WebSocket 与 SSE 的比较与选型指南

（一）技术对比维度

通信方向
- WebSocket ：全双工通信，支持客户端与服务器端双向发送和接收数据。
- SSE ：单向通信，仅支持服务器向客户端发送数据。
数据格式
- WebSocket ：支持文本数据（通常是 JSON 格式）和二进制数据（Blob 或 ArrayBuffer）。
- SSE ：数据格式为文本，通常以 JSON 格式传输，客户端通过 JavaScript 解析数据。
连接建立与维护成本
- WebSocket ：连接建立过程相对复杂，涉及握手协议，但一旦建立连接，数据传输效率极高，适合长时间连接和频繁数据交互。
- SSE ：基于 HTTP 协议，连接建立简单，服务器通过保持 HTTP 响应流打开连接，适用于服务器到客户端的持续数据推送，客户端实现相对简单。
浏览器兼容性
- WebSocket ：被大多数现代浏览器广泛支持，但在一些较旧的浏览器（如 IE 9 及以下版本）中可能不支持或支持有限。
- SSE ：在现代浏览器中支持良好，但在部分旧版浏览器（如 IE 系列）中不支持，需进行兼容性处理。

（二）选型决策树

以下是 WebSocket 与 SSE 选型的决策树：

决策树 ：

是否需要客户端向服务器发送实时数据 ：
- 是：选择 WebSocket。
- 否：继续下一步。
是否需要服务器持续向客户端推送大量实时数据 ：
- 是：选择 SSE。
- 否：根据具体需求评估其他技术（如传统轮询）。

（三）技术选型对比图

以下是 WebSocket 与 SSE 选型对比图：

对比图 ：

技术	通信方向	数据格式支持	连接维护成本	适用场景示例
WebSocket	全双工	文本、二进制	较高（需握手）	实时聊天、在线游戏、协作编辑等
SSE	单向（服务器到客户端）	文本（通常 JSON）	较低（基于 HTTP）	股票行情推送、新闻快讯、通知系统等

五、实时通信技术的安全性与注意事项

（一）安全性风险与防范

数据安全与隐私
- 风险说明 ：实时通信过程中，数据在客户端与服务器之间传输，可能包含敏感信息（如用户身份、消息内容等）。若数据未加密或加密方式不当，容易被中间人攻击窃取或篡改。
- 防范措施 ：
  - 使用加密协议（如 WSS:// 替代 WS://、HTTPS 替代 HTTP）确保数据在传输过程中的安全性。
  - 对敏感数据进行加密处理，即使数据被截获，攻击者也难以获取明文信息。
防止恶意攻击
- 风险说明 ：恶意用户可能通过发送大量虚假消息或恶意连接，导致服务器资源耗尽，引发拒绝服务攻击（DoS/DDoS）。
- 防范措施 ：
  - 在服务器端实施流量监控和限流策略，限制单个客户端的连接数和消息发送频率。
  - 对客户端身份进行验证，确保只有合法用户能够建立实时通信连接。

（二）性能优化与兼容性处理

性能优化技巧
- 合理控制消息频率 ：根据应用需求和服务器负载能力，合理设置消息推送频率，避免过度频繁的消息发送导致网络拥塞和服务器过载。
- 消息压缩 ：对于大数据量的传输，可采用压缩算法（如 gzip）对消息内容进行压缩，减少传输数据量，提高传输效率。
浏览器兼容性处理
- 检测技术支持情况 ：在客户端代码中，先检测浏览器对 WebSocket 或 SSE 的支持能力，若不支持，则提供降级方案（如使用轮询）。
- 使用兼容性库 ：借助第三方兼容性库（如 socket.io ）实现不同浏览器和技术之间的平滑兼容，简化开发和维护工作。

六、总结

本文深入剖析了 HTML5 实时通信技术 WebSocket 和 Server-Sent Events（SSE），从技术原理、API 使用、应用场景实例到选型指南和注意事项，进行了全面系统的讲解。通过丰富的代码示例、直观的架构图和流程图，以及对不同技术特点的深入比较分析，为开发者构建实时互动 Web 应用提供了实用、精准的指导。WebSocket 与 SSE 各有优势，开发者应根据应用需求和技术特点合理选择，充分发挥 HTML5 实时通信技术的潜力，打造高效、安全、流畅的实时互动体验，满足用户对即时信息和动态交互的需求。希望本文能够成为读者深入学习和实践 HTML5 实时通信技术的有力助手。

参考资料 ：

[1] MDN Web 文档. WebSocket API. WebSocket - Web API | MDN

[2] MDN Web 文档. Server - Sent Events. https://developer.mozilla.org/zh - CN/docs/Web/API/Server - Sent_Events_API

[3] 《HTML5 实时通信：WebSocket 与 SSE 实战指南》. 实时通信技术章节