基于Express+Socket.io+MongoDB的即时聊天系统的设计与实现

记得从高中上课时经常偷偷的和同学们使用qq进行聊天，那时候经常需要进行下载qq，但是当时又没有那么多的流量进行下载，这就是一个很尴尬的事情了，当时就多想要有一个可以进行线上聊天的网站呀，不用每次痛苦的进行蓝牙传送软件了，现在，我从事了IT这个行业，便想要去实现当初的那个梦想吧。毕竟，不去努力的实现梦想，你会从一个梦想家变成一个幻想家。

由于从事的是前端工作,界面什么的对我来说是so easy，后台部分当然是选择了node.js，经过分析呢，数据库部分选择了mongoose,很早之前做个一个简易的聊天室，采用的是ajax轮询后台的方式实现的，这种方式对于服务器的压力很大，而且在用户量上去的的时候也会出现卡顿的现象，客户端和服务器通信使用的是webSocket协议。使用WebScoket协议，我们可以实现客户端和服务器的全双工通信，实现实时的服务器向客户端的消息推送，信息返回。由于浏览器对于WebScoket的支持性不是特别普遍，所以我们使用的是封装了WebScoket的socket.io，socket.io可以适配于所有的浏览器，因此，我们使用socket.io来实现客户端和服务端的通信。

选中MongoDB是因为它的简便性以及易操作性，聊天系统并不是说必须要严格遵守例如MysqL的CUID等准则，它允许我们可以延迟个几百毫秒收到聊天信息，其优点主要有：

（1）mongodb数据库体积较小，系统运行时较为灵活。
（2）可以提供对于任意类型的数据的查询。
（3）使用相应的技巧可以降低我们代码量以及提升查询速度。
（4）mongodb可以对我们之前的表格进行预加载。

我们简要的选择了我们要使用的技术，那么我们还需要对要做的产品进行分析设计，分析出来我们要做的产品都有哪些功能，我们要怎么样去实现这些功能，根据之前对于聊天系统的认知，我们设置系统的功能暂时分为后台管理系统和前台聊天室。其中后台管理系统有当前用户管理功能、聊天信息管理功能、而前台聊天室拥有添加好友、删除好友、好友私聊、群组群聊、修改密码、修改个人信息等功能。大概的功能模块图如下所示：

经过上部分的分析，我们队系统有了初步的认知。该系统分为两个主体，用户登录后的主页即为聊天室主页如图1所示。系统管理员登录后的主页即为adminChat.ejs如图2所示。

                                    图1  聊天室主页

                                    图2  后台管理主页

登录模块">1 登录模块

由于是聊天系统，所以用户必须先要经过登录才能进入聊天室或者后台管理系统。因此系统的首页便是登录页，在登录页也可以进行注册。下面以“登录”功能进行主要讲解。在登录界面，主要使用ajax去异步判断是否能登录成功，如果数据库中没有该用户，会提示用户前去注册，采用MVC设计模式。其运行界面如图3所示。

                                    图3  登录界面

登录界面前台代码如下：

//Form表单的提交控件代码
    
         用户名
         用户名">

//登录操作 router.post('/login',function(req,res,next) { //判断用户名是否存在 User.findOne({username:req.body.username},function (error,user) { if (!user) { //用户名不存在 error = "用户名不存在,请先去注册"; }else if (req.body.password !== user.password) { error = "密码输入错误"; } if (error) { req.session.error = error; //跳转路由 return res.redirect('/login'); } req.session.success = '登录成功'; //跳转到首页 req.session.user = user; if(user.username === 'weChatAdmin'){ //如果是管理员登录,就登录到管理员界面 res.render('adminHome',{user:user}); }else{ res.render('chatHome',{user:user}); } }) });

//注册操作 router.post('/reg',next) { //1.查询数据库,判断当前的用户名是否存在 User.findOne({username:req.body.username},user) { //用户已经存在 if (user) { //console.log('用户已经存在'); error = "该用户名已存在,请重新输入"; }else if (req.body.password !== req.body.repassword) { error = "两次密码输入不一致"; //console.log("两次密码输入不一致"); } if (error) { //将错误存入session req.session.error = error; //回到注册页面 return res.redirect('/reg'); }

User.find({username:req.body.username},function(error,user){ if(error){ res.send({ status:8000,msg :"查询用户列表失败"}); }else{ res.send({status:200,user:user}); } })；

$.ajax({ type:'post',dataType:'json',data:queryData,url:'/compileUserInfo',success:function(data){ if(data.status == 200){ alert(data.msg); $('#compileUserInfoModel').modal('hide');//成功后将模态框关闭 //在这里进行input值得初始化 }else{ alert(data.msg); } },error:function(e){ alert(e); },})

router.post('/compileUserInfo',next){ var username = req.body.username; var oldValue = {username:req.body.username}; varnewValue= {$set:{username:req.body.username,mail:req.body.mail,phone:req.body.phone,country:req.body.country,city: req.body.city}}; User.update(oldValue,newValue,function(err,result){ if(err){ res.send({status:8000,msg:"编辑用户信息失败"}); }else{ res.send({status:200,msg:"编辑用户信息成功"}); } }) });

图7 修改用户密码界面后台sql代码如下：</code></pre> <pre class="js">User.update({username:username},{$set:{password:newPassword}},result){ if(err){ res.send({status:8000,msg:"修改用户密码失败"}); }else{ res.send({status:200,msg:"修改用户密码成功"}); } });

图8 添加好友界面向特定的用户发送好友请求，是通过socket.io来实现的，具体实现的代码如下：用户列表中的聊天室用户绑定点击事件，在事件中会先去判断该用户是否已经是本用户的好友，代码如下：

document.getElementById('userListWrapper').addEventListener('click',function(e) { var target = e.target; if (target.nodeName.toLowerCase() == 'li') { //判断当前要添加的用户是否已经是自己的好友 $.post('/judgeFriend',{master:USERNAME,friend:target.innerHTML},function(data,status){ if(data.status == 300){ alert(data.msg); }else{ that.socket.emit('sendFriendReq',target.innerHTML,USERNAME); } } ); //向特定的好友发送好友请求 }; },false);

socket.on('sendFriendReq',function(toOne,fromOne){ //服务器server.js端执行的代码。相应的去触发每个用户的addFriReq事件。 socket.broadcast.emit('addFriReq',toOne,fromOne); }); //客户端对于服务器端的addFriReq事件进行处理。 this.socket.on('addFriReq',fromOne){ var toOne = toOne,fromOne = fromOne; if(toOne==USERNAME){ //alert(fromOne+'请求添加你为好友'); var confirmReq = confirm(fromOne+'请求添加你为好友'); if(confirmReq){ //发送消息告诉fromOne同意了好友请求，同时将该好友添加至好友列表中 that.socket.emit('agreeReq',fromOne); }else{ //发送消息告诉fromOne拒绝了好友请求 that.socket.emit('refuseReq',fromOne); } } });

$.ajax({ type :'post',url :'/getChatMsg',data : {sayto:sayto,fromto:user},success : function(data){ if(data.status===200){ console.log(data.msg); container.innerHTML=''; for(var i=0;i' + data.msg[i].content; container.appendChild(msgToDisplay); container.scrollTop = container.scrollHeight; } } },

router.post('/msgList',next){ var sendMsg = req.body.sendMsg; var acceptMsg = req.body.acceptMsg; var pageIndex = req.body.pageIndex; var pageSize = req.body.pageSize; var searchData = {}; if(sendMsg!=""&& sendMsg!=null){ searchData.username = sendMsg; } if(acceptMsg!="" && acceptMsg !=null){ searchData.sayto = acceptMsg; } var a = 0; var msgCount = ""; Message.find({},msgList){ msgCount = msgList.length; Message.find(searchData) .skip(parseInt(pageIndex)*parseInt(pageSize)) .limit(parseInt(pageSize)) .exec(function(error,msgList){ res.send({ msgList:msgList,totalPages:Math.ceil(msgCount/pageSize),totalElements:msgCount }); }); }); });

基于Express+Socket.io+MongoDB的即时聊天系统的设计与实现

经过上部分的分析，我们队系统有了初步的认知。该系统分为两个主体，用户 登录后的主页即为聊天室主页如图1所示。系统管理员 登录后的主页即为adminChat.ejs如图2所示。

`图1 聊天室主页`

`图2 后台管理主页`

登录模块">1 登录模块

聊天交友，难免会有人看谁不顺眼，恰巧这个人又是该用户的好友，这时就想要将此好友给删了，这时在好友列表中对着该好友右键，便可选择将该好友删除。其界面如上图9所示。

当系统用户想要进行方便且快速的传播消息时，这时用户可以使用群聊功能，在左侧群组列表里点击相应的聊天群，便可以进入到相应的群组聊天室，在这里所有的用户可以畅所欲言。效果如图11所示。

`图11 好友群聊界面`

代码开源">代码开源

猜你在找的Express 相关文章

基于Express+Socket.io+MongoDB的即时聊天系统的设计与实现

经过上部分的分析，我们队系统有了初步的认知。该系统分为两个主体，用户登录后的主页即为聊天室主页如图1所示。系统管理员登录后的主页即为adminChat.ejs如图2所示。 图1 聊天室主页 图2 后台管理主页

登录模块">1 登录模块

聊天交友，难免会有人看谁不顺眼，恰巧这个人又是该用户的好友，这时就想要将此好友给删了，这时在好友列表中对着该好友右键，便可选择将该好友删除。其界面如上图9所示。

当系统用户想要进行方便且快速的传播消息时，这时用户可以使用群聊功能，在左侧群组列表里点击相应的聊天群，便可以进入到相应的群组聊天室，在这里所有的用户可以畅所欲言。效果如图11所示。 图11 好友群聊界面

首先要安装的是node.js环境，安装好之后会自带有npm 然后使用npm install安装所需的各个第三方组件，这些组件在package.json中都已有，只需install就行了

代码开源">代码开源

猜你在找的Express 相关文章

经过上部分的分析，我们队系统有了初步的认知。该系统分为两个主体，用户登录后的主页即为聊天室主页如图1所示。系统管理员登录后的主页即为adminChat.ejs如图2所示。

`图1 聊天室主页`

`图2 后台管理主页`

当系统用户想要进行方便且快速的传播消息时，这时用户可以使用群聊功能，在左侧群组列表里点击相应的聊天群，便可以进入到相应的群组聊天室，在这里所有的用户可以畅所欲言。效果如图11所示。

`图11 好友群聊界面`