sse简单介绍

sse fetch-event-source插件的使用https://blog.csdn.net/weixin_42400404/article/details/141896061?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22141896061%22%2C%22source%22%3A%22weixin_42400404%22%7D

严格意义上,HTTP协议服务器无法主动发送消息,但是可以转换成发送流信息;

sse就是利用这种机制,使用流信息的方式向浏览器发送信息,基于HTTP协议;

1.区别

sse和websocket很相似,都是建立服务器与浏览器之前的通信渠道,服务器向浏览器推送消息。

websocket更强大,它支持双向推送信息;sse只能单向通信,服务器向浏览器推送流消息,本质上为下载;

2.特点

  • sse是HTTP协议,现有的服务器软件都支持,websocket是独立的协议;

  • sse轻量级,使用简单,websocket协议相对复杂;

  • sse支持断线重连,websocket需要自己处理;

  • sse一般只用来传送文本,二进制数据需要编码后传送,websocket默认支持二进制数据;

  • sse支持自定义发送的消息类型

3.客户端Api

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

检查浏览器是否支持sse(浏览器基本都支持)

javascript 复制代码
if ('EventSource' in window) {
  // ...
}

3.1案例一:

javascript 复制代码
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>');
};
  
// 关闭连接
source.close()

根据EventSource实例上的readyState属性,获取当前的连接状态,只读

  • 相当于常量EventSource.CONNECTING,表示连接还未建立,或者断线正在重连。

  • 相当于常量EventSource.OPEN,表示连接已经建立,可以接受数据。

  • 相当于常量EventSource.CLOSED,表示连接已断,且不会重连。

4.服务器

javascript 复制代码
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

每一次发送的信息,由若干个message组成,每个message之间用\n\n分隔。每个message内部由若干行组成,每一行都是如下格式。

javascript 复制代码
[field]: value\n

前端接收的的message数据是json格式,需要JSON.parse转下

  • data 内容
  • event 事件类型,默认是message,可以使用addEventListener()监听该事件
  • id 数据标识符
  • retry 服务器可以通过该字段,指定浏览器重新发起连接的时间间隔

4.1返回案例

javascript 复制代码
{
    "data": "{\"msg\":helloworld哈哈哈哈哈}",
    "event": "message",
    "id": ""
    "retry":""
}

导致浏览器重新发起请求的原因

  • 时间间隔到期

  • 网络错误

参考文件:

仅供参考

相关推荐
庸俗今天不摸鱼29 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下36 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring