双向通信之SSE

双向通信之SSE

技术杂谈小彩虹2021-07-18 5:22:0670A+A-

简介

基于 HTTP 协议,一个客户端去从服务器端订阅一条流,之后服务端可以发送消息给客户端直到服务端或者客户端关闭该“流”

特点

  • 建立浏览器与服务器之间的通信渠道,然后服务器向浏览器推送信息
  • SSE 是单向通道,只能服务器向浏览器发送,因为流信息本质上就是下载
  • 使用 HTTP 协议,现有的服务器软件都支持。WebSocket 是一个独立协议。
  • 属于轻量级,使用简单,兼容性良好

客户端

let eventSource = new EventSource('/clock'); // url可以同域,也可以跨域
let clock = document.querySelector("#clock");
// 连接打开
source.onopen = function (event) {
  // ...
};
// 监听服务器返回的消息
eventSource.onmessage = (e) => {
    let message = e.data;
    clock.innerHTML = message;

}
// 监听连接请求失败
eventSource.onerror  = function(err){
    console.log(err);
}
// 关连接
eventSource.close();
// 监听自定义事件
eventSource.addEventListener('foo', function (e) {
  var data = e.data;
  
}, false);

服务器端

  • 事件流对应MIME格式为text/event-stream,而且其基于HTTP长连接。针对HTTP1.1规范默认采用长连接,针对HTTP1.0的服务器需要特殊设置。
  • event-source必须编码成utf-8的格式
  • 每一次发送的信息,由若干个message组成,每个message之间用\n\n分隔。每个message内部由若干字段组成,每一字段都是如下格式。
[field]: value\n

field需要使用下面4个规范定义好的字段:

Event: 自定义事件类型
Data: 发送的数据
ID: 每一条事件流的ID
Retry: 告知浏览器在所有的连接丢失之后重新开启新的连接等待的时间,在自动重新连接的过程中,之前收到的最后一个事件流ID会被发送到服务端

使用例子:

app.get('/clock', (req, res) => {
    res.header('Content-Type', 'text/event-stream'); // 特定
    let timer = setInterval(() => {
        res.write(`id:${counter++}\nevent:message\ndata:${new Date().toLocaleDateString()}\n\n`);
    }, 1000);
    res.on('close', () => {
        clearInterval(timer);
    })
});

ssestream pass through 一种转换流

app.get('/clock', (req, res) => {
    const sseStream = new SseStream(req);
    sseStream.pipe(res);
    const pusher = setInterval(() => {
        sseStream.write({
            id: counter++,
            event: 'message',
            retry: 20000, // 告诉客户端,如果断开连接后,20秒后再重试连接
            data: new Date().toLocaleDateString()
        });
    }, 1000); 
    res.on('close', () => {
      clearInterval(pusher);
      sseStream.unpipe(res);
    })
    
});

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们