基于jQuery/express/socket.io实现的匿名聊天室

关键词

前后端分离、jQuery、Ajax、express、mongoose、template模板引擎、cookie身份识别、JS动画、图片文件上传、分页、express中间件、定时删除、级联删除、倒计时、滚动条位置调整、回退自动刷新、轮询、websocket

目录

 前言

项目介绍

功能实现

将Ajax请求的分页数据拼接在template模板中渲染

C3盒子模型完美实现房间信息的展示

前后端共用一个昵称池js文件

FormData实现带文件的表单提交

如何实现房间的定时删除，及相关信息的级联删除？

socket.io实现Websocket通信

写在最后

---

前言

项目源码：https://github.com/will-iu/chat

php原版博客链接：https://blog.csdn.net/qq_42748385/article/details/103995128

项目介绍

这个项目对上一个PHP实现的匿名聊天室进行了改写，采用的前后端分离开发，后端使用NodeJs的express框架，使用mongoose模块操作数据库mongoDB，利用template模板引擎将后端返回的数据渲染在前端，客户端使用jquery封装好的ajax请求，聊天页面使用socket.io实现的多人即时通讯，并且对前端样式进行了优化，代码相比规范了许多。

下图是项目目录结构及服务器端使用的一些第三方模块，

public 文件夹存放静态资源文件，包括前端的html页面文件、css文件夹、js文件夹、前端使用的插件、img系统图片、upload用户上传的图片文件等。

index.html首页

页面实现有三个功能，用户将鼠标放在“说明书”字体图标上，会有C3动画显示出网站的使用指南，另外两个按钮点击后会进入聊天室大厅页面，两个按钮的区别是，后者会先清除此网站的cookie，这里简单说一下，网站是靠cookie识别用户身份，因为是匿名聊天室，所以数据库没有user这个集合，整体的页面样式是仿照mongoose官网写的。

room.html页面

聊天室大厅页面，当用户点击顶部的tab选项卡会向服务器发送ajax请求查询房间信息及页码信息渲染在客户端，并且tab选项卡切换时样式也会发生改变，而且相比上一个项目增加了创建带有图片的房间，用户选择图片后也会回显在客户端，若不选择图片则使用系统图片。当鼠标停留在房间上会显示房间描述信息，房间人数达到上限时修改样式且不可选中。分页的前后页按钮也会根据是否达到第一页和最后一页变得不可选中。

chat.html页面

当点击任意房间或创建房间后会携带房间id跳转到聊天页面，如果是第一次加入房间会随机分配一个不重复昵称，右上角会倒计时显示房间的剩余时间，当时间截至时，将自动退出并提示房间已销毁。如何退出房间？用户可以点击背景中的门退出房间，但考虑到会有用户使用浏览器的回退功能返回上一页，使用这种方法退出的房间还需要自动执行一遍刷新才能在“已加入房间”的列表中看到新加入的房间。
下面测试socket实现的多人即时聊天，

这里我使用了两个浏览器做测试，因为同一个浏览器的多个标签页还是会使用一个cookie，不能当作两个身份。使用socket的广播功能，可以实现在同一个房间里，任意一方发的消息会被同房间所有人接收到，请忽略录制软件的画质问题……

功能实现

记录几个相对重要的功能是如何实现的，和遇到的一些问题

将Ajax请求的分页数据拼接在template模板中渲染

项目里用到Ajax的地方很多，拿客户端room.js文件举例说明，有一个获取“加入的房间”列表的函数，这个函数在页面加载、点击顶部tab选项卡和底部的页码时调用，函数会接受一个page的参数，如果没有向函数传入参数，page会默认等于1，比如点击tab时。
然后就使用jQuery封装好的Ajax向服务器端发送get请求，请求成功会把获取到的数据拼接到定义好的模板里。

// 向服务器端发送请求 获取房间信息
function getMyRoom(page = 1) {
    $.ajax({
        type: 'get',
        url: '/myRoom/' + page,
        success: function (response) {
            // console.log(response)
            // 将获取的数据与html定义的模板拼接
            var myRoomHTML=template('myRoomTpl', response);
            // 将拼接好的html代码插入到目标节点下
            $('#myRoom').html(myRoomHTML);
            // 页码模板渲染
            $('#pageBox1').html(template('pageTpl1', response));
        }
    })
}

下面是服务器端定义的路由代码，用来响应客户端的http请求，因为一并实现了分页功能，代码有些长。在写代码时，先想清楚要给客户端返回哪些数据，在这里除了返回数据库查询的所有房间信息，还有实现分页会用到的当前页、总页数等，我还额外返回了一个页码的数组”[0,1,2...]“，因为这比较方便模板直接拼接。在这说一下populate，是express框架提供数据库关联查询的方法，使用前提是集合规则里定义了ref外键。

// 获取已加入房间的信息
app.get('/myRoom/:page', async (req, res) => {
    // '+'将字符型转为Number类型，为统一返回的数据格式
    let page = +req.params.page;
    let num = 18;
    let totalPage = 0;
    let display;
    // 获取集合中的文档总数，count已被废弃，支持回调
    Role.countDocuments({
        user_id: id
    }, function (err, count) {
        // page总页数
        totalPage = Math.ceil(count / num);
        // 创建一个 1~n 的数组