Vchat

【從頭到腳】擼一個社交聊天系統（vue + node + mongodb）- ???Vchat

說明

不再維護

該項目是自己學習的時候寫的，有些地方可讀性較差（如mongo 部分大量回調），有需要的同學審慎閱讀，謝謝。

分支代碼為線上版，做了相應改動。如默認加入聊天群、後端為適應linux部分代碼調整等，建議拉取master。

項目啟動

注意必須要有node、npm以及mongodb，項目默認mongodb IP地址為127.0.0.1:27017，可以在配置文件中修改。 （chatServerutilsdatabase.js）

    cd chatRoom
    npm install 安装前端依赖
    npm run build 编译前端代码
    cd ..
    cd chatServer
    npm install 安装后端依赖
    npm run create 初始化数据库（号码池、表情包）
    npm start 启动服务
    在浏览器中打开 localhost:9988 即可

前言

---

項目開始是因為工作需要一個聊天室功能，但是因為某些原因最終選用的是基於xmpp協議的Strophe.js寫的。於是就想用node自己寫一套，本來只是想簡單的寫個聊天頁面，但是寫完了又不滿意，所以不斷的重構（似乎可以理解產品經理為什麼老是改需求了๑乛◡乛๑）。

很多東西，比如mongodb，我也是第一次用，以前只接觸過mysql。所以都是一邊學一邊寫，利用工作之餘的時間，斷斷續續的寫了幾個月（這次講的是V0.9.0版本，項目還在更新中···），包含了一整套的前後端交互。 uI是按照自己的感覺來的，沒有設計天分（話說主題切換到現在還只有一套主題，實在是不好設計啊~），輕噴---。項目還有很多需要優化完善的地方，歡迎大家提到issues（文末有q群，歡迎一起學習交流）。

閒話少說，本文主要講項目的設計流程，以及部分功能實現思路。對項目感興趣的同學請移步源碼Vchat — 從頭到腳，擼一個在線聊天的web應用（vue + node + mongodb)。

*這是分隔線---------------------------------------深夜碼字，最近真冷

相關地址

• 掘金
• 知乎

項目架構

• 技術棧

前端主要採用了vue全家桶，沒什麼多說的，腳手架構建項目，vuex狀態管理，vue-router控制路由，axios進行前後端交互。後端是基於node搭的服務，用的是express。我為什麼不用koa呢，純粹是圖方便，因為koa不熟（捂臉）。聊天最重要的當然是通信，項目用socket.io來進行前後端通信。

數據庫是mongoDB，主要有用戶、好友、群聊、消息、表情、號碼池等。

• 功能概覽

• 目錄結構

    // 前端
    ├─build
    ├─config
    ├─src
    │  ├─api                                  // 接口api
    │  ├─assets                               // 静态资源
    │  │  └─img
    │  ├─directives                           // 全局指令
    │  ├─libs                                 // 全局组件
    │  │  ├─bscroll
    │  │  ├─dropdown
    │  │  ├─icon
    │  │  ├─nodata
    │  │  ├─PhotoSwipe
    │  │  ├─uploadPopover
    │  │  └─vScroll
    │  ├─router                                // 路由
    │  ├─store                                 // 状态管理
    │  ├─utils                                 // 方法
    │  └─views
    │      ├─applicationModel
    │      │  ├─games                          // 游戏
    │      │  │
    │      │  └─sub                            // 应用
    │      ├─components                        // 组件
    │      │  ├─APlayer
    │      │  ├─chat
    │      │  ├─cropper
    │      │  ├─DPlayer
    │      │  └─header
    │      ├─personalModel                     // 主页
    │      │  ├─appModel                       // 天气等
    │      │  ├─friendModel                    // 好友
    │      │  └─groupModel                     // 群聊
    │      └─settingModel                      // 设置
    └─static
        ├─css                                  // 样式文件
        ├─font                                 // 字体文件
        └─theme                                // 主题
            └─vchat

功能設計

• 登錄註冊

Vchat中用戶註冊時，會隨機指定一個code號碼，而這個code號是從預先生成的一個號碼池（號碼池存在mongodb）中取的。初始指定10000001-10001999的號碼段為用戶code, 100001-100999的號碼段為群聊code。用戶可以憑藉code號或者賬號登錄。

    // 号码池设计
    * code 号码
    * status 1 已使用 0 未使用
    * type  1 用户 2 群聊
    * random   随机数索引，用于随机查找某一条
    // user表主要字段
    * name 账号
    * pass 密码
    * avatar 头像
    * signature 个性签名
    * nickname 昵称
    * email 邮件
    * phone 手机
    * sex 性别
    * bubble 气泡
    * projectTheme 项目主题
    * wallpaper 聊天壁纸
    * signUpTime 注册时间
    * lastLoginTime 最后一次登录时间
    * chatColor 聊天文字颜色
    * province 省
    * city 市
    * town 县
    * conversationsList 会话列表
    * cover 封面列表

註冊時，需要判斷賬號是否已存在，以及隨機取得的code需要在號碼池中標記為已被使用，用戶密碼用md5加密等。

    // md5 密码加密
    const md5 = pass => { // 避免多次调用MD5报错
        let md5 = crypto . createHash ( 'md5' ) ;
        return md5 . update ( pass ) . digest ( "hex" ) ;
    } ;

登錄同樣需要判斷用戶是否已註冊，以及支持賬號和code兩種方式登錄。

    const login = ( params , callback ) => { // 登录
        baseList . users
            . find ( { // mongodb中可以直接用$or表示或关系
                $or : [ { "name" : params . name } , { "code" : params . name } ]
            } )
            . then ( r => {
                if ( r . length ) {
                    let pass = md5 ( params . pass ) ;
                    if ( r [ 0 ] [ 'pass' ] === pass ) {
                        //更新最后一次登录时间 此处直接写Date.now 会报错 需要Date.now()!!!;
                        baseList . users . update ( { name : params . name } , { lastLoginTime : Date . now ( ) } ) . then ( raw => {
                            console . log ( raw ) ;
                        } ) ;
                        callback ( { code : 0 , data : { name : r [ 0 ] . name , photo : r [ 0 ] . photo } } ) ;
                    } else {
                        callback ( { code : - 1 } ) ;
                    }
                } else {
                    callback ( { code : - 1 } ) ;
                }
        } )
    } ;

登錄權限管理

1. 後端設置全局中間件，將沒有登錄的api請求統一返回status: 0

    app . use ( '/v*' , ( req , res , next ) => {
        if ( req . session . login ) {
            next ( ) ;
        } else {
            if ( req . originalUrl === '/v/user/login' || req . originalUrl === '/v/user/signUp' ) {
                next ( ) ;
            } else {
                res . json ( {
                    status : 0
                } ) ;
            }
        }
    } ) ;

2. 前端用axios統一設置攔截器

 // http response 服务器响应拦截器，这里拦截未登录和401错误，并重新跳入登页重新获取token
instance . interceptors . response . use (
    response => { // 拦截未登录
        if ( response . data . status === 0 ) {
            router . replace ( '/' ) ;
        }
        return response ;
    } ,
    error => {
        if ( error . response ) {
            switch ( error . response . status ) {
                case 401 :
                    // 这里写清除token的代码
                    router . replace ( '/' ) ;
            }
        }
        return Promise . reject ( error . response . data )
    } ) ;

• 消息

vchat中，消息種類包括好友或者加群申請、回複申請（同意or拒絕）、入群通知、聊天消息（文字、圖片、表情、文件）

在實現消息發送之前，需要大體的了解一些socket.io的api。詳細api文檔可以查看socket.io

    // 所有的消息请求都是建立在已连接的基础上的
    io . on ( 'connect' , onConnect ) ;
    // 发送给当前客户端
    socket . emit ( 'hello' , 'can you hear me?' , 1 , 2 , 'abc' ) ;
    // 发送给所有客户端，除了发送者
    socket . broadcast . emit ( 'broadcast' , 'hello friends!' ) ;
    // 发送给同在 'game' 房间的所有客户端，除了发送者
    socket . to ( 'game' ) . emit ( 'nice game' , "let's play a game" ) ;
    // 发送给同在 'game' 房间的所有客户端，包括发送者
    io . in ( 'game' ) . emit ( 'big-announcement' , 'the game will start soon' ) ;

1. 加入房間

加入會話列表中的房間，會話列表在好友申請成功或者加群成功時會自動添加。但是你也可以手動移除或添加，移除後將不會再收到被移除會話的消息（類似於屏蔽）。

    // 前端 发起加入房间的请求
    this . conversationsList . forEach ( v => {
        let val = {
            name : this . user . name ,
            time : utils . formatTime ( new Date ( ) ) ,
            avatar : this . user . photo ,
            roomid : v . id
        } ;
        this . $socket . emit ( 'join' , val ) ;
    } ) ;
    // 后端 接受请求后执行加入操作，记录每个房间加入的成员，以及回信告知指定房间已上线成员
    socket . on ( 'join' , ( val ) => {
        socket . join ( val . roomid , ( ) => {
            if ( OnlineUser [ val . name ] ) {
                return ;
            }
            OnlineUser [ val . name ] = socket . id ;
            io . in ( val . roomid ) . emit ( 'joined' , OnlineUser ) ; // 包括发送者
        } ) ;
    } ) ;

2. 多房間

同時加入多個聊天房間會出現一個問題，socket可以加入多個房間並給指定房間發送消息，但是接受消息的時候並不會區分房間。換句話說，所有房間的消息，會一起發送給客戶端。所以我們需要自己區分哪條消息是哪個房間的並進行分發。這樣就需要一個房間標識來過濾，Vchat用的是房間id。

    mes ( r ) { // 只有本房间的消息才展示
        if ( r . roomid === this . currSation . id ) {
            this . chatList . push ( Object . assign ( { } , r , { type : 'other' } ) ) ;
        }
    }

3. 發消息

    // 前端
    send(params, type = 'mess') { // 发送消息
        if (!this.message && !params) {
            return;
        }
        let val = {
            name: this.user.name,
            mes: this.message,
            time: utils.formatTime(new Date()),
            avatar: this.user.photo,
            nickname: this.user.nickname,
            read: [this.user.name],
            roomid: this.currSation.id,
            style: 'mess',
            userM: this.user.id
        };
        this.chatList.push(Object.assign({},val,{type: 'mine'})); // 更新视图
        this.$socket.emit('mes', val);
        this.message = '';
    }
    // 后端 接收消息后存储到数据库，并转发给房间内其他成员，不包括发送者。
    socket.on('mes', (val) => { // 聊天消息
        apiList.saveMessage(val);
        socket.to(val.roomid).emit('mes', val);
    });

4. 消息記錄

所有的消息都會存到mongodb中，當切換房間的時候，會獲取歷史消息。而處在當前房間時，只會把最新消息追加到dom中，不會從數據庫獲取。聊天窗口默認只展示最新100條消息，更多消息可在聊天記錄中查看。

    // 前端 获取指定房间的历史消息
    this . $socket . emit ( 'getHistoryMessages' , { roomid : v . id , offset : 1 , limit : 100 } ) ;
    // 后端 关联表、分页、排序
    messages . find ( { roomid : params . roomid } )
        . populate ( { path : 'userM' , select : 'signature photo nickname' } ) // 关联用户基本信息
        . sort ( { 'time' : - 1 } )
        . skip ( ( params . offset - 1 ) * params . limit )
        . limit ( params . limit )
        . then ( r => {
            r . forEach ( v => { // 防止用户修改资料后，信息未更新
                if ( v . userM ) {
                    v . nickname = v . userM . nickname ;
                    v . photo = v . userM . photo ;
                    v . signature = v . userM . signature ;
                }
            } ) ;
            r . reverse ( ) ;
            callback ( { code : 0 , data : r , count : count } ) ;
        } ) . catch ( err => {
        console . log ( err ) ;
        callback ( { code : - 1 } ) ;
    } ) ;

項目展示

主頁

聊天窗口，可拖拽或縮放，聊天壁紙及文字顏色設置。

個人設置

應用空間

相關閱讀

• Mongoose基礎入門
• socket.io文檔
• Vchat主題切換實現方案來自於d2-admin

寫在後面

本文主要講了Vchat的整體設計以及一些主要功能的實現，其實寫項目過程中坑還是挺多的，比如mongoose聯表查詢、文件上傳等等，這裡就不在細說，以後有時間再更新。如果Vchat對你有幫助，記得star一下喲^_^。