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 服务器发送事件(Server-Sent Events)的使用教程-码云笔记HTML5服务器发送事件（server-sent event）允许网页获得来自服务器的更新。 EventSource是单向通信的（是服务器向客户端的单向通信，客户端接收来自服务器的事件流）、基于HTTP协议（EventSource是基于标准的HTTP/HTTPS协议），使用长轮...
https://mybj123.com/21968.html
