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

服務器源碼地址：https://github.com/ermu592275254/chat-socket
網頁源碼地址：https://github.com/ermu592275254/chat-socket

使用nodejs搭建后臺，因為是一個單頁應用，并且前后端通信使用了webSocket，所有只用http模塊搭建一個簡單的服務器，未使用koa、express等web框架。

使用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

使用mongoose操作mongodb。mongodb這類非關系型數據庫，功能較關系型數據庫閹割了許多。主要表現在復雜的sql語句、事務支持等。

使用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中。

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