在现代 Web 应用程序中，实时性是非常重要的。有时候，我们需要将服务器端发生的事件及时通知给客户端，以便及时更新界面。在这样的场景下，Server-sent Events(SSE) 就成为了一种比 WebSocket 更加轻量级的实时通信方式。
什么是 Server-sent Events(SSE)
SSE 是一种服务器向客户端推送新数据的 Web 技术，用于实现事件驱动的架构。它基于 HTTP 协议，可以在不借助任何第三方库的情况下实现双向通信。客户端发送一个 HTTP 请求，服务器返回一个不断更新的数据流，客户端通过事件监听即可获知服务器端发生的事件。
SSE 工作原理
- 客户端发送一个 HTTP 请求到服务器，请求打开一个持久连接；
- 服务器接收到请求后，返回一个包含头部字段
Content-Type: text/event-stream的响应； - 客户端通过 EventSource API 接收到响应后，自动打开了持久连接，并监听服务器端发送的数据；
- 服务器不断地发送消息，直到客户端关闭连接或者遇到网络错误。
下面是一个 SSE 的示例代码：
服务端(PHP)：
-- -------------------- ---- ------- --------------------- -------------------- ---------------------- ----------- ----- - ------ ----- ------ - ---------- --- - ------- ---- ------- ---------- ---- ---- ------- ---- ------ ----------- -------- -- ----------
客户端(JS)：
const eventSource = new EventSource('/sse');
eventSource.onmessage = function(e) {
console.log(e.data);
};如何使用 SSE 实现事件驱动的架构
下面是一个使用 SSE 实现事件驱动的架构的示例，假设我们有一个在线图书馆应用程序，需要实时显示用户借还书的情况。
- 客户端发送 SSE 请求到服务器，请求打开一个持久连接；
- 服务器接收到请求后，查询数据库，获取用户借还书的信息；
- 服务器将最新的用户借还书的信息通过 SSE 协议发送给客户端；
- 客户端通过监听 SSE 事件，获取到最新的用户借还书的信息，并更新界面。
服务端(PHP)：
-- -------------------- ---- ------- --------------------- -------------------- ---------------------- ----------- ----------- - ----- - ---------------- ------ - --------- --- - ------- ---- ------- ---------- ---- ---- ------- ---- ------ ----------- -------- -- ---------- --------- -- -- - -- -
客户端(JS)：
const eventSource = new EventSource('/sse');
eventSource.onupdate = function(e) {
const data = JSON.parse(e.data);
update_user_books(data);
};注意事项
- SSE 通信是单向的，即客户端只能接收服务器端的数据，而不能向服务器端发送数据；
- SSE 通信是基于 HTTP 协议的，因此，客户端可以使用 HTTP 的缓存机制，提高数据传输的效率；
- SSE 通信可以跨域，但不支持带有身份验证的跨域请求；
- SSE 通信不支持二进制数据。
结论
Server-sent Events(SSE) 是一种轻量级的实时通信协议，可以很好地与 HTTP 协议及 Web 技术相结合，实现事件驱动的架构。它比 WebSocket 更加简单、易用、可靠，并且可以充分发挥 HTTP 协议的优势。通过学习本文的 SSE 相关知识点，我们可以更好地在 Web 应用程序中实现实时性功能，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6728a88c2e7021665e2108be