SSE：服务器发送事件

最新推荐文章于 2024-03-27 09:25:37 发布

来小新

最新推荐文章于 2024-03-27 09:25:37 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签：事件监听

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

详情查看

SSE：服务器发送事件

概述

传统的网页都是浏览器向服务器“查询”数据，但是很多场合，最有效的方式是服务器向浏览器“发送”数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个“通知”，这要比浏览器按时向服务器查询（polling）更有效率。

node代码 `server.js`

var http = require("http");

http.createServer(function (req, res) {

  var fileName = "." + req.url;

  if (fileName === "./stream") {
    res.writeHead(200, {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      "Connection": "keep-alive"
    });
    res.write("retry: 10000\n");
    res.write("event: connecttime\n");
    res.write("data: " + (new Date().toISOString()) + "\n\n");
    res.write("data: " + (new Date().toISOString()) + "\n\n");

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

    req.connection.addListener("close", function () {
      clearInterval(interval);
    }, false);
  }
}).listen(80, "127.0.0.1");

html代码 `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SSE</title>
</head>
<body>
<div id="result"></div>
<script>
  if (!!window.EventSource) {
    var source = new EventSource('http://127.0.0.1/stream');
    source.addEventListener('open', open);
    source.addEventListener('connecttime', connecttime); // 监听自定义事件
    source.addEventListener('message', message); // 监听默认事件
    source.addEventListener('error', error);

    function open() {
      console.log('SSE open', '连接已建立');
    }

    function message(event) {
      console.log('SSE message', event.data);
    }

    // 自定义事件
    function connecttime(event) {
      console.log('SSE connecttime', event.data);
    }

    function error(ev) {
      console.log('SSE error', '错误了');
    }
  }
</script>
</body>
</html>

结果

来小新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SSE：服务器发送事件

详情查看SSE：服务器发送事件概述传统的网页都是浏览器向服务器“查询”数据，但是很多场合，最有效的方式是服务器向浏览器“发送”数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个“通知”，这要比浏览器按时向服务器查询（polling）更有效率。node代码 server.jsvar http = require("http");http.createServer(function (r
复制链接

扫一扫