基于Vue、socket.io、express和mongoDB的在线群聊

Faker_m 2022-01-16 18:19:10

一、项目简介

本项目是一个基于Vue、express、mongoDB的在线群聊系统。用户注册后可以通过登录进入主页面，在主页面内可接收消息和发送消息。

Vue是一套构建用户界面的渐进式框架。本项目前端设计使用Vue，并使用vue-cli脚手架自动一键生成router.js和store.js。router.js主要用来页面跳转时路由的选择，store.js负责存储状态，本项目主要为account和nickName。

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。本项目后端使用express为前端提供服务。

MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。本项目使用mongoDB存储注册时的用户信息。

前后端通讯使用axios和socket.io。socket不同于http，服务器可以主动向客户端推送信息。

二、项目展示

1.注册页面

如下图所示，注册页面包括三个输入框：账号、昵称、密码，两个按钮login按钮跳转到登录页面、register按钮点击事件为通过axios发送注册数据给后端，若返回的req.data.code为200则跳转到登录页面否则显示错误信息。

注册失败提示失败信息:

2.登录页面

如下图所示，登录页面包含两个输入框分别为账号、密码，两个按钮：register按钮跳转到注册页面，login按钮通过axios发送登录数据给后端，如果后端返回的req.data.code为200则跳转到主页面，否则显示登录错误信息。

登录错误，密码不正确

3.主页面

如下图所示，主页面主要由三个部分组成：chatlog、sendmes、inputmes。

chatlog显示聊天信息，主要有三种聊天信息：登录信息、自己发送的信息、其他用户发送的信息。

登录信息当某一用户进入群聊时显示包括进入时间、昵称；自己发送的信息右对齐显示，其他瀛湖信息左对齐显示包括，包括昵称、发送时间、发送的消息。

shenmes包括用户昵称和两个按钮。change nickName点击后可更改昵称，send按钮将inputmes中内容通过socket发送给后端并显示。

inputmes为一个输入框，可以输入要发送的消息。

点击change nickName弹出输入框，输入nickName后点击change即可更改昵称

三、源代码分析

整个项目源码架构如图所示，client为前端代码，server为后端代码

1.后端代码

后端主要包含三个文件：db.js、api.js、index.js，db.js负责连接数据库

api.js主要负责处理前端的axios请求，包括登录请求：app.get('/api/user/login', function (req, res) {}），注册请求：app.get('/api/user/register', function (req, res) {}），更改昵称请求app.get('/api/change', function (req, res) {}）,session请求app.get('/api/session', function (req, res) {})

app.get('/api/user/login', function (req, res) {}）先对req的数据进行简单的验证，然后查询数据库判断密码是否一致。验证出错时发送res的code为700，并包含错误信息msg否则code为200并返回昵称nickName。

app.get('/api/user/register', function (req, res) {}）注册请求与登录类似,注册成功后将用户信息添加到数据库,以account为主键，nickName可重复。

session请求app.get('/api/session', function (req, res) {})：当登录页面加载时首先通过session请求判断是否有session如果有返回账号昵称，前端直接跳转到主页面，以实现一定时间内的免登录。

app.get('/api/change', function (req, res) {}）前端修改昵称时，将数据库内的用户昵称与前端同步。

index.js负责建立socket连接向前端收发消息。首先进行session设置，及socket跨域设置：

建立连接后socket收发消息,一个是joinToRoom为进入主页面时要发送的消息，emitChat用来接收消息并发送给其他用户。

2.前端代码

前端主要包含五个文件，views文件夹下三个页面和router.js、store.js。

router.js存放路由信息：

store.js负责状态管理：

views下login.vue为登录页面，加载页面时先通过axios请求与后端通信判断session，session未过期时，store存储账号、昵称后跳转到主页面。methods包含两个按钮点击事件的方法。login（）方法中登录失败alert显示信息，登录成功store存储账号密码。

views下register.vue与login.vue类似主要包含两个方法，login（）直接跳转到登录页面，register（）通过axios请求与后方通信根据结果显示信息或跳转页面。

views下home.vue为主页面，data包括账号（account）、昵称（nickName）、修改昵称（change）、聊天信息(chatLog)等数据。在chatlog聊天框内动态渲染主页面，for循环显示chatLog聊天信息。遍历时根据item确定聊天信息显示的样式，mei-li-center样式为进入页面信息的样式，mei-li-right为自己发送的信息样式，mei-li-left为其他用户信息样式。