vue+express+mongodb+websocket 仿QQ即时聊天项目

基于Vue全家桶的仿QQ即时聊天应用

尝试使用Vue做了一个较为完整的全栈项目，支持私聊、登录注册和根据QQ号搜索聊天

Github项目地址：https://github.com/MR158/WeQQChat ，觉得不错麻烦点个star吧！

实现功能

聊天功能
- 私聊
- 列表页排序
- 列表页接收多信息
- 未读信息数
- 保存聊天信息
登录功能
- 保存登录状态
注册功能
- 邮箱验证
JWT机制认证
搜索新建聊天

技术栈

Vue
Vue-router
Vuex
axios
Sass
Swiper
Express
Webpack
JsonWebToken
Mongodb
Socket.io

基本聊天功能的实现

前端，使用vuex做状态管理

//连接服务端socket
this.$store.commit('socket',io.connect('http://localhost:8080/'))//向服务端发送信息
this.getSocket.emit('message','Hello！') //mapGetters获取socket//接收来自服务端的信息
this.getSocket.on('message',(msg)=>{console.log(msg)
})//加入指定房间
this.getSocket.emit('join',roomid)

后端

//socket服务端的监听var server = app.listen(port)
var io = require('socket.io')(server)io.on('connection',(socket)=>{//接收和发送信息socket.on('message',(msg)=>{console.log(msg) //接收的信息//向指定房间发送信息io.sockets.in(roomid).emit('message','服务端收到你的消息了哦')})//加入指定房间socket.on('join',(roomid)=>{socket.join(roomid)})//断开连接socket.on('disconnect',()=>{console.log('断开连接')})
})

一些前端功能的代码

进入聊天房

从列表页进入某聊天房。存储在store中后再在聊天页读取

toChat(chatroom){//inroom存储当前进入的聊天房的信息var inroom = {roomid:chatroom.roomid,roomname:chatroom.roomname,type:chatroom.type,receiver:chatroom.receiver,chatMsgList:chatroom.chatMsgList,lastReadAt:chatroom.lastReadAt}this.$store.commit('changeInroom',inroom)}

接收到新消息

接收新消息后，更新本地聊天信息、显示时间、房间顺序

this.getSocket.on('message',(msg)=>{var chatMsg = {isMe:msg.qqnumber==this.getUser.qqnumber,roomid:msg.roomid,username:msg.username,avatar:msg.avatar,msg:msg.msg,time:this.$moment.tz(msg.time,'Asia/Shanghai').format(),type:msg.type}for(let i = 0;i<this.getChatRoom.length;i++){if(this.getChatRoom[i].roomid==chatMsg.roomid){//更新本地聊天信息、显示时间、房间顺序this.$store.state.chatroom[i].chatMsgList.push(chatMsg)this.$store.state.chatroom[i].lastChatAt = msg.timevar lastChatroom = this.$store.state.chatroom[i]this.$store.state.chatroom.splice(i,1)this.$store.state.chatroom.splice(0,0,lastChatroom)}}})

未读信息数

计算未读信息的数量。因为mongodb存储的是零时区，所以用moment将时间本地化了

    //本地化时间localTime(time){return this.$moment.tz(time,'Asia/Shanghai')},//未读信息数量unread(chatroom){var unreadMsg = []if(chatroom.chatMsgList.length>0){for(let i = 0;i<chatroom.chatMsgList.length;i++){//moment比较时间，对比此房间最后一条消息的更新时间 和 我阅读此房间消息的时间if(this.$moment(this.localTime(chatroom.chatMsgList[i].time)).isAfter(this.localTime(chatroom.lastReadAt))){unreadMsg.push(chatroom.chatMsgList[i])}}return unreadMsg.length}else{return chatroom.unread = 0}}

接收来自陌生人的消息

使用连接socket时设置的socket.id来使陌生人之间通信，接收到消息后给自己本地添加对应的聊天房

//来自对方添加房间的请求this.getSocket.on('addroom',(chatroom)=>{//添加到聊天列表this.$store.commit('addChatRoom',{roomid:chatroom.roomid,roomname:chatroom.roomname,email:chatroom.email,receiver:chatroom.receiver,imgsrc:chatroom.imgsrc,lastChatAt:new Date(),lastReadAt:new Date()-1000*10,type:chatroom.type,chatMsgList:[]})//添加房间socket监听this.getSocket.emit('join',{username:this.getUser.username,chatroom:[chatroom]})})

搜索功能

用debounce自动延迟调用搜索方法

searching: _.debounce(function(){this.$store.commit('changeSearchNotice','搜索中...')this.isCalculating = trueif(this.$validate.isNotEmpty(this.searchtext)&&this.$validate.qqnumber(this.searchtext)){this.$store.dispatch('searchUser',{condition:this.searchtext})setTimeout(function(){this.isCalculating = false}.bind(this),1000)}else{this.$store.commit('changeSearchNotice','未找到您所查询的用户')}},500)

Github项目地址：https://github.com/MR158/WeQQChat

一些后端功能的代码

获取聊天信息

app.get('/chatmsg',function(req,res){var email = req.query.emailChatMsg.find({'$or':[{email:email},{receiver:email}]}).sort({'time':1}).exec((err,chatmsg)=>{if(err){console.log(err)}else{res.json({success:true,chatmsg:chatmsg})}})})

发送邮件验证码

使用的sendcloud邮件服务，对QQ的支持不错

app.post('/send_email',function(req,res){receiveEmail = req.body.emailsendEmailTime = new Date().getTime()/1000//检查发送间隔req.session.sendCount += 1if(req.session.sendCount>1&&sendEmailTime-req.session.sendTime<30){res.json({success:false,notice:'发送过于频繁。'})}else{req.session.sendTime = sendEmailTimeconsole.log('session:'+req.session.sendTime)//生成验证码var char = ['1','2','3','4','5','6','7','8','9','0','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']var random;verificationCode = ''for(let i=0;i<6;i++){do{random = Math.floor(Math.random()*100)}while(random>=char.length)verificationCode+=char[random];}//使用sendcloud发送邮件var apiuser = YOUR_APIUSERvar apikey = YOUR_APIKEYvar from = 'mail@weqq.link'var from_name = 'WeQQ'var subject = '欢迎使用WeQQ'var html = '<p>您本次操作的验证码为：'+verificationCode+'</p><p>10分钟内有效。</p>'var sc = new Sendcloud(apiuser,apikey,from,from_name)var response = ressc.send(receiveEmail,subject,html).then(function(info){response.json({success: true,result: info.message})})}})

JWT的token验证

其实就是想实践一下JWT的方法，用传统的cookie验证一样没什么毛病的。

app.get('/verifyToken',function(req,res){var email = req.query.emailvar token = req.query.tokenif(token&&email){User.findOne({email:email}).exec((err,user)=>{if(user){jwt.verify(token,user.secretKey,(err,decoded)=>{if(err){res.json({success:false,destroy:true,notice:'登录状态已失效。'})}else{console.log('token验证成功')console.log(decoded)res.json({success:true,notice:'token验证成功',email:user.email})}})}else{res.json({success:false,notice:'您还未注册!'})}})}else{res.json({success:false,notice:'未提供token!'})}})

Chatroom的Schema

const mongoose = require('mongoose')
const Schema = mongoose.Schema
const crypto = require('crypto');var ChatRoomSchema = new Schema({roomid:String,email:String,receiver:String,type:String,roomname:String,imgsrc:String,joinAt:{type:Date,default:Date.now()},lastChatAt:Date,lastReadAt:Date
},{collection:'ChatRoom'})ChatRoomSchema.pre('save',function(next){//保存私聊房间IDif(this.type=='single'){var arr = []arr.push(this.md5Crypt(this.email),this.md5Crypt(this.receiver))this.roomid = arr.sort().join('')}else{this.roomid = this.md5Crypt(this.email)}next()
})ChatRoomSchema.methods = {md5Crypt:function(obj){var md5 = crypto.createHash('md5')var result = md5.update(obj).digest('hex')return result}
}var ChatRoom = mongoose.model('ChatRoom',ChatRoomSchema)module.exports = ChatRoom

Github项目地址：https://github.com/MR158/WeQQChat

一些运行画面

登录页面

注册页面

聊天页面

搜索页面

vue+express+mongodb+websocket 仿QQ即时聊天项目相关推荐

高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框
上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理这一篇详细说下拉框的实现原理先上最终效果图一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...
java实现仿QQ即时聊天
这是我的java大作业,这里就直接贴上我的实验报告了. 2.0版已更新地址:Java仿QQ2.0版项目已开源:github地址:imitate-qq 欢迎fork与star 仿微信App:canar ...
Android即时通讯--仿QQ即时聊天：（一）初识Socket
1.即时通讯简介即时通讯(Instant Messaging,简称IM)是一个终端服务,允许两人或者多人通过网络即时传递文字讯息.档案.语音等.简单的概括就是发送消息时,只要对方在线,就能立即接收到 ...
Android即时通讯--仿QQ即时聊天：（五）聊天模块
1.复杂ListView的展示聊天模块其实就是一个复杂的ListView,在数据适配器中,从application中获取到当前登录的用户,与聊天消息中的from参数进行比较,如果两者相同则说明是自己 ...
Web端即时聊天项目实现（基于WebSocket）
Web端即时聊天项目实现项目背景其实这个项目算是我做过的花时间最长也投入心血最多的一个项目了,当时决定开始做这个的时候我几乎什么都不会,那时我个人的情况是: JavaEE方面: 会jsp+ser ...
基于环信的仿QQ即时通讯的简单实现
代码地址如下: http://www.demodashi.com/demo/11645.html 我的博客地址之前一直想实现聊天的功能,但是感觉有点困难,今天看了环信的API,就利用下午的时间动手试 ...
winform服务器消息推送,winform项目——仿QQ即时通讯程序12：服务端程序补充及优化...
原标题:winform项目--仿QQ即时通讯程序12:服务端程序补充及优化上一篇文章大概完成了服务端程序,今天继续做项目的时候发现还有一些功能没有做,还有几处地方不够完善.不做好就会影响客户端程序的 ...
vue如何对接网易云信IM即时聊天
vue如何对接网易云信IM即时聊天? 示例:官方Demo跑不通且API看起来太复杂,这里直接提取直接能跑通的代码,拿去即可使用使用步骤 1.引入库首先引入网易云信的Web API: 2.全局引入 ...
ktv点歌系统 Vue +Express+ Mongodb
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 ktv点歌系统 Vue +Express+ Mongodb 前言一.技术栈二.功能介绍 1.本项目分前台开发,后台开发和服务器开发 ...
C++实现飞鸽传书仿QQ即时通讯软件！（源码打包好了！）
FreeEIM 仿QQ功能的企业即时通讯软件VC++的源代码,最后更新于2010年8月份,完成数据库更改的任务.将聊天记录改用数据库形式,暂且使用Access. 本软件的窗口和功能都与QQ有点相似,可 ...