浅谈现代的web实时推送技术

331 阅读2分钟

这是我参与更文挑战的第 8 天,活动详情查看:更文挑战


Server-Sent Event (SSE)

SSE 客户端发送一个请求,建立连接后不会关闭连接。当有新数据时,服务端将消息推送到客户端。

特点

  • 数据流式传输:SSE 发送一个类似音频流和视频流、下载文件的二进制流的数据流。
  • 连接保持:与正常的 HTTP 请求一样。服务端连续不断的发送,客户端不会关闭连接
  • 重连机制:如果连接断开,浏览器会尝试重新连接。
  • 关闭连接:如果连接被关闭,客户端可以被告知使用 HTTP 204 无内容响应代码停止重新连接。

优势

SSE 不是新协议,已有的基础设施无需改造。用任何习惯的后端语言和框架都可以继续使用。

SSE 可以直接使用已有的验证和代理服务。

劣势

只能单向接收数据。

兼容性

IE 原生不支持,任何版本的 IE 都不支持。原因是 IE 的 XMLHttpRequest 对象不支持获取部分的响应内容。

但幸运的是,有一个 EventSource.js polyfill 可以支持到 IE10。

如果完全不支持,请求接口时,将会回退到 GET 请求,只响应一次。

使用方法

在客户端创建一个 EventSource 对象。对象指定接收事件的 URI。

const eventSource = new EventSource(`myexample/sse`)

如果创建对象的脚本和接口不同源,需要指定 options 对象,比如

const eventSource = new EventSource("//otherorigin/sse", { withCredentials: true } );

EventSource 初始化成功后,可以创建对应的监听函数接收服务端消息

eventSource.onmessage = function(event) {
  console.log(event.data);
}

除了对全部信息的监听之外,你还可以监听指定事件类别的消息。事件类别在服务端推送数据时指定。

在客户端就可以

evtSource.addEventListener("ping", function(event) {
  console.log(event.data) //'ping' data
});

如果你不想接收信息,可以关闭数据源:

eventSource.close();

参考文章

SSE

WebSocket

WebSocket 是一种全新的协议,它将 TCP 的 Socket(套接字)应用在了 webpage 上,从而使通信双方建立起一个保持在活动状态连接通道。

特点

  • 需要升级到新协议。协议升级是 HTTP 1.1 提供的内容。但如果你使用现有的库,升级问题不用担心
const webSocket = new WebSocket("ws://destination.server.ext", "optionalProtocol");
  • 全双工。客户端和服务端可以互相传递消息,互相发布订阅消息。

兼容性

IE11 支持。毕竟是新协议,不受历史包袱影响,IE 也支持协议升级。

使用方法

创建连接

// Create WebSocket connection
// 创建一个 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');

通道创建成功事件监听

socket.onopen = function(event) {
  console.log("WebSocket is open now.");
};

错误监听

// Listen for possible errors
// 监听可能发生的错误
socket.addEventListener('error', function (event) {
  console.log('WebSocket error: ', event);
});

消息发送

socket.send("Hello server!");

消息监听

socket.onmessage = function(event) {
  console.debug("WebSocket message received:", event);
};