这是我参与更文挑战的第 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();
参考文章
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);
};