<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>server-sent-event</title>
</head>
<body>
<div>
<p>server-sent-event 是一种服务器向客户端发送消息的单向通信方式，采用流信息传送数据，类似视频播放，一直保持和客户端的连接，不断地发送数据。</p>
<p>SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。</p>
<p>SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。</p>
<p>SSE 默认支持断线重连，WebSocket 需要自己实现。</p>
<p>SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。</p>
<p>SSE 支持自定义发送的消息类型。</p>
<script>
if(‘EventSource‘ in window){
console.log("支持EventSource");
var es = new EventSource("http://localhost:3009/stream");
es.onopen = function(){
console.log("连接成功");
}
es.onmessage = function(message){ //默认是message事件，
console.log("接收到数据",message);
}
es.onerror = function(err){
console.log("error",err);
}
es.addEventListener("connecttime",function(event){ //监听自定义事件
console.log(‘监听自定义事件‘,event);
},false);
}
</script>
</div>
</body>
</html>
基于node 的服务端代码
var http = require("http");
http.createServer(function(req,res){
console.log(req.url);
var filename = ‘.‘+req.url;
if(filename===‘./stream‘){
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: " + "来自自定义事件的数据\n\n");
res.write("data: " + "自定义事件\n\n");
interval = setInterval(function () { //event 字段未设置的，默认为message事件
res.write("data: " + (new Date()) + "\n\n");
}, 1000);
req.connection.addListener("close", function () {
clearInterval(interval);
}, false);
}
}).listen(3009,"127.0.0.1");
console.log("server start at port 3009");
时间： 2024-10-06 00:10:53