基于 Server-sent Events(SSE) 的 Web 实时监测和统计系统

在现代 Web 应用中，往往需要实时监测和统计用户行为。传统的轮询方式浪费了大量的服务器资源，而 WebSocket 又需要特殊的服务器支持。那这时候一个新的技术 Server-sent Events (SSE) 出现了。本文将介绍如何基于 SSE 实现 Web 实时监测和统计系统，并提供相关示例代码。

Server-sent Events (SSE) 简介

Server-sent Events (SSE) 是一种基于 HTTP 的服务器推送技术。它可以通过 HTTP 连接的方式实时向客户端发送数据，与 WebSocket 不同的是，SSE 只支持服务器向客户端单向传递数据。SSE 传递的数据是一条消息流，客户端通过监听这个流可以实时获取最新的数据。

SSE 主要特点

• 基于 HTTP 协议，无需特殊服务器支持；
• 支持跨域；
• 支持服务器推送；
• 支持自定义事件类型；
• 支持断线重连；
• 支持文本、JSON 和二进制数据传输。

SSE 实现实时监测和统计系统

假设我们有一个 Web 应用，需要实时监测客户端的页面浏览情况，并实时统计出每个页面的访问数量。我们可以通过 SSE 技术来实现这个功能。

服务端代码示例

服务端代码使用 Node.js 平台和 Express 框架实现，示例代码如下：

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

let pageViews = {};

// 响应 SSE 请求
app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 发送消息流
  setInterval(() => {
    let data = 'data: ' + JSON.stringify(pageViews) + '\n\n';
    res.write(data);
  }, 1000);
});

// 增加页面访问量
app.get('/:pageId', (req, res) => {
  let pageId = req.params.pageId;
  pageViews[pageId] = (pageViews[pageId] || 0) + 1;

  res.send('You are visiting ' + pageId);
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

服务端代码的主要逻辑是：

1. 定义了一个 pageViews 对象来记录所有页面的访问量；
2. 在 /events 路径上处理 SSE 请求；
3. 在 setInterval 中定时向客户端发送消息流；
4. 在 /:pageId 路径上处理页面访问请求。每次访问时增加相应页面的访问量，并向客户端发送响应消息。

客户端代码示例

客户端代码使用纯 JavaScript 实现，示例代码如下：

let eventSource = new EventSource('/events');
let pageViews = {};

eventSource.onmessage = (event) => {
  let newPageViews = JSON.parse(event.data);
  Object.keys(newPageViews).forEach((pageId) => {
    if (newPageViews[pageId] !== pageViews[pageId]) {
      let newCount = newPageViews[pageId];
      let oldCount = pageViews[pageId] || 0;
      pageViews[pageId] = newCount;
      console.log(pageId + ' has ' + newCount + ' views (+' + (newCount - oldCount) + ')');
    }
  });
};

eventSource.onerror = (event) => {
  console.log('Error occurred');
};

window.addEventListener('beforeunload', () => {
  eventSource.close();
});

客户端代码的主要逻辑是：

1. 创建一个 EventSource 对象，监听 /events 路径上的 SSE 请求；
2. 在 onmessage 回调函数中处理服务端发来的消息，更新页面访问量，并输出到控制台；
3. 在 onerror 回调函数中打印错误信息；
4. 在 beforeunload 事件中关闭 SSE 连接。

总结

本文介绍了如何基于 SSE 实现 Web 实时监测和统计系统，包括服务端和客户端代码示例。相比传统的轮询方式和 WebSocket 技术，SSE 具有更简单、更灵活、更高效的特点。SSE 技术在实现实时监测和统计功能方面具有广泛的应用前景。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e4edaadd4f0e0ff74f4eb