在现代 Web 开发中,实时消息推送成为了很多应用的必要功能。而实现实时消息推送的两项核心技术 WebSocket 和 SSE 的出现,则让这一功能更加高效与可靠。本文将详细介绍如何使用 WebSocket 和 SSE 实现实时消息推送。
什么是 WebSocket?
WebSocket 是一种实现了双向通信的协议,它更加轻量化,更加高效 - 不会在每个请求和响应中带有头信息,而是保持了一个开放的套接字,为通过它传输的数据提供了更好的处理。 因此,WebSocket 允许客户端和服务器之间实时、基于事件的消息传递。它建立在 HTTP 协议上,端口号为 80 和 443。
什么是 SSE?
SSE (Server-Sent Events)也是一种基于 HTTP 的协议,它允许服务器向客户端推送新消息,这种通信方式是单向的,只能由服务器端向客户端发送消息。SSE 通过使用一个持续打开的 HTTP 连接,仅使用简单的文本协议,从而提供了一种很好的实时消息传递机制。 端口号为 80 和 443。
使用 WebSocket 实现实时消息推送
客户端 WebSocket
首先,我们需要用 JavaScript 编写一个客户端 WebSocket 对象,用于连接到服务器并接收实时消息。
----- -- - --- --------------------------------- --------------------------- -- -- - ----------------------- --------- --- ------------------------------ ----- -- - ------------------------ ---
在这里,我们使用了 WebSocket
构造函数来创建一个连接,并将其连接到 HTTP 服务器的 WebSocket 端口 8080
上。addEventListener
事件监听器监听了连接打开和收到消息的事件。在收到消息后,数据会出现在控制台中。在我们连接到服务器时,控制台也会显示连接打开的消息。
服务器端 WebSocket
接下来,我们需要建立一个 WebSocket 服务器,用于与客户端通信并发送实时消息。
----- --------- - -------------- ----- --- - --- ------------------ ----- ---- --- -------------------- -- -- - ----------------------- --------- ---------------- ---- -- - ------------------ -------------------------- -- - -- ------------------ --- --------------- - ------------------ - --- --- ---
在这段代码中,我们使用 Node.js 和 ws
模块建立了一个 WebSocket 服务器。函数 wss.on('connection')
监听了连接事件,并用 WebSocket.OPEN
状态的客户端迭代,向所有已连接的客户端广播从任何一个客户端发送过来的消息。这样,每个客户端都可以实时地接收其他客户端的消息。
使用 SSE 实现实时消息推送
客户端 SSE
对于 SSE,客户端 SSE 实现非常简单,我们只需要执行一个 GET 请求,发送一个带有一些特殊标记的 HTTP 响应,就可以从服务器端接收到实时消息。
----- ----------- - --- ----------------------- --------------------- - ----- -- - ------------------------ --
在这里,我们创建了一个 EventSource
对象,指向本地服务器上的 /events
端点。当服务器向客户端推送消息时,eventSource.onmessage
处理程序将在浏览器窗口的控制台中输出消息。可见 SSE 的客户端实现大大简化了代码。
服务器端 SSE
对于服务器端 SSE,请使用以下代码将消息推送到客户端。
----- ---- - ---------------- ----------------------- ---- -- - ------------------ - --------------- -------------------- ---------------- ----------- ----------- ------------ --- ----- ----- - -------------- -- - ---------------- ---- -- - ------- ---- -------------- -- ------ --------------- -- -- - -------------------- ----------------- ---------- --------- -- ----------------
使用 http
模块创建了一个 HTTP 服务器,添加了大量的 HTTP 头信息以确保服务器正确地响应 SSE 格式。接下来,我们使用 setInterval
函数来定期发送消息给所有客户端。
这样,当客户端连接到该服务端 SSE 端点时,该服务端根据设置的时间周期向该客户端推送消息。
结论
通过本文的详细介绍,可以清晰地了解 WebSocket 和 SSE 技术,并了解了如何将其与客户端和服务器进行集成,实现实时的消息推送。现在,您可以按照这一教程,使用 WebSocket 或 SSE 技术构建一些酷炫的实时应用程序了。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/66ee5db46fbf960197217ba2