欢迎来到万象站长学堂!

html5

当前位置: 主页 > 网页制作 > html5 > 文章列表

HTML5 服务器发送事件(Server

时间:2025-10-24 01:32:49|栏目:html5|点击:17 次

正文:

        HTML5服务器发送事件(server-sent event)允许网页获得来自服务器的更新

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

使用场景:

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

 使用方式:

  1、直接使用浏览器自带EventSource,缺点:不可以自定义参数且只能get方式请求,无法向服务端传递请求参数,比如请求头中携带token

 if (window.hasOwnProperty("EventSource")) {
    // url 接口
    let source = new EventSource(
      "https://api.baichuan-ai.com/v1/chat/completions"
    );
    // 当发生错误
    source.onerror = function () {
      console.log("error");
    };
    // 当通往服务器的连接被打开
    source.onopen = function () {
      console.log("连接成功");
    };
    // 当接收到消息
    source.onmessage = function (event) {
      console.log("服务器推送数据", event.data);
    };
  }

2、使用 EventSourcePolyfill ,解决使用EventSource无法在header中传参,缺点:只能get请求且无法向服务端传递请求参数

  import { EventSourcePolyfill } from "event-source-polyfill";
  // url 接口
  let source = new EventSourcePolyfill(
    "https://api.baichuan-ai.com/v1/chat/completions",
    {
      headers: {
        Authorization: "token",
      },
    }
  );
  // 当发生错误
  source.onerror = function () {
    console.log("error");
  };
  // 当通往服务器的连接被打开
  source.onopen = function () {
    console.log("连接成功");
  };
  // 当接收到消息
  source.onmessage = function (event) {
    console.log("服务器推送数据", event.data);
  };

3、使用fetchEventSource,实现post请求方式

import { fetchEventSource } from "@microsoft/fetch-event-source";
 let es = new fetchEventSource(
    "https://api.baichuan-ai.com/v1/chat/completions",
    {
      headers: {
        Authorization: "token值",
        withCredentials: true,
        "Content-Type": "application/json",
      },
      method: "post",
      // 参数
      body: JSON.stringify({
        username: "LIIIIII",
        password: "123456",
      }),
      onmessage(event) {
        console.log(event.data);
      },
      onerror() {
        console.log("erroe");
      },
    }
  );

到此这篇关于HTML5 服务器发送事件(Server-Sent Events)使用详解的文章就介绍到这了,更多相关HTML5 服务器发送事件内容请搜索万象站长学堂以前的文章或继续浏览下面的相关文章,希望大家以后多多支持万象站长学堂!

上一篇:html5 video 标签 controlslist详细使用

栏    目:html5

下一篇:HTML5兼容HEVC视频格式且支持本地绝对路径访问的操作方法

本文标题:HTML5 服务器发送事件(Server

本文地址:https://zhanzhang.eapis.site/html/2113.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:120507403 | 邮箱:120507403@qq.com

Copyright © 2002-2025 万象站长学堂 版权所有沪ICP备2021023961号-8 粤公网安备 13010202004186