原生 JavaScript+HTML5 实现 SSE 在线猫眼电影票房实时刷新-JavaScript中文网-JavaScript教程资源分享门户

随着互联网技术的不断发展，越来越多的网站开始使用实时数据展示，其中电影票房数据的实时更新也是很多网站都关注的一个问题。本文将介绍如何使用原生JavaScript和HTML5技术，通过SSE（Server-Sent Events）实现在线猫眼电影票房实时刷新。

SSE 简介

SSE是一种在客户端和服务器之间单向传输数据的技术，使用了HTTP协议中的长连接，从而使服务器可以实时地向客户端推送数据。SSE是基于事件的，服务器端通过事件名称将数据传输到客户端，客户端可以通过监听事件来获取数据。

示例代码分析

本文使用的示例代码为基于原生JavaScript实现的在线猫眼电影票房实时刷新。主要分为三个部分：HTML模板、JavaScript脚本和服务器端。下面我们分别来看一下这三个部分。

HTML模板

HTML模板包含一个固定的容器，用于展示电影票房数据。示例代码如下：

<div class="container">
  <h2>猫眼实时票房</h2>
  <ul id="movies"></ul>
</div>

JavaScript脚本

JavaScript脚本主要实现了SSE事件的监听和数据的更新。首先要获取到SSE对象：

var eventSource = new EventSource("/movie");

其中/movie是服务器端的地址，通过该地址建立一个连接并获取到事件源对象。

接下来要监听事件，这里采用DOM Level 2事件模型来监听事件：

eventSource.addEventListener("message", function(event) {
  // 处理数据
}, false);

使用addEventListener方法来监听message事件，这里的event参数包含了服务器端传输下来的数据。

接着就可以在事件处理函数中更新数据了：

var movies = document.getElementById("movies");

var li = document.createElement("li");
li.innerHTML = "电影名称：" + data.name + " 票房总额：" + data.boxOffice + " 万";

movies.appendChild(li);

这里的data是从服务器端传输下来的数据，通过DOM操作在容器中添加新的电影票房数据。

最后要在页面加载完成后建立连接并启动事件监听：

// javascriptcn.com 代码示例
window.onload = function() {
  var eventSource = new EventSource("/movie");

  eventSource.addEventListener("message", function(event) {
    var data = JSON.parse(event.data);

    var movies = document.getElementById("movies");

    var li = document.createElement("li");
    li.innerHTML = "电影名称：" + data.name + " 票房总额：" + data.boxOffice + " 万";

    movies.appendChild(li);
  }, false);
};

服务器端

服务器端使用Node.js来实现SSE事件的传输。首先要创建一个HTTP服务：

var http = require("http");

http.createServer(function(req, res) {
    // 处理请求
}).listen(8000);

接下来要处理请求，这里使用的是ES6中的async/await语法：

// javascriptcn.com 代码示例
async function handleRequest(req, res) {
  // 发送响应头
  res.setHeader("Content-Type", "text/event-stream");
  res.statusCode = 200;
  res.keepAliveTimeout = 0;
  res.flushHeaders();

  // 设置事件id和重试时间
  let id = 0;
  const intervalId = setInterval(() => {
    res.write(": heartbeat\n\n");
  }, 15000);

  // 处理SSE事件
  const movies = ["电影1", "电影2", "电影3", "电影4", "电影5"];

  while (true) {
    const randIndex = Math.floor(Math.random() * movies.length);
    const boxOffice = Math.ceil(Math.random() * 10000);

    const data = {
      id: id++,
      name: movies[randIndex],
      boxOffice: boxOffice,
      timestamp: Date.now()
    };

    const eventData = `id: ${data.id}\n`;
    eventData += `data: ${JSON.stringify(data)}\n\n`;

    res.write(eventData);

    await new Promise(resolve => setTimeout(resolve, 1000));
  }
}

这里定义了一个movies数组，用于随机生成一些电影票房数据。在一个无限循环中，先随机生成一条电影票房数据，然后通过res.write方法向客户端发送数据。

值得注意的是，在SSE协议中需要设置每条数据的事件id和重试时间，这里通过定义一个计数器来实现事件id的自增。视频数据传输过程中，需要定时发送:一定时间长度的字符串，这里我们使用定时器来实现。

最后在HTTP服务的回调函数中调用handleRequest方法即可实现SSE事件的传输。

http.createServer(async function(req, res) {
  await handleRequest(req, res);
}).listen(8000);

总结

本文通过一个在线猫眼电影票房实时刷新示例，介绍了如何使用原生JavaScript和HTML5技术通过SSE实现实时数据传输。值得注意的是，SSE虽然不需要像WebSocket一样建立全双工连接，但仍然需要保持HTTP长连接，因此在实现过程中需要注意控制事件流的速度，避免对网络带宽造成不必要的压力。

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