简介
SSE (Server-Sent Events) 是一种服务器向客户端推送数据的技术，与 WebSocket 类似。但与 WebSocket 不同的是，SSE 的连接始终是由浏览器发起的，而且只能由服务器向客户端推送数据。
本文将介绍如何使用 SSE 实现多用户在线时，如何推送指定用户消息的方法。
实现
1. 建立 SSE 连接
使用 SSE 与服务器建立连接很容易，只需要在客户端使用 JavaScript 创建一个 EventSource 对象即可，例如：
--- ----------- - --- --------------------------
这里的 "server.php" 是一个可以推送 SSE 事件的服务器端页面，详见第2步。
2. 推送 SSE 事件
服务器端推送 SSE 事件也很简单，只需要输出以下格式的数据即可：
------ --- ----- -- --- ----
其中，event 表示事件名，data 表示数据，id 表示事件 ID。例如：
--------------------- -------------------- ---------------------- ----------- ---- ------- ----------- ---- ------ ------- -- -- -------------- ---- ------- ----------- ---- ------ ----- ----------
这样的代码会向客户端推送两个 SSE 事件，一个是 "welcome" 事件，一个是 "message" 事件。客户端通过监听事件名来接收指定的事件。
3. 推送指定用户消息
要想实现推送指定用户消息，我们可以在建立 SSE 连接时，向服务器传递一个唯一的用户标识符，例如：
--- ------ - ---------- --- ----------- - --- -------------------------------- - --------
使用这种方式，在服务器端推送 SSE 事件时，可以带上一个特定的用户标识符，例如：
------- - ---------------- ------ - ---------- ----- - ------ ---- - - ------- - ---- ---- ------- ---------- ---- ------ -----------
这样就可以向特定的用户推送消息了。
示例代码
服务器端
-----
--------------------- --------------------
---------------------- -----------
------- - ----------------
---- ------- -----------
---- ------ ------- -- -- --------------
--------
----- ------ -
------ - ----------
----- - ------ ---- - - ------- - ----
---- ------- ----------
---- ------ -----------
--------
---------
-
--客户端
--------- -----
------
------
---------- ------------
----- ----------------
-------
------
---- ------------------
--------
--- ------ - ----------
--- ----------- - --- -------------------------------- - --------
--- ------ - ----------------------------------
--------------------------------------- -------- ------- -
--- ---- - -----------
---------------- - -----
---
--------------------------------------- -------- ------- -
--- ---- - -----------
---------------- - -----
---
---------
-------
-------总结
使用 SSE 实现多用户在线时，如何推送指定用户消息非常简单，只需要在建立 SSE 连接时，传递一个特定的用户标识符，然后在服务器端推送 SSE 事件时带上这个标识符即可。这种方法可以轻松地实现多用户在线时，向指定用户推送消息的需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c63e1410032fedd38c0a41