JS 实时通信—Server Sent Event

_sugar_
192 阅读10分钟

传统 web 的通信原理

浏览器从诞生开始一直走的是客户端请求服务器，服务器返回结果的模式，即使发展至今仍然没有任何改变。所以可以肯定的是，要想实现两个客户端的通信，必然要通过服务器进行信息的转发。例如A要和B通信，则应该是A先把信息发送给IM应用服务器，服务器根据A信息中携带的接收者将它再转发给B，同样B到A也是这种模式

web 实时通信方式

传统实时通信技术

  1. Ajax 短轮询

常见的一种方式，创建一个定时器隔一段时间请求一次服务器，获取最近的数据并更新页面。优点：实现简单，缺点：对服务器压力较大，浪费流量带宽

  1. comet 技术-“服务器推”

基于 HTTP 长连接的“服务器推”技术

  • 基于 Ajax 的长轮询

在短轮询中，每一次请求，服务器不管数据是否更新都会返回给客户端内容，然后关闭连接。当数据未改变时就会浪费多次请求，于是出现了长轮询

这种方式是客户端发送一个请求到服务器，服务器查看客户端请求的数据是否发生了变化（是否有最新数据），如果发生变化则立即响应返回，否则保持这个连接并定期检查最新数据（服务器端阻塞请求），直到发生了数据更新或连接超时。同时客户端连接一旦成功接收到数据之后，立刻发出请求，这样在相同时间内大大减少了客户端请求服务器的次数。

  • 基于 Iframe 及 htmlfile 的流（streaming）方式

iframe 是很早就存在的一种 HTML 标记， 通过在 HTML 页面里嵌入一个隐蔵帧，然后将这个隐蔵帧的 SRC 属性设为对一个长连接的请求，服务器端就能源源不断地往客户端输入数据。与 Ajax 长轮询返回 javascript 可以直接调用读取的数据不同，iframe 服务器端并不返回直接显示在页面的数据，而是返回对客户端 Javascript 函数的调用，如“”。服务器端将返回的数据作为客户端 JavaScript 函数的参数传递；客户端浏览器的 Javascript 引擎在收到服务器返回的 JavaScript 调用时就会去执行代码-有安全风险。

使用 iframe 请求一个长连接有一个很明显的不足之处：IE、Morzilla Firefox 下端的进度栏都会显示加载没有完成，而且 IE 上方的图标会不停的转动，表示加载正在进行。Google 的天才们使用一个称为“htmlfile”的 ActiveX 解决了在 IE 中的加载显示问题，并将这种方法用到了 gmail+gtalk 产品中

参考链接：

www.52im.net/thread-338-…

www.52im.net/thread-334-…

HTML5 标准发布之后

WebSocket

HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。在创建WebSocket 连接时，客户端通过HTTP请求与 WebSocket服务端协商升级协议。协议升级完成后，后续的数据交换则遵照 WebSocket的协议。

单工：数据只能从一方传输给另一方，单向通信，例如听广播

半双工：双向通信，双方都可以发送数据和接收数据，单同一时间，数据只能有一个流向

全双工：双向通信，允许数据同时在两个方向上传输，客户端和服务器可以同时给对方发送消息

WebSocket 的全双工通讯特性使之成为复杂双向实时通信的首选方案，但技术规范相对复杂，也有浏览器兼容性问题。可以基于现有的开源框架 Socket.io 进行开发

客户端API
// 创建客户端的WebSocket对象
const ws = new Socket("ws://localhost:8000");
ws.addEventListener("open", ()=>{console.log('websocket open')}, false);
ws.addEventListener("close", ()=>{console.log('websocket close')}, false);
ws.addEventListener("error", ()=>{console.log('websocket error')}, false);
ws.addEventListener("message", ()=>{console.log('websocket receive messgae')}, false);
ws.send('send to server')
ws.close(1000,'正常关闭')
服务端API
const ws = require("ws");
// 在8000端口开启WebSocket Server
const wsServer = new ws.Server({ port: 8000 });
// 监听客户端连接,连接之后就可以开始主动推送信息到客户端
wsServer.on("connection", (ws)={
  console.log('connect one client')
  // 一些操作之后关闭当前连接
  ws.close(1000,'正常关闭')
});
wsServer.on("message", ()=>{console.log('receive message from client')});
// 广播收到的消息给每个客户端
wsServer.clients.forEach(function (client) {
  // 这里发送给前端消息
  client.send(‘send to client message’);
});

参考资料：WebSocket 从入门到精通、websocket 教程

SSE

SSE-Server Sent Event 服务器推送事件，是 HTML5 规范中的一个组成部分，基于HTTP协议，主要用来从服务端实时推送数据到浏览器端，相对于上面提到的通信技术，SSE的使用更加简单，对服务端的改动也最小，对于现在火爆的AI应用，主要由服务器分析计算问题，推送计算结果，客户端只需要接受数据，SSE是第一选择

SSE 概念及特点

SSE 是基于 HTTP 协议的服务器推送事件，严格来说，HTTP 协议无法做到服务器主动推送消息，但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流。SSE 就是利用这种机制，使用流信息向浏览器推送信息。

特点

  1. 单向通道，建立的通信渠道，只能是服务器向浏览器发送，因为流信息本质上就是下载。如果浏览器向服务器发送信息，就变成了另一次 HTTP 请求。
  2. 使用简单，后端返回 content-type:text/event-stream 类型的数据即可，text/event-stream 将消息视为一系列流事件
  3. 事件流是一个简单的文本数据流，文本应该使用 UTF-8 格式的编码。事件流中的消息由一对换行符分开。以冒号开头的行，为注释行，会被忽略。
  4. 默认支持断开重连机制

事件流中的字段

event：标识自定义事件类型的字符串。如果指定了这个字符串，浏览器会将具有指定事件名称的事件分派给相应的监听器；网站源代码应该使用 addEventListener() 来监听指定的事件。如果一个消息没有指定事件名称，那么 onmessage 处理程序就会被调用。

data：消息的数据字段。当 EventSource 接收到多个以 data: 开头的连续行时，会将它们连接起来，在它们之间插入一个换行符。末尾的换行符会被删除。

id：事件 ID，会成为当前 EventSource 对象的内部属性“最后一个事件 ID”的属性值。

retry：重新连接的时间。如果与服务器的连接丢失，浏览器将等待指定的时间，然后尝试重新连接。这必须是一个整数，以毫秒为单位指定重新连接的时间。如果指定了一个非整数值，该字段将被忽略。

所有其他的字段名都会被忽略。

客户端实现 SSE

SSE 的客户端 API 部署在 EventSource 对象上

浏览器原生对象 EventSource

EventSource 实例默认包含一个函数：close()，三个事件：open、message、error

// 生成一个EventSource实例，并向服务器发起链接，当跨域时，配置第二参数 withCredentials 控制是否发送 cookie
const evtSource = new EventSource(url,{withCredentials: true});

// 当链接创建时触发 open 事件，也可以使用 addEventListener("open",()=>{}) 监听事件，其他事件同理
evtSource.onopen=(event)=>{console.log(event)}

// 当服务器返回数据未指定 event 时，默认监听 message 事件，当浏览器收到服务器的数据时触发 message 事件
evtSource.onmessage=(event)=>{console.log(event)}

// 自定义事件，当服务器返回数据指定 event 时，监听对应事件
// event: change
evtSource.onchange=(event)=>{console.log(event)}

// 当通信发生错误时，触发 error 事件（例如网络超时，连接中断）
evtSource.onerror=(event)=>{console.log(event)}

// 浏览器主动关闭连接
evtSource.close()

@microsoft/fetch-event-source

浏览器 EventSource 构造函数在创建一次 SSE 的时侯，只接受两个参数：一个 URL 和一个包含 withCredentials 的对象，默认只能发起 get 请求，请求参数只能拼接到 url 后面，不能像 axios 及 fetch 那样添加额外的请求数据及 header。借助 @microsoft/fetch-event-source 这个库就可以像发起fetch请求一样发起服务器单向通信请求

一个例子：

import { fetchEventSource } from '@microsoft/fetch-event-source';

// 创建AbortController实例，以便中止请求
const ctrl = new AbortController() 
// 创建一次 SSE 连接，可以传入 Fetch Api 支持的所有参数（与 Fetch　的使用方式相同）
await fetchEventSource('/path/to/sse', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
        foo: 'bar'
    }),
  // 取消visibilityChange事件，当页面不可见时保持连接（不断开）
  openWhenHidden: true, 
  // AbortSignal 终端标志
  signal: ctrl.signal, 
  onopen(response){console.log('Connection opened!', response)}，
  onmessage(event) {
    const data = JSON.parse(ev.data)
    console.log('Received message:', event.data)
  },
  onclose() {console.log('Connection closed!')},
  onerror(err) {
    ctrl.abort()
    // 直接抛出错误，避免反复调用
    throw err 
  }
})

兼容常见的浏览器（Chrome, Firefox, Safari, Edge），但如果需要兼容更旧的edge浏览去，需要添加　fast-text-encoding　polyfill

参考文档：

源码阅读之fetch-event-source

@microsoft/fetch-event-source npm

fetchEventSource使用+源码解析

服务器实现 SSE

基于 http 协议，发送的数据必须是 UTF-8 编码的文本，具有如下 http 头信息

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

每一次发送的信息，由若干个message组成，每个message之间用\n\n分隔。每个message内部由若干行组成用 \n 分隔，每一行格式为：[data | event | id | retry]: value\n。:value 表示注释

  • data：数据内容
  • event：表示自定义的事件类型，默认是message事件。也可以指定其他事件名字，指定之后浏览器监听对应事件即可
  • id：数据标识符，相当于每一条数据的编号。浏览器用lastEventId属性读取这个值。一旦连接断线，浏览器会发送一个 HTTP 头，里面包含一个特殊的Last-Event-ID头信息，将这个值发送回来，用来帮助服务器端重建连接。因此，这个头信息可以被视为一种同步机制。
  • retry：指定浏览器重新发起连接的时间间隔，两种情况会导致浏览器重新发起连接：一种是时间间隔到期，二是由于网络错误等原因，导致连接出错。

举个例子：

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 () {
      // 默认 message 事件
      res.write("data: " + (new Date()) + "\n\n");
    }, 2000);

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

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>SSE Test</title>
</head>
<body>
<div id="example"></div>
<button id="closeBtn">关闭 SSE 连接</button>
<script>
  var source = new EventSource('http://127.0.0.1:8844/stream');
  var div = document.getElementById('example');
  const oCloseBtn = document.querySelector("#closeBtn");
  // 点击主动关闭 sse 连接
  oCloseBtn.addEventListener("click", ()=>{
    source.close()
  }, false);
  
  source.onopen = function (event) {
    div.innerHTML += '<p>Connection open ...</p>';
  };
  
  source.onerror = function (event) {
    div.innerHTML += '<p>Connection close.</p>';
  };
  // 自定义 connecttime 事件
  source.addEventListener('connecttime', function (event) {
    div.innerHTML += ('<p>Start time: ' + event.data + '</p>');
  }, false);
  // 默认 message 事件
  source.onmessage = function (event) {
    div.innerHTML += ('<p>Ping: ' + event.data + '</p>');
  };
  
</script>
</body>
</html>
avatar
文章
阅读
粉丝