Server-Sent Events 服务端单向客户端

最新推荐文章于 2024-06-14 11:36:53 发布

前端菜菜

最新推荐文章于 2024-06-14 11:36:53 发布

阅读量82

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/qq_25919495/article/details/131183507

版权

<!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>

  <h4>SSE</h4>

  <button id="btn">建立连接</button>
  <button id="close">关闭连接</button>
  <script>

    let source = null;


    // 连接
    document.querySelector('#btn').onclick = function () {

      source = new EventSource('http://192.168.10.164:8844/stream');

      source.addEventListener('open', function (event) {
        console.log('连接:ok');
      }, false);

      source.addEventListener('message', function (event) {
        var message = event.data;
        console.log('message:' + message);
      }, false);

    };

    // 关闭
    document.querySelector('#close').onclick = function () {
      source.close();
    };


  </script>

</body>

</html>

node服务端

var http = require("http");
var fs = require("fs");

http.createServer(function (req, res) {

  // 获取html
  if (req.url == '/index') {
    fs.readFile(__dirname + "/index.html", (err, data) => {
      if (err) {
        return console.log(err.message);
      }
      res.end(data);
    });
  }

  // 建立连接
  if (req.url === "/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"); // 自定义的事件类型，默认是message事件(浏览器监听)
    res.write(`id: ${Math.random()}\n`); // 浏览器用lastEventId属性读取这个值。一旦断线，浏览器发送一个HTTP头，里面包含一个特殊的Last-Event-ID头信息，将这个值发送回来，用来帮助服务器端重建连接
    res.write("data: 测试1 \n\n"); 
    res.write("data: 测试2 \n\n"); // 发送的数据

    interval = setInterval(function () {
      res.write("data: " + (new Date()) + "\n\n"); 
    }, 1000);

    req.addListener("close", function () {
      clearInterval(interval);
    }, false);


  }

}).listen(8844);