摘要：主要表現(xiàn)在復(fù)雜的語句事務(wù)支持等。僅支持，在等瀏覽器中，會出現(xiàn)樣式布局混亂的情況。將群群對應(yīng)的聊天記錄保存在數(shù)據(jù)庫。用戶進(jìn)入群聊，則將其加入到對應(yīng)的中。文件大小不能超過通過模塊操作登錄注冊將用戶名作為唯一值。登錄支持自動登錄，將密碼保存在中。

服務(wù)器源碼地址：https://github.com/ermu592275254/chat-socket
網(wǎng)頁源碼地址：https://github.com/ermu592275254/chat-socket

使用nodejs搭建后臺，因?yàn)槭且粋€(gè)單頁應(yīng)用，并且前后端通信使用了webSocket，所有只用http模塊搭建一個(gè)簡單的服務(wù)器，未使用koa、express等web框架。

使用socket.io實(shí)現(xiàn)webSocket，前端通過import socket.io 的方式會出現(xiàn)不斷重連的情況，于是使用script方式實(shí)現(xiàn)。

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

// or script

使用mongoose操作mongodb。mongodb這類非關(guān)系型數(shù)據(jù)庫，功能較關(guān)系型數(shù)據(jù)庫閹割了許多。主要表現(xiàn)在復(fù)雜的sql語句、事務(wù)支持等。

使用vue以及vue的衍生產(chǎn)品，同時(shí)用到bootstarp作為樣式框架。簡單兼容了PC和移動。（PC僅支持chrome，在firefox、ie等瀏覽器中，會出現(xiàn)樣式、布局混亂的情況）。

通過用戶名和socketId進(jìn)行匹配。保存用戶每次登錄的socketId，當(dāng)對方在線時(shí)，將此信息通過socketId發(fā)送給對方。不在線僅保存到數(shù)據(jù)庫，用戶上線即可在私聊中查看。目前不支持消息通知，也不支持未讀消息

...// 每次登錄都將socketId替換為當(dāng)前登錄的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
                        };
                        // 如果對方在線就發(fā)送給對方
                        if (io.sockets.connected[user.socketId]) {
                            io.sockets.connected[user.socketId].emit("newMessage", receiverData);
                        }
                        let senderData = {
                            receiver: data.receiver,
                            data: newChat
                        };
                        // 同時(shí)也發(fā)送給自己（也可直接在前端添加，后端不發(fā)送）
                        io.sockets.connected[socket.id].emit("newMessage", senderData);
                    }).catch(err=>{
                        io.sockets.connected[socket.id].emit("err", "can`t find the newMessage")
                    })

通過broadcast實(shí)現(xiàn)組發(fā)送。將群、群對應(yīng)的聊天記錄保存在數(shù)據(jù)庫。用戶進(jìn)入群聊，則將其加入到對應(yīng)的broadcast中。

 socket.on("joinRoom", function(data) {
            if (!common.checkData(data)) {
                io.sockets.connected[socket.id].emit("err", "request params Can`t be empty");
                return;
            }
            // 加入對應(yīng)的群聊
            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){
                            // 發(fā)送給自己
                            io.sockets.connected[socket.id].emit("newMsgOfGroup", res);
                            // 將消息發(fā)送給群里的所有人除了自己
                            socket.broadcast.in(data.groupName).emit("newMsgOfGroup", res);
                        } else {
                            io.sockets.connected[socket.id].emit("err", "the message data is null");
                        }

同樣使用webSocket，將頭像ID保存在用戶信息表中，將圖片文件保存在服務(wù)器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");
            })
        }
    })
});

將用戶名作為唯一值。注冊時(shí)不能注冊已存在的用戶名。登錄支持自動登錄，將密碼保存在localStorage中。

最后： 這是本菜雞陸陸續(xù)續(xù)做了一年的項(xiàng)目，多次放棄又重新拾起。代碼寫得不堪入目，沒有精力和激情再去做優(yōu)化了。暫時(shí)先這樣吧......