Content-Type:text/event-stream 的请求头,这是 HTML5 中的 EventSource 是一项强大的 API,通过服务器推送实现实时通信。
与 WebSocket 相比,EventSource 提供了一种简单而可靠的单向通信机制(服务器->客户端),实现简单,适用于许多实时应用场景。
本文将介绍 EventSource 的简单使用、与 WebSocket 的对比以及其优缺点,最后对其进行总结。
客户端从服务端订阅一条“流”,之后服务端可以发送消息给客户端直到服务端或者客户端关闭该“流”,所以 EventSource 也叫作 SSE(server-sent-event)。
客户端的 HTML
页面中使用 JavaScript
创建了一个 EventSource
对象,通过 onmessage
事件,将接收到的事件数据添加到页面中。如果发生错误,客户端会关闭 EventSource
连接。
前端 HTML
- html>
- <html>
- <head>
- <title>SSE testtitle>
- <script type="text/javascript">
- window.addEventListener("DOMContentLoaded", function () {
- var evsrc = new EventSource("http://localhost:8080/events");
- var msgEvent = function (ev) {
- document.getElementById("log")
- .insertAdjacentHTML("beforeend", "
- "
+ ev.data + ""); - }
- evsrc.onmessage = msgEvent;
- //evsrc.addEventListener("message", msgEvent)
- evsrc.onerror = function (ev) {
- console.log("readyState = " + ev.currentTarget.readyState);
- }
- })
- script>
- head>
- <body>
- <h1>SSE testh1>
- <div>
- <ul id="log">
- ul>
- div>
- body>
- html>
EventSource 的优点
EventSource 的缺点
WebSocket 的优点
WebSocket 的缺点
EventSource 是 HTML5 中一个强大的 API,提供了简单可靠的服务器推送机制,用于实现实时通信。
与 WebSocket 相比,EventSource 的优势在于其简单易用、自动重连、轻量级和跨域支持。然而,它也有一些限制,如单向通信和较低的浏览器支持。相比之下,WebSocket 适用于双向通信、大规模应用和实时性要求较高的场景,但其复杂性和穿越防火墙的挑战也需要考虑。
总的来说,EventSource 是一种非常有用的 API,适用于许多实时应用场景,如实时股票报价、即时聊天、实时通知等。它提供了一种简单而可靠的方式来建立服务器推送连接,并实现实时更新和通知。如果应用程序只需要服务器向客户端单向推送数据,EventSource 是一个不错的选择。然而,如果需要双向通信或更高级的实时功能,WebSocket 可能更适合。