Server-Sent Events (SSE)实现长链接，服务端单向推送
一、SSE 的本质
严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。
也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。
SSE 就是利用这种机制，使用流信息向浏览器推送信息。它基于 HTTP 协议，目前除了 IE/Edge，其他浏览器都支持。
SSE 也有自己的优点。
- SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。
- SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
- SSE 默认支持断线重连，WebSocket 需要自己实现。
- SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。
- SSE 支持自定义发送的消息类型。
客户端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
我是接收的
<div id="app"></div>
</body>
</html>
<script>
var app = document.getElementById("app");
var url = "http://127.0.0.1:3000/stream";
var source = new EventSource(url, { withCredentials: true });
source.addEventListener(
"open",
function (event) {
// ...
console.log("open", event);
},
false
);
source.addEventListener(
"message",
function (event) {
var data = event.data;
console.log("[ data ]", data);
// handle message
var divContainer = document.createElement("div");
var pText = document.createTextNode(data);
divContainer.appendChild(pText);
app.appendChild(divContainer);
},
false
);
</script>
服务端：
var express = require("express"); var app = express(); app.use(express.static("./")); app.get("/stream", function (req, res) { var val = 1; console.log("[ req ]", req); res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", "Access-Control-Allow-Origin": "*", }); res.write("retry: 10000\n"); //设置断线重连时间 res.write("event: connecttime\n"); res.write("data: " + new Date() + "\n\n"); // res.write("data: " + new Date() + "\n\n"); interval = setInterval(function () { val++; res.write("data: " + val + "-----" + new Date().getTime() + "\n\n"); }, 1000); req.connection.addListener( "close", function () { clearInterval(interval); }, false ); }); var server = app.listen(3000, function () { console.log("Example app listening on port 3000!"); });
本文作者：lininn
文章标题： Server-Sent Events (SSE)实现长链接，服务端单向推送
本文地址：?post=531
版权声明：若无注明，本文皆为“覆手为雨”原创，转载请保留文章出处。
本文地址：?post=531
版权声明：若无注明，本文皆为“覆手为雨”原创，转载请保留文章出处。
相关文章
