在 Web 开发中,实时通信是一个非常重要的功能。SSE(Server-Sent Events)就是一种用于实现服务器向客户端推送数据的技术。本文将介绍 SSE 的基本原理和用法,并提供相应的示例代码。
SSE 的基本原理
SSE 基于 HTTP 协议,利用了 HTTP 的长连接机制,实现了服务器向客户端推送数据的功能。其原理如下:
- 客户端向服务器发送一个 HTTP 请求,请求的头部包含
Accept: text/event-stream
。 - 服务器接收到请求后,会保持连接不断开,然后将数据以一定的格式发送给客户端。
- 客户端接收到数据后,会通过 JavaScript 代码进行处理和展示。
SSE 的数据格式如下:
------ ------ ----- ---- ------ ------ ----- ---- ---
其中,event
表示事件名称,data
表示数据。每个事件名称和数据之间用一个空行隔开。事件名称是可选的,如果不需要可以省略。数据可以是任意格式的字符串,包括 JSON、XML 等。
SSE 的用法
SSE 的用法非常简单,只需要在客户端使用 JavaScript 发送一个 SSE 请求即可。下面是一个 SSE 请求的示例代码:
----- ------ - --- -------------------- ---------------- - --------------- - ------------------------ --
上面的代码中,EventSource
是 SSE 的核心对象,用于发送 SSE 请求和接收服务器推送的数据。/sse
是服务器端的 SSE 接口地址。source.onmessage
是用于处理服务器推送的数据的回调函数。
在服务器端,需要使用特定的技术实现 SSE 的功能。下面是一个基于 Node.js 和 Express 的 SSE 示例代码:
----- ------- - ------------------- ----- --- - ---------- --------------- ------------- ---- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ---------------------- - ---------------- - - --- ------ - -------- -- ------ --- -----------------
上面的代码中,res.writeHead
设置了响应头部,包括 Content-Type
、Cache-Control
和 Connection
。setInterval
是用于定时向客户端推送数据的函数。
总结
SSE 是一种非常实用的实时通信技术,可以用于实现聊天室、股票行情等实时数据的展示和推送。本文介绍了 SSE 的基本原理和用法,并提供了相应的示例代码,希望对读者有所帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65c0758aadd4f0e0ffa5bfb6