vue2.0开发聊天程序(八)初步完成

项目地址

服务器源码地址：https://github.com/ermu592275254/chat-socket
网页源码地址：https://github.com/ermu592275254/chat-socket

项目设计概述

相关技术

nodejs

使用nodejs搭建后台，因为是一个单页应用，并且前后端通信使用了webSocket，所有只用http模块搭建一个简单的服务器，未使用koa、express等web框架。

webSocket

使用socket.io实现webSocket，前端通过import socket.io 的方式会出现不断重连的情况，于是使用script方式实现。

const io = require('socket.io-client');
// or with import syntax
import io from 'socket.io-client';
// or script




mongodb

使用mongoose操作mongodb。mongodb这类非关系型数据库，功能较关系型数据库阉割了许多。主要表现在复杂的sql语句、事务支持等。

vue

使用vue以及vue的衍生产品，同时用到bootstarp作为样式框架。简单兼容了PC和移动。（PC仅支持chrome，在firefox、ie等浏览器中，会出现样式、布局混乱的情况）。

功能点实现

私聊

通过用户名和socketId进行匹配。保存用户每次登录的socketId，当对方在线时，将此信息通过socketId发送给对方。不在线仅保存到数据库，用户上线即可在私聊中查看。目前不支持消息通知，也不支持未读消息

...// 每次登录都将socketId替换为当前登录的socketId
userModel.update({username: data.username}, {socketId: socket.id}).then(res => {
socket.emit('login', user);
}).catch(err => {
console.log(err);
socket.emit('err', 'update user socketId was failed');
});
...

chatModel.findOne({sendTime: time}).populate('sender receiver').then(newChat=>{
let receiverData = {
receiver: data.sender,
data: newChat
};
// 如果对方在线就发送给对方
if (io.sockets.connected[user.socketId]) {
io.sockets.connected[user.socketId].emit('newMessage', receiverData);
}
let senderData = {
receiver: data.receiver,
data: newChat
};
// 同时也发送给自己（也可直接在前端添加，后端不发送）
io.sockets.connected[socket.id].emit('newMessage', senderData);
}).catch(err=>{
io.sockets.connected[socket.id].emit('err', 'can`t find the newMessage')
})

群聊

通过broadcast实现组发送。将群、群对应的聊天记录保存在数据库。用户进入群聊，则将其加入到对应的broadcast中。

socket.on('joinRoom', function(data) {
if (!common.checkData(data)) {
io.sockets.connected[socket.id].emit('err', 'request params Can`t be empty');
return;
}
// 加入对应的群聊
socket.join(data.groupName, function() {
let roomName = Object.keys(socket.rooms);
io.to(data.groupName, `${data.username} has joined the room`);
socket.broadcast.in('data.groupName').emit('newUserJoin', {
groupName: data.groupName,
username: data.username
})
});
})

groupChatModel.findOne({'sendTime': time}).populate('sender').then(res=>{
if(res){
// 发送给自己
io.sockets.connected[socket.id].emit('newMsgOfGroup', res);
// 将消息发送给群里的所有人除了自己
socket.broadcast.in(data.groupName).emit('newMsgOfGroup', res);
} else {
io.sockets.connected[socket.id].emit('err', 'the message data is null');
}

头像上传

同样使用webSocket，将头像ID保存在用户信息表中，将图片文件保存在服务器static文件夹中。

uploadIcon(){
let file = this.$refs.uploadEl.files[0];
console.log(file);
if(file.size > 100000){
this.Toast('文件大小不能超过1M');
this.$refs.uploadEl.value = '';
return;
}
let data = {
username: this.user.username,
file: file,
type: file.type.split('/')[1]
};
socket.emit('uploadUserIcon', data);
this.$refs.uploadEl.value = '';
}

socket.on('uploadUserIcon', function(data) {
let time = new Date().getTime();
let savePath = `/static/userIcon/${time}.${data.type}`;
let hostPath = 'http://' + host + ':' + port;
// 通过fs模块操作
fs.writeFile('.'+ savePath, data.file, function(err) {
if (err) {
console.log(err);
io.sockets.connected[socket.id].emit('err', 'save userIcon failed');
} else {
userModel.update({username: data.username}, {$set: {userIcon: hostPath + savePath}}).then(res => {
userModel.findOne({username: data.username}).then(user=>{
io.sockets.connected[socket.id].emit('uploadUserIcon', {
user: user,
message: 'upload userIcon success'
});
}).catch(err =>{
io.sockets.connected[socket.id].emit('err', 'find userInfo failed');
});
}).catch(err => {
io.sockets.connected[socket.id].emit('err', 'save userIcon path failed');
})
}
})
});

登录注册

将用户名作为唯一值。注册时不能注册已存在的用户名。登录支持自动登录，将密码保存在localStorage中。

待处理bug以及优化

打包后静态资源路径有问题（有没有大神能帮帮我QAQ）

需要未读消息小红点

增加表情、图片发送

最后： 这是本菜鸡陆陆续续做了一年的项目，多次放弃又重新拾起。代码写得不堪入目，没有精力和激情再去做优化了。暂时先这样吧&＃8230;&＃8230;