基于Server Sent Events实现前端实时更新HTML表格

实现思路 #

前端通过浏览器原生的EventSource API与Go后端的SSE接口建立长连接，每次接收后端推送的完整数据切片后，解析JSON并重新渲染表格内容，确保表格与后端数据同步更新。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>实时随机数表格</title>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1>实时更新的随机数表格</h1>
    <table id="randomTable">
        <thead>
            <tr>
                <th>随机数</th>
                <th>附加内容</th>
            </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>

    <script>
        // 替换为你的Go后端SSE接口地址
        const eventSource = new EventSource('/sse-stream');
        
        const tableBody = document.getElementById('tableBody');

        // 接收SSE推送的数据
        eventSource.onmessage = function(event) {
            try {
                // 解析后端返回的JSON数据
                const response = JSON.parse(event.data);
                const dataItems = response.data.Items;
                
                // 清空表格现有内容，确保数据全量同步
                tableBody.innerHTML = '';
                
                // 遍历数据项，生成表格行
                dataItems.forEach(item => {
                    const row = document.createElement('tr');
                    
                    // 创建随机数字段单元格
                    const numCell = document.createElement('td');
                    numCell.textContent = item.Random_Number;
                    
                    // 创建附加内容字段单元格
                    const contentCell = document.createElement('td');
                    contentCell.textContent = item.Something;
                    
                    row.appendChild(numCell);
                    row.appendChild(contentCell);
                    tableBody.appendChild(row);
                });
            } catch (error) {
                console.error('数据解析失败:', error);
            }
        };

        // 处理SSE连接错误
        eventSource.onerror = function(error) {
            console.error('SSE连接异常:', error);
            // 可在此添加重连逻辑
            eventSource.close();
        };
    </script>
</body>
</html>

关键细节说明 #

1. EventSource连接：EventSource会自动维持与后端的长连接，无需手动处理轮询，后端推送数据时会触发onmessage事件。
2. 数据解析：后端返回的JSON结构为{"data":{"Items": [...]}}，需逐层解析到Items数组。
3. 表格渲染：每次接收数据后清空表格tbody，再重新生成所有行，保证表格内容与后端的完整切片完全一致。如果后端后续改为仅推送新增数据，可修改为只追加新行以提升性能。
4. 错误处理：捕获JSON解析错误和连接异常，避免页面逻辑崩溃，可根据需求添加自动重连逻辑。

内容的提问来源于stack exchange，提问作者Radin Khosraviani