在 Web 开发中，实时通讯是很常见的需求，比如聊天室、在线协作等等。而 Socket.io 正是基于 WebSockets 实现的一种实时通讯框架，它支持双向、实时的客户端-服务器通讯，可以很好地满足这类需求。
在 Socket.io 中，我们可以向连接到服务器的所有客户端广播消息，也可以向指定的某个客户端发送消息。本文将详细介绍如何使用 Socket.io 实现对指定客户端的消息推送。
基本用法
首先，我们需要引入 Socket.io 的脚本，并创建一个 Socket.io 实例：
import io from 'socket.io-client';
const socket = io('http://localhost:3000');这里我们假设服务器运行在本地 3000 端口。创建实例后，我们就可以使用它来发送和接收消息了。比如，要向服务器发送一条消息：
socket.emit('message', { content: 'hello' });这里的 message 是自定义的事件名，可以根据具体需求取任何名字。服务器收到这条消息后，可以对它进行处理。比如，向所有客户端广播一条消息：
socket.on('message', (data) => {
socket.broadcast.emit('message', data);
});这里的 broadcast 方法表示向除当前客户端之外的所有客户端广播消息。也就是说，这个事件会触发其他所有客户端的 message 事件监听器。
向指定客户端发送消息
如果我们想向指定的某个客户端发送消息，可以使用 Socket.io 提供的 to 方法。比如，我们可以在服务器端实现一个接口，接收客户端发送的消息：
socket.on('private message', (data) => {
const targetSocket = io.sockets.sockets.get(data.to);
if (targetSocket) {
targetSocket.emit('private message', data);
}
});这里的 private message 也是自定义的事件名，表示私信。data.to 存储了接收方客户端的 id。我们首先通过 io.sockets.sockets.get 方法获取目标客户端的 Socket 实例，然后调用它的 emit 方法向该客户端发送消息。
客户端发送私信的代码可以是这样的：
const to = 'targetSocketId';
socket.emit('private message', { to, content: 'hello' });这里我们指定了接收方的 id，然后发送 private message 事件，并将 to 和 content 数据一起传递给服务器。
多人聊天室实例
下面我们来看一个完整的多人聊天室的实例。这个聊天室支持用户注册、登录、发送消息等功能。我们将分别实现服务器端和客户端的代码。
服务器端代码
服务器的代码比较长，但是很容易理解。大致的思路是：监听客户端连接事件，维护一个在线用户列表，处理用户注册、登录、退出等事件，实现广播和私信功能。注释已经在代码中给出，这里就不再赘述：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------- - ---------------------
----- ------ - --------------------
-- -- --------- --
----- -- - ---------------- -
----- -
------- ------------------------
-------- ------- --------
--
---
-- ------
----- ----- - --- ------
-- ---------
------------------- -------- -- -
------------------- ------------ ------------
-- --------
--------------------- ---------- -- -
-- ---------------------- -
--------------------- -------- - -------- ------ -------- -------- ---
-------
-
-------------------- - -------- ---
------------------- ------------ ---------- -- --------------
--------------------- -------- - -------- ----- -------- ------ ---
-- -----------------
--------------------------- -------- - -------- ---
---
-- --------
------------------ ---------- -- -
-- ---------------------- -
------------------ -------- - -------- ------ -------- -------- ---
-------
-
--- ------ ---- ----- -- ------ -
-- -------------- --- --------- -
------------------ -------- - -------- ------ -------- --------- ---
-------
-
-
-------------------- - -------- ---
------------------- ------------ ------ -- -- --------------
------------------ -------- -
-------- -----
-------- -------
--------- ---------------------------
---
-- ----------------
--------------------------- -------- - -------- ---
---
-- --------
------------------- -- -- -
-- ----------------------- -
-------
-
----- - -------- - - ---------------------
------------------------
------------------- ------------ ------ ------
-- ----------------
--------------------------- ------ - -------- ---
---
-- --------------
--------------- --------- --------- -- -
----- - -------- - - ---------------------
----------------- ----------- ----- -------- -------------
-- -----------
--------------------------- --------- - --------- ------- ---
---
-- ------------
------------------ --------- ------ -- -
----- - -------- - - ---------------------
----- ------------ - --------------------------------
-- -------------- -
-------------------------- --------- - ----- --------- -------- ------------ ---
- ---- -
-------------------- ------- -------- -
-------- ------
-------- --------
---
-
---
-- -----------
----------------------- -- -- -
------------------- ------------ ---------------
-- ----------------------- -
-------
-
----- - -------- - - ---------------------
------------------------
-- ----------------
--------------------------- ------ - -------- ---
---
---
-- -----
------------------- -- -- -
------------------- -- ------- -- ------------------------
---客户端代码
客户端的代码也比较长，但是主要是 Vue.js 的组件定义和样式，与 Socket.io 相关的代码只有很少一部分。代码注释已经在代码中给出，这里也不再讲解：
-- -------------------- ---- -------
----------
---- ------------------
---- ------------------
---- ------------------------
---- ----------- -- ------ -------------------- -------------
-- ------------- --
----- ------------------- ----------------------------------------
------
------
---- -----------------
---- -----------------------
---- ---------------------
---- -------------- -- --------- -------------------- ----------------
----- ------------------- ---------------- ----------
----- ------------------ --------------- ---------
------
------
---- ------------------
------ ----------- ---------------------- ----------------------
------- -------------------------
------
------
---- ---------------------- --------- ----- ----------------- ---
---- ----------------------
---- ------------------
----
----------- -- ------
--------------------
------------------- --- ---------
------------
---------------------------------
-
-- ------------- --
------
------
---- ---------------------
---- -------------- -- ---------------- -------------------- ----------------
----- ------------------- ---------------- ----------
----- ------------------ --------------- ---------
------
------
---- ------------------
------ ----------- ---------------------- -----------------------------
------- --------------------------------
------
------
------
-----------
--------
------ -- ---- -------------------
------ ------- -
----- -----------
------ -
------ -
------- -----
--------- --- -- --------
------ --- -- ------
--------- --- -- ------
------------- --- -- ---------
---------------- --- -- ----
------------- --- -- -------
------------------ ------ -- ---------
--
--
--------- -
-- -- --------- --
----------- - ----------------------------
-- ------
------------------------- -- -- -
---------------------- ------------
---
-- --------
------------------------ -------- ------ -- -
-- -------------- -
--------------------------
------------- - --------------------------------------
--------------------------------- - -----
- ---- -
--------------------
-
---
-- --------
--------------------- -------- ------ -- -
-- -------------- -
--------------------------
---------- - --------------
---------------------------------- - -------
- ---- -
--------------------
-
---
-- --------
-------------------- -------- ------ -- -
----------------- ---------------- ---------
----------------- --------- ------------- ---
---
-- --------
-------------------- ------ ------ -- -
----------------- ---------------- -------
----- ----- - --------------------------- -- ------------- --- ---------------
-- ------ --- --- -
------------------------ ---
-
---
-- --------
-------------------- --------- ------ -- -
----------------- ---------------- ----- -------- ------------------
-------------------- -------- ------ -------------------- ---
----------------- -- -
----- --------- - -----------------------
------------------- - -----------------------
---
---
-- ------
----------------------- --------- ------ -- -
----------------- ------------ ----- ------- -------- ------------------
-- ---------------------------------- -
------------------------------- ---------- ----
-
--------------------------------------
--------- ----------
-------- -------------
------ ---------------------------------------
---
-- ------------------------ -
----------------- -- -
----- --------- - ------------------------------
------------------- - -----------------------
---
-
---
-- --------
----------------------- ------- -------- ------ -- -
--------------------
---
-- --------
---------------------------- -- -- -
---------------------- ---------------
--------------------------------- - ------
---------------------------------- - --------
---
--
-------- -
---------- -
----- -------- - --------------------------------------
-- ----------- -
----------------
-------
-
---------------------------- ----------
--
------- -
----- -------- - --------------------------------------
-- ----------- -
----------------
-------
-
------------------------- ----------
--
---------------- -
---------------------------
--
------ -
----- ------- - -------------------------
-- ---------- -
-------
-
---------------------- --------- ---------
----------------- - ---
--
------------- -
---------------------- - -----
--
------------- -
---------------------- - ------
--
------------------- -
--------------------------------
----------------------------- - ------------- --
--
------------- -
----- ----- - ------------------------
----- ------ - ----------------------------------
-- -------- -- ---------- -- ----------- -
-------------------------- ----------
-------
-
----- -- - ----------
----- ------- - -----------------
------------------------- --------- - --- ------- ---
----------------- - ---
--
--
--
---------
------ -------
---------- -
-------- -----
---------- --- -------
---------------- --------------
------------ --------
------- ------
-
---------- -
----- - - ----
----------------- --------
-------- -----
----------- -----
-
---------- ------ -
------------ -----
-
---------- ----- -
------- --------
------- --- --
-
---------- ----------- -
---------------- ----------
-
---------- ------------ -
------------ -----
------ --------
---------------- ----------
-
---------- ------------------ -
------- --------
-
--------- -
----- --
-------- -----
--------------- -------
---------------- --------------
-------- -----
-
--------- ------ -
------------ -----
-
------------- -
----- --
----------- -----
-
---------- -
-------- -----
---------------- --------------
------------ -------
----------- -----
-
---------- ----- -
----- --
------- -----
-------- - -----
------- --- ----- -----
-------------- ----
-
---------- ------ -
------ -----
------- -----
------------ -----
----------------- --------
------ ------
------- -----
-------------- ----
-
--------------- -
-------- -----
--------- ---------
----- --
---- --
------ --
------- --
----------------- --------
-------- -----
----------- -----
-------- --
-
-------------------- -
-------- ------
-
--------------- ------ -
------------ -----
-------------- -----
-
--------------- ---------- -
-------------- -----
-
--------------- ----- -
------- --------
------- --- --
-
--------------- ----------- -
---------------- ----------
-
--------------- ------------- -
----------- -----
------- --------- - -------
-
--------------- ---------- -
-------- -----
---------------- --------------
------------ -------
----------- -----
-
--------------- ---------- ----- -
----- --
------- -----
-------- - -----
------- --- ----- -----
-------------- ----
-
--------------- ---------- ------ -
------ -----
------- -----
------------ -----
----------------- --------
------ ------
------- -----
-------------- ----
-
--------总结
通过上面的示例，我们可以了解到如何使用 Socket.io 实现对指定客户端的消息推送。本文介绍了基本用法，并给出了一个多人聊天室的完整代码实例，供读者参考和借鉴。Socket.io 还有很多其它的用法和功能，有兴趣的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482fba448841e98942589d9