使用post请求建立长连接实现sse,接收后端主动发来的消息,实现chat-gpt的弹字效果,EventSource的应用

news2024/11/16 11:27:17

每日鸡汤:每个你想要学习的瞬间都是未来的你向自己求救

最近在做一个chat相关的功能,然后由于接口返回特别特别慢,所以需要搞一个慢慢等待的效果,就是接口一个单词一个单词的返回,然后前端收到一个展示一个,提升用户体验。

说实话我是第一次做这类需求,他们给完接口文档我一脸懵?啥?post请求一次,也能实现接收后端主动来发来的消息?就跟websocket一样。

一问才知道原来真可以,真的是每天都能学习到新鲜的知识,使用EventSource即可,就是传说中的sse【server-send-events】

没错,本菜鸟都干了好几年了,还没做过这种需求,我做的比较多的就是前端轮训一个接口用setTimeout 或者setInterval

EventSource - Web API 接口参考 | MDNEventSource 接口是 web 内容与服务器发送事件通信的接口。https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource注意,前端要想能收到后端发来的消息,毫无疑问我们肯定要监听消息!!牢记【监听】在前端开发中的重要性,监听接口返回,监听事件触发等等,认真听才可以让我们收到别人给我们的消息

可以看一下mdn的官方文档用法很简单,但是问题是原生的EventSource 不能使用post方法,只能使用get方法,而且还不能自定义请求header,所以我们可以使用npm包,常用的有

  1. event-source-polyfill  这个可以自定义请求头
  2. @microsoft/fetch-event-source 这个可以使用post请求,也可以自定义请求头功能强大,建议用这个

在开发中遇到了一问题,我按照@microsoft/fetch-event-source的例子写好了代码,怎么都接收不到请求,还以为这个插件有问题,或者我写错了,结果研究半天才发现是后端代码写错了,他根本没有一个一个给我返回,而是等了好长时间所有数据准备完毕才返回,这样导致请求都超时了,自然就收不到数据。

所以如果你也遇到了问题,不妨考虑一下是否是这个原因,这个插件的demo亲测是没有问题的,我用的版本是"@microsoft/fetch-event-source": "^2.0.1",

参考

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

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

相关文章

Nucleo-F411RE (STM32F411)LL库体验 6 - EXTI外部中断的使用

Nucleo-F411RE (STM32F411)LL库体验 6 - EXTI外部中断的使用 1、简述 开发板蓝色按键连接PC13管脚,且断开时为高电平,闭合时低电平。我们将pc13设置为中断模式,低电平触发,当按键按下时,触发中…

Hadoop完全分布式运行环境的搭建

Hadoop完全分布式运行环境的搭建 文章目录 Hadoop完全分布式运行环境的搭建0. 写在前面1. 模板虚拟机环境准备安装模板虚拟机hadoop01虚拟机配置要求如下关闭防火墙,关闭防火墙开机自启创建普通用户配置新用户权限修改所属主和所属组卸载虚拟机自带的JDK重启虚拟机 …

【备战秋招】每日一题:4月23日美团春招第四题:题面+题目思路 + C++/python/js/Go/java带注释

为了更好的阅读体检,为了更好的阅读体检,,可以查看我的算法学习博客第四题-01串的代价 在线评测链接:P1248 题目内容 塔子哥是一个喜欢研究密码的人,他经常在网上寻找各种有趣的密码挑战。他最近发现了一个神秘的网站&#xff…

指定字符串数组中每个元素sn的长度L如果sn长度比L短,则补充空格,且sn居中如果sn长度比L长,则保留sn左侧L个字符

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 指定字符串数组中每个元素sn的长度L 如果sn长度比L短,则补充空格,且sn居中 如果sn长度比L长,则保留sn左侧L个字符 [太阳]选择题 下列代码最后输出的结果是&#xff1f…

基于Java在线购物系统设计实现(源码+lw+部署文档+讲解等)

博主介绍: ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精…

MindFusion.Java Swing Pack 2023.R1 Crack

MindFusion.Java Swing Pack 2023.R1 改进了图表、电子表格和虚拟键盘。 6月 15, 2023 - 16:06 新版本 特征 MindFusion.Diagramming 的新功能 空间索引 - 创建项目位置索引,以便更快地进行命中测试和视口裁剪查询。这极大地提高了包含数…

ch8_1_CPU的结构和功能

1. cpu的结构 1.1CPU 的功能 控制器的功能 控制器的功能具体作用取指令指令控制分析指令操作控制执行指令, 发出各种操作命令控制程序输入与结果的输出时间控制总线管理处理中断处理异常情况和特殊请求数据加工 运算器的功能 实现算术运算 和 逻辑运算&#x…

基于Java多角色学生管理系统设计实现(源码+lw+部署文档+讲解等)

博主介绍: ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精…

基于Java网上服装销售系统设计实现(源码+lw+部署文档+讲解等)

博主介绍: ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精…

【大数据】可视化仪表板 - Superset的安装和使用

写在前面:博主是一只经过实战开发历练后投身培训事业的“小山猪”,昵称取自动画片《狮子王》中的“彭彭”,总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域,如今终有小成…

11-高性能JSON库——fastjson2

目录 1.具体使用 1.1.添加fastjson2依赖 1.2.常用类和方法 1.3.将JSON字符串转换成对象 1.3.1.JSON字符串转换成对象 1.3.2.JSON字符串转换成数组 1.4.将对象转换成JSON字符串 1.4.1.将对象转换成JSON字符串 1.4.2.将数组转换成 JSON 字符串 2.性能测试报告 3.总结 …

浪潮发布G2平台

2017年2月28日下午,浪潮在北京粤财JW万豪酒店以“智变”为主题,发布新一代智能存储平台G2,该平台基于统一架构和In系列智能软件设计,在保障”三高”特性满足企业级关键数据存储、处理需求的同时,更强调数据生命周期的智…

第六章 部署WSUS及RDS服务

❄️作者介绍:奇妙的大歪❄️ 🎀个人名言:但行前路,不负韶华!🎀 🐽个人简介:云计算网络运维专业人员🐽 前言 适用范围:Windows Server 2022、Windows Server…

揭密ChatGPT背后团队鲜为人知的小秘密

ChatGPT引领的人工智能技术浪潮还在持续火爆,可是做出这款产品的OpenAI公司,熬得住多年的冷板凳,最终一飞冲天,他们是怎么做到的呢? 因此,我对这家企业的组织建设产生了浓厚的兴趣。我找啊找,最…

游戏开发日志13(利用PlayerPrefs来存储数据)

为游戏设置一个音量键,可以自由选择背景音乐是否开启,并且保存这个设置。 设计了UI如下: 其中BGM为Toggle,其余四个为Button 在canvas(set)上添加两个脚本:GameMnue,GameManage p…

【备战秋招】每日一题:4月15日美团春招第三题:题面+题目思路 + C++/python/js/Go/java带注释

为了更好的阅读体检,为了更好的阅读体检,,可以查看我的算法学习博客第三题-交通规划 在线评测链接:P1237 题目内容 塔子哥所在的国家有 n 个城市,这 n 个城市排成一列,按顺序编号为 1,2,3,...,n。然而,由…

【备战秋招】每日一题:4月8日美团春招第五题:题面+题目思路 + C++/python/js/Go/java带注释

为了更好的阅读体检,为了更好的阅读体检,,可以查看我的算法学习博客第五题-RGP种树 在线评测链接:P1170 题目描述: 塔子哥是一位著名的冒险家,他经常在各种森林里探险。今天,他来到了道成林,…

【Django 网页Web开发】24. 实战项目:moudleForm的文件上传应用到城市管理(17)(保姆级图文)

目录 用户上传文件存放media如何启用1. 在urls.py中进行配置:2. 在settings.py中进行配置:3. 能够通过media的url访问文件 moudleForm上传文件实现城市管理1. moudle.py2. url.py3. city.py4. city.html5. 文件上传小结6. 城市管理效果总结 欢迎关注 『D…

Vivado远程开发探索

平时主要用轻薄本办公,但是有时候又需要用Vivado做一些开发的工作,就感觉生产力不够。如果能在远程的高性能服务器上跑Vivado综合实现就好了。前段时间用ubuntu下安装的Vivado发现有一个Remote Host的设置。所以就准备折腾一下这个。 WSL WSL的安装看官…

chatgpt赋能python:Python怎么调成黑色背景?

Python怎么调成黑色背景? 随着人们对代码编辑器的要求越来越高,许多开发者都喜欢在黑色背景下编写代码。不仅仅是视觉审美方面考虑,黑色背景对眼睛的伤害也比浅色背景要小得多。本篇文章将介绍如何在Python中调整为黑色背景 介绍 默认情况…