在 web 应用中，有一种常见的场景是需要向客户端推送实时信息，比如股票行情、货币汇率等。对于这种实时信息推送需求，我们可以使用 Server-sent Events(SSE) 技术来实现。
在本文中，我们将通过一个实际的案例来介绍 SSE 技术的应用。我们将编写一个实时股票行情推送的示例程序，通过该程序，用户可以实时地查看股票的最新价格、涨跌幅等信息。
Server-sent Events(SSE) 简介
SSE 是一种将服务器推送数据到客户端的技术。与 WebSockets 不同的是，SSE 不需要建立全双工通信通道，而是采用单向通信，将服务器端的事件推送到客户端。SSE 采用基于 HTTP 的长连接，客户端通过发起一个 HTTP 请求，服务器端保持连接不断开，并在有新数据时将数据通过该连接推送给客户端。
使用 SSE 技术，我们无需考虑网络传输、浏览器兼容性等问题，可以轻松地实现实时信息的推送。
实现实时股票行情推送
前端代码实现
首先，我们需要在前端页面中创建一个 EventSource 对象，用于接收服务器端推送的事件。代码如下：
var eventSource = new EventSource("http://localhost:8080/stock");上述代码创建了一个 EventSource 对象，用于接收服务器端推送的事件，URL 参数指定了服务器端推送的地址为 http://localhost:8080/stock。
接下来，我们需要在该对象上绑定事件处理程序，将接收到的事件内容渲染到前端页面中。代码如下：
eventSource.onmessage = function(event) {
var data = JSON.parse(event.data);
render(data);
}上述代码对 EventSource 对象绑定了 onmessage 事件，当服务器端推送消息时，该事件被触发，我们解析消息内容并调用渲染函数 render() 来更新页面。
后端代码实现
为了模拟股票行情数据的推送，我们编写了一个 Node.js 服务器程序，通过 Express 框架来实现 SSE 推送功能。代码如下：
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/stock', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(function() {
var data = generateStockData();
res.write('data: ' + JSON.stringify(data) + '\n\n');
}, 2000);
});
function generateStockData() {
var price = Math.random() * 1000;
var change = Math.random() * 10 - 5;
var percentChange = (change / price) * 100;
return {
symbol: 'AAPL',
price: price.toFixed(2),
change: change.toFixed(2),
percentChange: percentChange.toFixed(2) + '%'
};
}
app.listen(8080, function() {
console.log('Server running at http://localhost:8080');
});上述代码中，我们创建了一个 Express 应用程序，当客户端发起 /stock 的 HTTP 请求时，返回一个数据流，用于向客户端推送实时股票行情数据。通过 setInterval 函数，我们每两秒钟向客户端推送一次数据，利用 Math.random() 来生成随机的股票行情数据。
要注意的是，返回的数据流需要指定 Content-Type 为 text/event-stream，以及 Connection 为 keep-alive，这样浏览器才会保持长连接并持续接收推送消息。
总结
本文介绍了 SSE 技术的应用实例，通过实现一个实时股票行情推送的示例程序，展示了 SSE 在实际应用中的优秀表现。本文希望能够为 Web 开发者提供一定的参考和指导，帮助大家更好地实现实时信息推送的功能。
示例代码
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时股票行情</title>
</head>
<body>
<ul id="list"></ul>
<script>
var eventSource = new EventSource("http://localhost:8080/stock");
eventSource.onmessage = function(event) {
var data = JSON.parse(event.data);
render(data);
};
function render(data) {
var li = document.createElement('li');
li.innerHTML = data.symbol + ': ' + data.price + ' (' + data.change + ', ' + data.percentChange + ')';
document.getElementById('list').appendChild(li);
}
</script>
</body>
</html>后端代码：
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/stock', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(function() {
var data = generateStockData();
res.write('data: ' + JSON.stringify(data) + '\n\n');
}, 2000);
});
function generateStockData() {
var price = Math.random() * 1000;
var change = Math.random() * 10 - 5;
var percentChange = (change / price) * 100;
return {
symbol: 'AAPL',
price: price.toFixed(2),
change: change.toFixed(2),
percentChange: percentChange.toFixed(2) + '%'
};
}
app.listen(8080, function() {
console.log('Server running at http://localhost:8080');
});来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659d90f8add4f0e0ff6d008a