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

如山

正文：

        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
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！