HTML5 服务器发送事件(Server-Sent Events)使用详解
发布时间：2024-05-15 16:55:05 作者：Lee_Yu_Fan 
我要评论
我要评论HTML5服务器发送事件（server-sent event）允许网页获得来自服务器的更新，下面通过本文给大家介绍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)使用详解的文章就介绍到这了,更多相关HTML5 服务器发送事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
浅谈HTML5 服务器推送事件（Server-sent Events）
这篇文章主要介绍了浅谈HTML5 服务器推送事件（Server-sent Events） ，具有一定的参考价值，有兴趣的可以了解一下2017-08-01HTML5 文件域+FileReader 分段读取文件并上传到服务器
这篇文章主要介绍了HTML5 文件域+FileReader 分段读取文件并上传到服务器,需要的朋友可以参考下2017-10-23
浅谈html5之sse服务器发送事件EventSource介绍
本篇文章主要介绍了浅谈html5之sse服务器发送事件EventSource介绍，具有一定的参考价值，有兴趣的可以了解一下2017-08-28- 这篇文章主要介绍了浅析HTML5的WebSocket与服务器推送事件,WebSocket API最大的特点就是让服务器和客户端能在给定的时间范围内的任意时刻,相互推送信息，需要的朋友可以参2016-02-19
最新评论