基于 Socket.io 的 nodejs 多人在线聊天室(含 Android 版)

阅读时长 13 分钟读完

随着互联网技术的发展,实时通信已成为现代应用程序的一种常见需求。在这种背景下,Socket.io 出现了,它是一种使用 WebSocket 链接的实时通信库。

本文将详细介绍如何使用 Socket.io 建立一个简单的多人聊天室,并提供 Android 版的示例客户端,读者可以通过学习此案例来掌握 Socket.io 的用法,并了解实时通信应用程序的实现方法。

环境搭建

在开始开发之前,我们需要确保有 Node.js 环境。在安装了 Node.js 之后,我们可以在终端或命令行中输入以下命令来检查 Node.js 是否安装成功:

如果显示了 Node.js 的版本号,则说明安装完成。

接下来,我们需要安装 Socket.io 的依赖包,可以通过以下命令来完成安装:

在依赖包安装完成之后,我们就可以开始开发了。

服务端实现

我们需要首先创建一个 Server,并使用 Socket.io 为其增加实时通信能力。

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

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

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

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

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

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

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

我们首先创建了一个 Express 应用程序实例 app,将其与 http 服务器实例绑定,并使用 Socket.io 创建了一个实例 io。

接着,我们为 Express 应用程序的根路径 '/' 添加了对应的路由响应函数,该函数将在用户访问 '/' 时返回一个 HTML 文件(此处省略了页面的 HTML 和 CSS 文件)。

在 Socket.io 模块中,每个 socket 连接都会触发一个 'connection' 事件。我们可以通过监听该事件来获取连接到服务器的 socket 实例,并为其注册监听器。在此处,我们注册了一个 'chat message' 事件的监听器,当客户端发来消息时,将其分发给所有连接到服务器的客户端。

当 socket 断开连接时,Socket.io 也会触发一个 'disconnect' 事件,我们在这里为其注册了一个监听器,控制台将输出用户断开连接的消息。

最后,我们通过调用 http.listen() 启动服务器,监听指定的端口。

客户端实现

接下来,我们需要为聊天室创建一个客户端,并将其与服务器进行连接。

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

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

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

在该文件中,我们首先定义了一个简单的 HTML 页面,包括一个包含聊天记录的 ul 元素,一个用于发送消息的表单,以及与服务器进行通信所需的 Socket.io 客户端 JavaScript 文件。

接着,我们实例化了一个 Socket.io 客户端,并将其保存在变量 socket 中。通过从服务器的根路径下载客户端 JavaScript 文件来创建客户端实例。

在聊天消息发送时,表单提交事件被触发,客户端通过调用 socket.emit() 向服务器发送了一个 'chat message' 事件,并将消息内容作为参数发送到服务器。

当服务器向客户端发送 'chat message' 事件时,客户端的 socket 实例将触发一个 'chat message' 事件,并执行相应的回调函数。在这里,我们创建了一个包含消息内容的新 li 元素,并将其添加到聊天记录的 ul 元素中。

至此,我们的聊天室应用已经基本实现了。读者可以 clone 该项目并在本地运行服务端程序,然后在浏览器中访问服务器的根路径,即可进行聊天。

Android 客户端实现

让我们从服务器获取聊天室数据并在 Android 设备上显示聊天记录。

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

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

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

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

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

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

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

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

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

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

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

剩余的代码请看 Github(https://github.com/deepvibes/socket-chatroom)。

在 Android 客户端上,我们使用 RecyclerView 来显示聊天记录,并使用 EditText 和 Button 作为输入控件。

首先,我们在 onCreate() 方法中初始化 RecyclerView,并使用 ArrayAdapter 来包装聊天信息并更新 RecyclerView 中的元素。

接着,我们创建了一个 socket.io 客户端,并为其注册了 'connect'、'chat message' 和 'disconnect' 事件的监听器。在 'connect' 事件的监听器中,我们向服务器发送 'join' 事件,并将用户姓名作为参数。在 'chat message' 事件的监听器中,我们将聊天信息添加到 ArrayAdapter 中,并在 RecyclerView 上更新显示。'disconnect' 事件的监听器获取当 Android 客户端从服务器断开连接时的信息。

在 Activity 销毁时,我们要关闭连接,释放资源。

最后,在按钮点击时,我们获取 EditText 的文本转换为字符串,向服务器发送 'chat message' 事件,并清空 EditText 控件。

小结

通过本文的案例,我们学习了如何使用 Socket.io 在 Node.js 中实现一个实时多人聊天室应用程序,并为其提供了 Android 客户端示例。通过学习此案例,读者可以了解实时通信应用程序的实现方法,并掌握 Socket.io 在其中的应用。如果您对该项目有兴趣,请前往该项目的 Github 主页参考代码。

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

纠错
反馈