Socket.io 实现多房间聊天系统

随着互联网的发展，即时通讯已经成为了生活中不可缺少的一部分。而多房间聊天系统则是一种常见的即时通讯方式。本文将介绍如何使用 Socket.io 实现一个多房间聊天系统，并提供完整的示例代码和学习指导。

Socket.io 简介

Socket.io 是一个基于事件驱动的实时双向通信库。它可以实现客户端和服务器之间的实时通信，并且可以支持多种协议，如 WebSocket、HTTP 长轮询等。

使用 Socket.io 可以方便地实现多人聊天、实时游戏、在线编辑等功能，而且使用也非常方便，只需要在客户端和服务器端分别引入相应的库即可。

多房间聊天系统实现

接下来就让我们使用 Socket.io 来实现一个简单的多房间聊天系统。这个聊天系统有以下功能：

  • 支持多房间，用户可以在不同的房间发送消息
  • 实时更新在线用户列表
  • 支持发送图片和表情
  • 超过一定长度的聊天记录自动清除

服务器端实现

首先我们需要启动一个 Node.js 服务器，并安装 socket.io 库。

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

然后我们创建一个名为 app.js 的文件，并在其中编写以下代码：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在上面的代码中，我们先初始化了一个 express 应用，并创建了一个 http 服务器。然后我们使用 socket.io 库创建了一个 socket 实例，并监听 connection 事件，这个事件会在客户端连接成功后触发。

接下来我们使用 socket 的 join 方法将客户端加入相应的房间，并且记录在线用户。然后我们向房间内所有用户发送了一个 update 事件，这个事件用于实时更新在线用户列表。

当用户离开房间时，我们使用 leave 方法将客户端从房间中移除，并且从在线用户列表中删除该用户。同样要向房间内所有用户发送一个 update 事件。

当用户发送消息或图片时，我们也会向房间内所有用户发送一个 message 或 image 事件。

客户端实现

接下来让我们编写客户端代码，先创建一个 index.html 文件，并引入 socket.io 库。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在上面的代码中，我们先创建了一个用户登录界面和一个聊天室界面。在登录时需要填写昵称和房间号，并发送 join 事件。当登录成功后，会隐藏登录界面，显示聊天室界面，并实时更新在线用户列表。

在聊天室界面中，我们使用了两个表单来发送消息和图片，并监听了这两个表单的 submit 事件，一旦用户提交了消息或图片，就会发送相应的 message 或 image 事件到服务器。

同时还监听了 server 发送的三种事件：更新事件、消息事件和图片事件，并在接收到这些事件后进行相应的操作。

总结

本文详细介绍了如何使用 Socket.io 实现一个多房间聊天系统，并提供了完整的示例代码和学习指导。Socket.io 是一个很好的实时通讯库，可以在多人聊天、实时游戏、在线编辑等场景中使用。但需要注意的是，Socket.io 并不能解决所有的实时通讯问题，在使用时需要根据实际场景选择合适的通讯库。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64df1d83f6b2d6eab3a47562

阅读全文

猜你喜欢

  • Vue.js 开发小技巧-实现基于时间轴的动画效果

    随着现代 Web 应用程序的崛起，动画效果在前端开发中已成为一个必不可少的特性。在本文中，我们将介绍如何使用 Vue.js 实现一个基于时间轴的动画效果。 实现目标 在本文中，我们将创建一个基于时间轴...

    1 年前
  • JavaScript 异步编程的进阶 ——ES8 的 async/await 详解

    异步编程的背景 JavaScript 是一种单线程的语言，当程序执行到有耗时操作的代码时，例如请求后端接口、读取文件等，就需要等待这些操作完成后才能继续执行下面的代码，如果使用传统的同步执行方式，程序...

    1 年前
  • 使用 Jest 测试 Firebase Cloud Functions

    Firebase 是一个由 Google 提供的后端服务平台，它提供了丰富的功能，包括实时数据库、云存储、云函数等等。其中，云函数可以让前端和后端进行良好的分离，从而方便开发和维护。

    1 年前
  • ES7 中的 Object.getOwnPropertyDescriptors 方法在对象浅拷贝中的应用

    随着前端技术的发展，越来越多的新特性被加入了 JavaScript 中，其中包括 ES7 中的 Object.getOwnPropertyDescriptors 方法。

    1 年前
  • ES11 中的区域变量提升

    ES11 中的区域变量提升 在 JavaScript 中，变量的提升是一种常见的现象，尤其是在使用 var 关键字声明变量时。但是在 ES6 中引入了 let 和 const 关键字，它们可以避免变量...

    1 年前
  • 在 Angular 中使用HTTP interceptor来添加全局 Header

    HTTP Interceptor 是 Angular 提供的一种拦截 HTTP 请求和响应的机制。使用 Interceptor 可以全局管理 HTTP 请求，例如添加请求头、响应拦截等，这可以帮助我们...

    1 年前
  • 使用 Server-Sent Events 实现实时在线客服系统

    随着互联网的普及，越来越多的企业需要提供在线客服服务。传统的在线客服系统通常需要用户手动刷新页面或者使用轮询技术来获取最新消息。这种方式不仅效率低下，还增加了服务器负担和网络流量。

    1 年前
  • CSS Reset 错误排查方法

    前言 在进行前端开发时，我们经常会遇到各种不同样式的问题，其中一个最常见的问题就是页面样式出现了异常的情况。这些异常可能是由于浏览器的默认样式导致的，通常我们可以通过“CSS Reset”清除默认的样...

    1 年前
  • 如何使用 Nginx 提升网站性能？

    前言 随着互联网的普及，越来越多的网站被大众所关注。然而，网站性能是网站用户评价的重要因素之一。如果一个网站的性能不佳，那么它的用户体验将直接受到影响。对于一个前端工程师来说，如何提升网站性能是一个重...

    1 年前
  • 解决使用 Express.js 时出现的 CORS 跨域问题

    什么是 CORS CORS（Cross-Origin Resource Sharing）指的是跨域资源共享，是由浏览器的同源策略所限制的，但是浏览器使用 CORS 可以绕过同源策略，实现跨域访问。

    1 年前
  • 独乐乐不如众乐乐：RxJS6 中的「多播」操作符

    在 RxJS6 中，我们可以使用「多播」操作符来实现一次订阅多处响应的效果，这对于一些需要同时处理多个响应的业务场景非常有用。本文将深入讨论 RxJS6 中的「多播」操作符，包括其原理、使用方法、示例...

    1 年前
  • 在 Web Components 中如何实现打印功能

    随着 Web 技术的不断发展和更新，Web Components 组件化开发已经成为了前端开发的一个热门话题。不过，在实际应用中，Web Components 还存在某些限制，比如无法直接使用 win...

    1 年前
  • Material Design 中的多样性与一致性的平衡取舍方法

    作为一种现代化的设计语言，Material Design 在界面设计中越来越被广泛应用。在这种设计语言中，同时注重多样性和一致性是一个充满挑战的问题，它需要我们不断探索和寻找平衡点。

    1 年前
  • CSS Flexbox 布局的实现及兼容问题解决

    在前端开发中，布局是一个非常重要的部分，因为它直接关系到页面的结构和样式。CSS Flexbox 布局是一种比较新的布局方式，它可以帮助我们更轻松地实现复杂的布局效果。

    1 年前
  • JavaScript 中使用 ECMAScript 2021 解决对象属性枚举的问题

    在 JavaScript 中，对象属性的枚举一直是一个引起开发者烦恼的问题。传统的方法是通过 for-in 循环来遍历对象的属性，但是这种方法会枚举原型链上的所有属性，而且还可能会枚举到一些不可枚举的...

    1 年前
  • PM2 的进程管理和监控方法详解

    什么是 PM2？ PM2 是一个 Node.js 应用程序的进程管理器，它可以帮助我们管理和监控 Node.js 应用程序的运行过程。使用 PM2 不仅可以方便地启动、停止和重启 Node.js 应...

    1 年前
  • SASS 中的变量声明和赋值技巧

    引言 SASS 是一种 CSS 预处理器，能够让开发者使用更人性化的方式来编写 CSS，提高开发效率和代码复用性。其中，变量是 SASS 中非常重要的一个概念，本文将详细介绍 SASS 中的变量声明和...

    1 年前
  • Sequelize 如何处理枚举类型？

    前言 Sequelize 是一个基于 Node.js 的 ORM（Object-Relational Mapping）框架，它提供了强大的数据模型定义和查询功能，可以方便地编写数据库相关的代码。

    1 年前
  • Redux 异步操作优化实例——Promise vs Generator

    在现代的前端开发中，异步操作已成为不可避免的事情。在 Redux 中，我们经常需要使用异步操作来完成一些复杂的逻辑，例如发送网络请求或进行计算等等。但是，如何正确地管理异步操作，并保证程序的稳定性和性...

    1 年前
  • RESTful API 设计最佳实践之请求 / 响应格式

    RESTful API 是目前业界广泛使用的一种 API 设计架构，它基于 HTTP 协议，通过 URL 定位资源的方式，实现数据的增删改查。在前端开发中，我们通常都需要与后端的 RESTful AP...

    1 年前

相关推荐

    暂无文章