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

简介: 详解 HTML5 服务器发送事件(Server-Sent Events)

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)使用教程就介绍到这了。

相关文章
|
2月前
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
本文介绍了如何在Twaver-HTML5中监听网络视图操作事件,包括视图绘制、鼠标事件以及获取鼠标下的网元等。
38 1
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 服务器发送事件(Server-Sent Events)详解
**服务器发送事件(Server-Sent Events, SSE)** 是一种用于构建单向实时通信的技术,允许服务器主动向客户端(通常是浏览器)推送更新。SSE 提供了一个简单的 API,非常适合实时应用,如新闻更新、天气变化、社交媒体通知等。SSE 基于 HTTP 协议,通过长连接实现数据传输。其主要优点包括简洁的 API、持久连接和自动重连功能。大多数现代浏览器都内置了对 SSE 的支持。通过简单的服务器端和客户端代码,可以轻松实现数据的实时推送和接收。
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
22 5
|
2月前
|
存储 弹性计算 运维
自动化监控和响应ECS系统事件
阿里云提供的ECS系统事件用于记录云资源信息,如实例启停、到期通知等。为实现自动化运维,如故障处理与动态调度,可使用云助手插件`ecs-tool-event`。该插件定时获取并转化ECS事件为日志存储,便于监控与响应,无需额外开发,适用于大规模集群管理。详情及示例可见链接文档。
|
2月前
|
消息中间件 弹性计算 运维
阿里云ECS事件通知产品详解
介绍阿里云ECS事件通知产品的详情和使用案例,包括控制台、OpenAPI、调试等。
|
22天前
|
弹性计算 网络安全
阿里云国际OpenAPI多接口快速管理ECS服务器教程
阿里云国际OpenAPI多接口快速管理ECS服务器教程
|
6天前
|
弹性计算
阿里云2核16G服务器多少钱一年?亲测价格查询1个月和1小时收费标准
阿里云2核16G服务器提供多种ECS实例规格,内存型r8i实例1年6折优惠价为1901元,按月收费334.19元,按小时收费0.696221元。更多规格及详细报价请访问阿里云ECS页面。
38 9
|
2天前
|
监控 Ubuntu Linux
使用VSCode通过SSH远程登录阿里云Linux服务器异常崩溃
通过 VSCode 的 Remote - SSH 插件远程连接阿里云 Ubuntu 22 服务器时,会因高 CPU 使用率导致连接断开。经排查发现,VSCode 连接根目录 ".." 时会频繁调用"rg"(ripgrep)进行文件搜索,导致 CPU 负载过高。解决方法是将连接目录改为"root"(或其他具体的路径),避免不必要的文件检索,从而恢复正常连接。
|
6天前
|
弹性计算 异构计算
2024年阿里云GPU服务器多少钱1小时?亲测价格查询方法
2024年阿里云GPU服务器每小时收费因实例规格不同而异。可通过阿里云GPU服务器页面选择“按量付费”查看具体价格。例如,NVIDIA A100的gn7e实例为34.742元/小时,NVIDIA A10的gn7i实例为12.710156元/小时。更多详情请访问阿里云官网。
37 2
|
11天前
|
存储 弹性计算 NoSQL
"从入门到实践,全方位解析云服务器ECS的秘密——手把手教你轻松驾驭阿里云的强大计算力!"
【10月更文挑战第23天】云服务器ECS(Elastic Compute Service)是阿里云提供的基础云计算服务,允许用户在云端租用和管理虚拟服务器。ECS具有弹性伸缩、按需付费、简单易用等特点,适用于网站托管、数据库部署、大数据分析等多种场景。本文介绍ECS的基本概念、使用场景及快速上手指南。
46 3

热门文章

最新文章