HTML5——Server-Sent Events：基于Node.js的动态图形报表

最新推荐文章于 2025-11-23 04:23:25 发布

原创

最新推荐文章于 2025-11-23 04:23:25 发布 · 616 阅读

Day11

今日份内容：使用Server-Sent Events制作基于Node.js的动态图形报表

Node.js是一种基于事件驱动、非阻塞时I/O模型，具有轻量、高效的特点，目前广泛得到Web前端开发的使用。在使用Node.js前，需要去官网下载安装包，过程比较简单，网上也有非常多的教程，这里就不多说啦。

Server-Sent Events

了解Server-Sent Events消息推送机制
熟悉MessageEvent、EventSource接口
通过服务端向客户端推送消息
在客户端使用SSE技术接收数据
使用jQuery自定义图形插件

内容

配置Node.js环境
项目初始化
安装Express框架
创建服务端路由文件
客户端实现

代码

// 该文件作为服务端的路由文件,在该文件中完成服务端路由功能
var express = require('express');
var app = express();
//配置静态资源的访问方式
app.use(express.static('public'));
app.get('/', function(req, res) {
   
   
	res.type('text/html');
	//推荐使用sendFile（),该方法需要使用文件的绝对路径
	res.sendFile(__dirname + '/public/chartReport.html');
});

var clientId = 0;
var clients = {
   
   };
//记录用户连接请求
app.get('/events/', function(req, res) {
   
   
	req.socket.setTimeout(Number.MAX_VALUE);
	res.writeHead(200, {
   
   
		'Content-type': 'text/event-stream',
		'Cache-Control': 'no-cache',
		'Connection': 'keep-alive'
	});
	res.write('\n');
	(function(clientId) {
   
   
		//将连接保存到集合中
		clients[clientId] = res;
		//当连接关闭后，从连接集合中移除
		req.on("close", function() {
   
   
			delete clients[clientId]
		});
	})(++clientId);
});
//对所有客户端发送数据
setInterval(function() {
   
   
	for (clientId in clients) {
   
   
		clients[clientId].write('data:' + createRandomData() + '\n\n');
	};
}, 500);
//生成随机数据，并以JSON字符串形式返回
function createRandomData() {
   
   
	let drawData = [];
	let items = ['女装', '男装', '童装', '运动', '内衣'];
	for (let i = 0; i < 5; i++) {
   
   
		let random = parseInt(Math.random() * 100);
		let item = {
   
   
			'name': items[i],
			'amount': random
		};
		drawData.push(item);
	}
	return JSON.stringify({
   
   
		'drawData': drawData
	});
}
app.listen(process.env.PORT || 3000);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图形报表统计</title>
		<script type="text/javascript" src="js/jquery-1.x.js"></script>
		<script src="js/jquert.chart.js