web开发技巧-SSE

概述

严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。

也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。

SSE对比WebSocket的优点

SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。
SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
SSE 默认支持断线重连，WebSocket 需要自己实现。
SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。
SSE 支持自定义发送的消息类型。

var code = “8b9c5440-6a7a-466b-aa0c-902ed6e4f020”

代码

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',
        '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 () {
        res.write('data: ' + new Date() + '\n\n');
      }, 1000);

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

index.html代码

  <div id="example"></div>
  <script>
    var source = new EventSource('http://127.0.0.1:8844/stream');
    var div = document.getElementById('example');

    source.onopen = function (event) {
      div.innerHTML += '<p>Connection open ...</p>';
    };

    source.onerror = function (event) {
      div.innerHTML += '<p>Connection close.</p>';
    };

    source.addEventListener('connecttime', function (event) {
      div.innerHTML += ('<p>Start time: ' + event.data + '</p>');
    }, false);

    source.onmessage = function (event) {
      div.innerHTML += ('<p>Ping: ' + event.data + '</p>');
    };

  </script>

先执行node server.js在打开界面就可以看到效果了~