在现代 Web 应用中，实时聊天功能已经成为了必不可少的一部分。为了实现这种功能，我们可以使用多种技术，其中包括了 Server-sent Events 和 WebSocket。
Server-sent Events
Server-sent Events（SSE）是一种基于 HTTP 的实时通信协议，它可以让服务器向客户端发送事件流。这种协议与 WebSocket 不同，它是单向的，只能由服务器向客户端发送数据，而客户端无法向服务器发送数据。
下面是一个使用 SSE 实现实时聊天的示例代码：
服务端代码
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
----------------客户端代码
const eventSource = new EventSource('http://localhost:3000');
eventSource.addEventListener('message', (event) => {
console.log(event.data);
});在上面的代码中，服务端会每隔一秒向客户端发送一条消息，客户端会在接收到消息后将其打印出来。
WebSocket
WebSocket 是一种双向通信协议，它可以在客户端和服务器之间建立一个持久的连接，使得双方可以实时地发送和接收数据。
下面是一个使用 WebSocket 实现实时聊天的示例代码：
服务端代码
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- ---- -- -
---------------- --------- -- -
---------------------------- -- -
-- ------- --- -- -- ----------------- --- --------------- -
---------------------
-
---
---
---客户端代码
-- -------------------- ---- ------- ----- -- - --- --------------------------------- ------------ - ------- -- - ------------------------ -- ---------------------------------------------------------- -- -- - ----- ----- - -------------------------------- --------------------- ----------- - --- ---
在上面的代码中，服务端会在有新的连接建立时向所有客户端广播消息，客户端则可以通过输入框发送消息并接收广播消息。
总结
以上就是使用 Server-sent Events 和 WebSocket 实现在线实时聊天的示例代码。虽然 SSE 和 WebSocket 都可以用于实现实时通信，但它们在实现方式和使用场景上有很大的差异，开发者需要根据实际需求选择合适的技术来实现实时通信功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6558b20bd2f5e1655d2df04d