• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

    HTML5 服务器发送事件(Server-Sent Events)使用详解

    发布者: Error | 发布时间: 2025-6-14 15:10| 查看数: 153| 评论数: 0|帖子模式

    正文:

            HTML5服务器发送事件(server-sent event)允许网页获得来自服务器的更新
            EventSource是单向通信的(是服务器向客户端的单向通信,客户端接收来自服务器的事件流)、基于HTTP协议(EventSource是基于标准的HTTP/HTTPS协议),使用长轮询或类似的机制,但并不是完全双向的通信、文本数据传输(通常用于传输文本数据,如服务器推送的消息或事件)、自动重连(当连接中断,EventSource会自动尝试重新连接,不需要手动处理重连)。
    使用场景:

    适合需要从服务器获取实时信息的应用,例如股票行情或新闻推送。
    使用方式:

      1、直接使用浏览器自带EventSource,缺点:不可以自定义参数且只能get方式请求,无法向服务端传递请求参数,比如请求头中携带token
    1. if (window.hasOwnProperty("EventSource")) {
    2.     // url 接口
    3.     let source = new EventSource(
    4.       "https://api.baichuan-ai.com/v1/chat/completions"
    5.     );
    6.     // 当发生错误
    7.     source.onerror = function () {
    8.       console.log("error");
    9.     };
    10.     // 当通往服务器的连接被打开
    11.     source.onopen = function () {
    12.       console.log("连接成功");
    13.     };
    14.     // 当接收到消息
    15.     source.onmessage = function (event) {
    16.       console.log("服务器推送数据", event.data);
    17.     };
    18.   }
    复制代码
    2、使用 EventSourcePolyfill ,解决使用EventSource无法在header中传参,缺点:只能get请求且无法向服务端传递请求参数
    1.   import { EventSourcePolyfill } from "event-source-polyfill";
    2.   // url 接口
    3.   let source = new EventSourcePolyfill(
    4.     "https://api.baichuan-ai.com/v1/chat/completions",
    5.     {
    6.       headers: {
    7.         Authorization: "token",
    8.       },
    9.     }
    10.   );
    11.   // 当发生错误
    12.   source.onerror = function () {
    13.     console.log("error");
    14.   };
    15.   // 当通往服务器的连接被打开
    16.   source.onopen = function () {
    17.     console.log("连接成功");
    18.   };
    19.   // 当接收到消息
    20.   source.onmessage = function (event) {
    21.     console.log("服务器推送数据", event.data);
    22.   };
    复制代码
    3、使用fetchEventSource,实现post请求方式
    1. import { fetchEventSource } from "@microsoft/fetch-event-source";
    2. let es = new fetchEventSource(
    3.     "https://api.baichuan-ai.com/v1/chat/completions",
    4.     {
    5.       headers: {
    6.         Authorization: "token值",
    7.         withCredentials: true,
    8.         "Content-Type": "application/json",
    9.       },
    10.       method: "post",
    11.       // 参数
    12.       body: JSON.stringify({
    13.         username: "LIIIIII",
    14.         password: "123456",
    15.       }),
    16.       onmessage(event) {
    17.         console.log(event.data);
    18.       },
    19.       onerror() {
    20.         console.log("erroe");
    21.       },
    22.     }
    23.   );
    复制代码
    到此这篇关于HTML5 服务器发送事件(Server-Sent Events)使用详解的文章就介绍到这了,更多相关HTML5 服务器发送事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    来源:https://www.jb51.net/html5/936713.html
    免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表