Server-Sent Events (SSE)实现长链接,服务端单向推送
首页 > >    作者:lininn   2021年9月15日 17:44 星期三   热度:21°   百度已收录  
时间:2021-9-15 17:44   热度:21° 

一、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
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn