随着互联网技术的不断发展，越来越多的网站开始使用实时数据展示，其中电影票房数据的实时更新也是很多网站都关注的一个问题。本文将介绍如何使用原生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操作在容器中添加新的电影票房数据。
最后要在页面加载完成后建立连接并启动事件监听：
-- -------------------- ---- -------
------------- - ---------- -
--- ----------- - --- ----------------------
--------------------------------------- --------------- -
--- ---- - -----------------------
--- ------ - ----------------------------------
--- -- - -----------------------------
------------ - ------- - --------- - - ------ - -------------- - - ---
-----------------------
-- -------
--服务器端
服务器端使用Node.js来实现SSE事件的传输。首先要创建一个HTTP服务：
var http = require("http");
http.createServer(function(req, res) {
// 处理请求
}).listen(8000);接下来要处理请求，这里使用的是ES6中的async/await语法：
-- -------------------- ---- -------
----- -------- ------------------ ---- -
-- -----
----------------------------- ---------------------
-------------- - ----
-------------------- - --
-------------------
-- -----------
--- -- - --
----- ---------- - -------------- -- -
------------ ----------------
-- -------
-- -------
----- ------ - ------- ------ ------ ------ -------
----- ------ -
----- --------- - ------------------------ - ---------------
----- --------- - ----------------------- - -------
----- ---- - -
--- -----
----- ------------------
---------- ----------
---------- ----------
--
----- --------- - ---- --------------
--------- -- ------ -----------------------------
---------------------
----- --- --------------- -- ------------------- -------
-
-这里定义了一个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