sse简单介绍

news2024/11/13 9:33:40

sse fetch-event-source插件的使用icon-default.png?t=N7T8https://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(浏览器基本都支持)

if ('EventSource' in window) {
  // ...
}

3.1案例一:

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.服务器

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

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

[field]: value\n

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

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

4.1返回案例

{
    "data": "{\"msg\":helloworld哈哈哈哈哈}",
    "event": "message",
    "id": ""
    "retry":""
}

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

  • 时间间隔到期

  • 网络错误

参考文件:

  • 阮一峰:Server-Sent Events 教程

  • fetch-event-source gitHub地址

  • window:fetch()方法

  • EventSource() api

仅供参考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2118238.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【漏洞复现】泛微OA E-Cology XmlRpcServlet 任意文件读取漏洞

免责声明&#xff1a; 本文内容旨在提供有关特定漏洞或安全漏洞的信息&#xff0c;以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步&#xff0c;并非出于任何恶意目的。阅读者应该明白&#xff0c;在利用本文提到的漏洞信息或进行相关测…

使用docker打包项目的流程(小白可懂)

&#x1f389; 前言 这并不完全是一个正经的教程&#xff0c;而是根据我的学习经验总结出来的一个模版&#xff0c;大家可以尝试一下&#xff0c;权当了解一下项目打包的流程。 &#x1f389; 克隆演示项目 我在我的GitHub仓库里已经上传了演示项目&#xff0c;大家可以使用…

回归预测 | MATLAB实现PSO-LSTM(粒子群优化长短期记忆神经网络)多输入单输出

回归预测 | MATLAB实现PSO-LSTM(粒子群优化长短期记忆神经网络)多输入单输出 目录 回归预测 | MATLAB实现PSO-LSTM(粒子群优化长短期记忆神经网络)多输入单输出预测效果基本介绍模型介绍PSO模型LSTM模型PSO-LSTM模型程序设计参考资料致谢预测效果 Matlab实现PSO-LSTM多变量回归…

【C++高阶】C++类型转换全攻略:深入理解并高效应用

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C 智能指针 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀C的类型转换 &#x1f4d2;1. C语言…

Qt多语言/多语种详细开发教程

Qt作为跨平台的开发工具&#xff0c;早已应用到各行各业的软件开发中。 今天讲讲&#xff0c;Qt开发的正序怎么做多语言开发。就是说&#xff0c;你设置中文&#xff0c;就中文显示&#xff1b;设置英语就英文显示&#xff0c;设置繁体就繁体显示&#xff0c;设置发育就显示法语…

【Python知识宝库】使用Python进行网络请求:requests库入门

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 前言一、requests库简介二、安装requests库三、发送GET请求四、发送POST请求五、处理响应内容1. 获取状态码2. 获取文…

使用 Python Guardrails 提高 LLM 输出的可靠性

利用验证函数防止您的 LLM 输出崩溃 合理使用IF可以使您的LLM输出更可靠 虽然在创造力和解决复杂任务方面表现出色&#xff0c;但LLM往往难以遵循严格的规则&#xff0c;并且经常提供略微超出设定边界的答案。在构建应用程序时&#xff0c;这一缺陷可能导致失败和荒谬的答案&a…

智能巡检机器人助力新型信息基础设施建设与发展

为深入贯彻落实党的二十大和二十届二中、三中全会精神&#xff0c;推动新型信息基础设施协调发展&#xff0c;近日&#xff0c;工业和信息化部等十一部门关于推动新型信息基础设施协调发展有关事项。 新型信息基础设施是以信息网络为基础&#xff0c;以新一代信息通信技术创新为…

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时&#xff0c;您应该注意以下几个关键点&#xff1a; 平衡精度 平衡精度是衡量平衡机性能的核心指标&#xff0c;直接影响到不平衡量的检测与校准的准确性&#xff0c;从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声&#xff0c;提高磨…

大数据-126 - Flink State 03篇 状态原理和原理剖析:状态存储 Part1

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来&#xff0c;一站式有声阅读平台听书系统 &#x1f31f; 开篇&#xff1a;遇见未来&#xff0c;从“智听”开始 在这个快节奏的时代&#xff0c;你是否渴望在忙碌的间隙&#xff0c;找到一片属于自己的宁静角落&#xff1f;是否梦想着能随时随地&#xff0c;沉浸在知…

海外盲盒系统开发搭建,助力盲盒出海!

随着盲盒全球化发展&#xff0c;盲盒出口海外已经成为了大多数盲盒企业的选择。在互联网时代中&#xff0c;盲盒出口主要通过跨境电商和独立海外盲盒系统。而在目前市场发展趋势中&#xff0c;对于企业来说&#xff0c;一个独立的盲盒系统至关重要。海外盲盒APP可以帮助盲盒企业…

【ACM出版-高录用EI稳检索!九大高校联合举办】2024年人工智能、数字媒体技术与交互设计国际学术会议(ICADI2024)

​【ACM出版&#xff0c;EI稳定检索&#xff0c;九大高校联合举办, IEEE Fellow支持】 2024年人工智能、数字媒体技术与交互设计国际学术会议&#xff08;ICADI2024&#xff09; 2024 International Conference on artificial intelligence, digital media technology and …

期权开户攻略:期权开户主要的流程是什么?

今天期权懂带你了解期权开户攻略&#xff1a;期权开户主要的流程是什么&#xff1f;交易期权可以为投资者提供多种灵活性和机会&#xff0c;但同时也伴随风险。因此&#xff0c;了解期权的基本概念和策略&#xff0c;结合自身的风险承受能力&#xff0c;才能更好地进行投资决策…

解决el-date-picker切换类型type时错位

vue代码如下 样式效果如下 切换日期类型时&#xff0c;立马点日期会出现错位&#xff0c;检查发现是日期的展开面板并没有插入到body中导致的错位 解决方法 给el-date-picker加上唯一key值就可以

智慧园区,为园区多场景提供智能化赋能

智慧园区解决方案旨在通过现代信息技术手段&#xff0c;为园区空间多场景提供智能化赋能&#xff0c;以提升园区的运营效率、管理水平和服务质量。以下是对智慧园区解决方案的详细阐述&#xff1a; 一、智慧园区解决方案的核心目标 智慧园区解决方案的核心目标是实现园区的“…

ruoyi若伊项目(vue前后端分离)下载搭建

介绍 &#x1f4a1; RuoYi-Vue ​ RuoYi-Vue 是一款开源的后台管理系统&#xff0c;是一个 Java EE 企业级快速开发平台&#xff0c;基于经典技术组合&#xff08;Spring Boot、Spring Security、MyBatis、Jwt、Vue&#xff09;&#xff0c;内置模块如&#xff1a;部门管理、…

Gemma 2大模型的训练范式解析

咱们聊聊大型语言模型&#xff08;LLMs&#xff09;的训练范式吧&#xff0c;这可是个大话题。从最早的GPT模型到现在的复杂开放权重LLMs&#xff0c;这一路走来&#xff0c;变化可真不少。记得最开始&#xff0c;LLMs的训练就只关注预训练&#xff0c;但现在&#xff0c;这事儿…

C++设计模式——Strategy策略模式

一&#xff0c;策略模式简介 策略模式是一种行为型设计模式&#xff0c;策略模式在软件开发场景中定义了一系列的算法&#xff0c;并将每个算法单独封装在可替换的对象中&#xff0c;使应用程序在运行时可以根据具体的上下文来动态地选择和切换算法&#xff0c;同时保持原有的…

【运维监控】influxdb 2.0+grafana 监控java 虚拟机以及方法耗时情况(2)

关于java应用的监控本系列有文章如下&#xff1a; 【运维监控】influxdb 2.0telegraf 监控tomcat 8.5运行情况 【运维监控】influxdb 2.0grafana 监控java 虚拟机以及方法耗时情况 【运维监控】Prometheusgrafana监控tomcat运行情况 【运维监控】Prometheusgrafana监控spring b…