Socket.io 多房间聊天应用

阅读时长 8 分钟读完

引言

Socket.io 是一款基于 Node.js 的实时通信库,能够在客户端与服务端之间实现无延迟的双向通信,适用于实时聊天、实时游戏等应用场景。本文将介绍如何使用 Socket.io 最基本的功能,实现一个多房间聊天应用。

准备工作

首先,我们需要安装 Socket.io。

然后,在服务端(Node.js)中引用并启动 Socket.io。

-- -------------------- ---- -------
-- --------
----- ---- - ----------------
----- -------- - ---------------------

----- ------ - ----------------------- ---- -- -
  -------------- ---------
---

----- -------- - -----------------

------------------------- -------- -- -
  ------------------- -------------
---

------------------- -- -- -
  ------------------- ------- -- ---- -------
---

客户端(HTML)中引用 Socket.io 的 JavaScript 库。

单房间聊天应用

首先,我们来实现一个单房间聊天应用。

  1. 首先,服务端需要添加一个事件监听器,以便接收客户端发来的消息。

    -- -------------------- ---- -------
    ------------------------- -------- -- -
      ------------------- -------------
    
      -------------------- ----- -- -
        --------------------- -------- ---------
        ---------------------- ----- ---------
        -------------------------------- -------- ---------
      ---
    ---
  2. 然后,在客户端中,添加一个表单来发送消息,并监听表单提交事件。

    -- -------------------- ---- -------
    -- -------
    ----- ------ - -------------------------------
    ----- ------- - ---------------------------------------------
    ----- ---------- - ------------------------------------
    
    ----- ------ - -----
    
    --------------------------------- --- -- -
      -------------------
      ----- --- - --------------
      ------------- - ---
      ------------------------------------------ --------- --------------
      ---------------------- -----
    ---
    
    -------------------- ----- -- -
      ------------------------------------------ -------------------
    ---

    注意,这里的 socket.emit('message', msg) 发送消息的目标是服务器。服务器收到消息之后,会将消息广播给所有客户端。

运行程序,即可看到在一个房间内可以实现聊天功能。

多房间聊天应用

在实际的应用场景中,我们可能需要将用户分到不同的房间中,以便实现不同的业务逻辑。下面,我们将实现一个简单的多房间聊天应用,使得每个房间内的用户之间可以互相聊天。

  1. 服务端需要维护一个房间列表,并且将每个新连接的客户端加入到一个默认房间中。

    -- -------------------- ---- -------
    ----- ----- - --- ------
    -------------------- --- -------
    
    ------------------------- -------- -- -
      ------------------- -------------
    
      -- ------
      -----------------------
      ---------------------------------
    
      -------------------- ----- -- -
        --------------------- -------- ---------
        ---------------------- ----- ---------
        ------------------------------------------ -------- ---------
      ---
    
      -- --------------
      ---------------------- ---------- -- -
        -- ------------
        ----- ------------ - ----------------
        -- -------------- -
          ---------------------------------------
          ---------------------------
        -
    
        -- -------------
        ----------------------
        --------------- - ---------
        -- ---------------------- -
          ------------------- --- -------
        -
        --------------------------------
    
        ---------------------- ---- ------ ---- --------------
        ----------------------------------- -- --- ---- ------ ---- --------------
      ---
    ---
  2. 客户端要求用户输入要加入的房间,然后发送加入房间请求。

    -- -------------------- ---- -------
    -- -------
    ----- ---------- - -------------------------------------
    ----- ----------- - --------------------------------------
    ----- ---------- - -------------------------------------
    ----- ---------- - ------------------------------------
    
    ----- ------ - -----
    
    ------------------------------------- --- -- -
      -------------------
      ----- -------- - ------------------
      ----------------- - ---
      ------------------------ ----------
      ---------------------- - ---------
    ---
    
    -------------------- ----- -- -
      ------------------------------------------ -------------------
    ---
  3. 在 HTML 页面中添加一个表单,以便用户输入要加入的房间名:

    -- -------------------- ---- -------
    ----- ---------------
      ------ --------------------- ----- --------
      ------ ----------- ----------------
      ---------------------
    -------
    
    --------- ----- ----------------------------------
    
    --- -------------------
  4. 然后我们可以在另一个浏览器窗口中打开应用,输入不同的房间名,就可以看到不同的用户之间聊天了。

总结

本文介绍了 Socket.io 的基本用法,并实现了一个多房间聊天应用。Socket.io 能够在 Node.js 与浏览器之间实现实时通信,本文实现的聊天应用只是它众多应用场景中的一个。在实际的开发工作中,我们可能会用到 Socket.io 来实现更加复杂和实用的功能。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a77d3a48841e98943fda51

纠错
反馈