正文：
HTML5服务器发送事件（server-sent event）允许网页获得来自服务器的更新
EventSource是单向通信的（是服务器向客户端的单向通信，客户端接收来自服务器的事件流）、基于HTTP协议（EventSource是基于标准的HTTP/HTTPS协议），使用长轮询或类似的机制，但并不是完全双向的通信、文本数据传输（通常用于传输文本数据，如服务器推送的消息或事件）、自动重连（当连接中断，EventSource会自动尝试重新连接，不需要手动处理重连）。
使用场景：
适合需要从服务器获取实时信息的应用，例如股票行情或新闻推送。
使用方式：
1、直接使用浏览器自带EventSource，缺点：不可以自定义参数且只能get方式请求，无法向服务端传递请求参数，比如请求头中携带token
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | if (window.hasOwnProperty("EventSource")) { // url 接口 let source = new EventSource( ); // 当发生错误 source.onerror = function () { console.log("error"); }; // 当通往服务器的连接被打开 source.onopen = function () { console.log("连接成功"); }; // 当接收到消息 source.onmessage = function (event) { console.log("服务器推送数据", event.data); }; } |
2、使用 EventSourcePolyfill ,解决使用EventSource无法在header中传参，缺点：只能get请求且无法向服务端传递请求参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import { EventSourcePolyfill } from "event-source-polyfill";// url 接口let source = new EventSourcePolyfill( { 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请求方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import { fetchEventSource } from "@microsoft/fetch-event-source"; let es = new fetchEventSource( { 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 服务器发送事件内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！
