在前端开发中,经常需要实时获取远端信息并实时更新页面,例如用户评论、即时聊天消息等,传统的轮询方式会给服务器带来很大的负担,而更好的解决方案是使用 Server-Sent Events。本文将会介绍如何使用 Server-Sent Events 发送实时信息给 JavaScript Loop 提供反馈的实现方案。
什么是 Server-Sent Events?
Server-Sent Events,简称为 SSE,是一种基于 HTTP 协议实现的服务器向客户端推送信息的技术,它的基本原理是客户端通过 EventSource 对象发起一次 HTTP 连接,服务器在连接上发送消息,客户端收到消息后触发事件并做进一步处理。与 WebSocket 不同的是,SSE 不需要双向通信,即服务器只需要向客户端推送信息即可,同时它的出错率和网络状况的稳定性要好于 WebSocket。
SSE 的基本用法
SSE 的用法非常简单,只需要使用一个 EventSource 对象即可,举例如下:
--- ----------- - --- ----------------------- --------------------- - --------------- - ------------------------ --
以上代码通过 EventSource 对象发起一次 GET 请求,请求地址为 '/stream'
,服务器会不断地向客户端发送消息,并触发 onmessage
事件,其中 event.data
即为服务器发送的消息。
在服务器端,发送 SSE 消息的方式也很简单,只需要在 HTTP 响应中添加 Content-Type: text/event-stream
头,然后按照特定的格式发送消息,举例如下:
-------- --- -- ------------- ----------------- ----- ----- -----
以上代码的格式与普通的 HTTP 响应有所不同,其中的 data: hello world
即为服务器发送的消息,注意消息必须以换行符结尾。
结合 JavaScript Loop 实现实时消息更新
使用 SSE 发送消息并不难,但如何在 JavaScript Loop 中实时更新页面呢?这里有一个比较简单的实现方案。
首先,在页面中创建一个用于显示消息的元素,例如一个 <div>
,举例如下:
---- -------------------
然后,使用 JavaScript 定时重新向服务器请求 SSE 消息,并将消息更新到上述 <div>
中,如下所示:
--- -------------- - ----------------------------------- --- ----------- - --- ----------------------- --------------------------------------- --------------- - -------------------------- - ----------- --- ---------------------- - -------------------- ----------- - --- ----------------------- --------------------------------------- --------------- - -------------------------- - ----------- --- -- ------
以上代码每 5 秒重新向服务器请求一次 SSE 消息,每次得到消息后会更新上述 <div>
中的内容,从而实现实时消息更新的功能。注意:每次重新请求 SSE 消息时,需要先关闭之前的 EventSource 对象,并重新创建一个,否则可能会导致出现重复的消息。
总结
通过以上实现方案,我们可以很方便地使用 SSE 发送消息给 JavaScript Loop 并实时更新页面。同时,SSE 的不同于 WebSocket 的单向通信特性也使得它能够更好地适用于特定场景,例如监控数据的实时推送等。
示例代码
下面是一个完整的示例代码,供读者参考:
HTML
--------- ----- ------ ------ ----- ---------------- ---------- ------------ ------- ------ ------- --------- ---- ------------------- ------- ---------------------- ------- -------
JavaScript
--- -------------- - ----------------------------------- --- ----------- - --- ----------------------- --------------------------------------- --------------- - -------------------------- - ----------- --- ---------------------- - -------------------- ----------- - --- ----------------------- --------------------------------------- --------------- - -------------------------- - ----------- --- -- ------
服务器端
----- ---- - ---------------- ------------------------------- ---- - -- -------- --- ---------- - ------------------- ---------- ------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ---------------------- - ---------------- - - --- -------------------- - -------- -- ------ ----------------
其中,以上代码实现了一个简单的 HTTP 服务器,它会不断地向客户端发送当前时间,并以 SSE 的形式发送。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64f4b159f6b2d6eab3d992b1