Vchat скачать - загрузка исходного кода Vchat

【От головы до ног】 Поместите систему социального чата (Vue + Node + Mongodb)- ??? Vchat

иллюстрировать

Больше не поддерживается

Этот проект был написан, когда я учился, и некоторые места плохо читаемы (например, большое количество обратных вызовов в части монго). Студенты, которые это нужно, прочитали это внимательно, спасибо.

Код филиала онлайн и был изменен соответственно. Если вы по умолчанию присоединяетесь к группе чата, и бэкэнд может адаптироваться к некоторым корректировкам кода Linux, рекомендуется потянуть мастер.

Начало проекта

Обратите внимание, что должны быть узлы, NPM и MongoDB. IP -адрес MongoDB проекта по умолчанию составляет 127.0.0.1:27017, который может быть изменен в файле конфигурации. (чатервер utils database.js)

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

Предисловие

Проект начался из -за того, что работа требовала функции чата, но по некоторым причинам я, наконец, выбрал Strophe.js на основе протокола XMPP. Поэтому я сам хотел написать набор с помощью узла. Первоначально я хотел просто написать страницу в чате, но после написания его не удовлетворен, поэтому я продолжал рефактор (кажется, что я могу понять, почему менеджер продукта всегда менял потребности).

Многие вещи, такие как MongoDB, также являются первым, когда я их использовал. Я был только знаком с MySQL раньше. Поэтому я узнал и писал одновременно. Я использовал свое свободное время, чтобы писать с перерывами в течение нескольких месяцев (на этот раз я говорил о версии V0.9.0, и проект все еще обновляется ...), который включает в себя полный набор взаимодействий фронтальных и бэк-энда. Пользовательский интерфейс исходит от моих собственных чувств и не имеет таланта дизайна (тогда, когда дело доходит до переключения тем, это действительно трудно спроектировать ~), слегка опрыскивание. Есть еще много областей, которые необходимо оптимизировать и улучшить в проекте. Каждый может упомянуть проблемы (в конце статьи есть группа Q, и вы можете учиться и общаться вместе).

Меньше сплетен, в этой статье в основном рассказывается о процессе проектирования проекта и некоторых идей функциональной реализации. Студенты, которые заинтересованы в проекте, перейдите в исходный код vchat - от головы до ног пальца пальца пальца пальцы пальца пальцы пальца пальца пальтся ноги пальх ноги с ношкой пальх в онлайн.

* Это делитель ----------------------------------------------------------------------------------------------------------------------------------------------

Связанный адрес

Самородки
Жиху

Архитектура проекта

Технологический стек

В основном в основном используются семейные ведра Vue, и нечего сказать, строительные проекты лесов, управление Vuex State, маршрутизацию управления Vue-Router и Axios для взаимодействия фронта. Бэкэнд - это служба, основанная на узле и использует Express. Почему я не использую коа? Это просто для удобства, потому что Коа не знаком (покрывает ее лицо). Самая важная вещь в чате - это, конечно, общение. Проект использует 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, будет указан номер кода, и этот номер кода взят из предварительно генерируемого пула номеров (пул номеров существует в MongoDB). Начальный сегмент номеров, указанный как 10000001-10001999, является кодом пользователя, а сегмент номеров 100001-100999-это код группового чата. Пользователи могут войти в систему со своим номером кода или учетной записи.

    // 号码池设计
    * 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 封面列表

При регистрации вам необходимо определить, существует ли учетная запись, и случайно полученный код должен быть помечен как используемый в пуле номеров, а пароль пользователя зашифруется с помощью MD5 и т. Д.

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

Вход также требует определения того, зарегистрировался ли пользователь, а также поддержку учетной записи и кода для входа в систему.

    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 } ) ;
                }
        } )
    } ;

Управление разрешением входа в систему

Бэкэнд устанавливает глобальное промежуточное программное обеспечение и возвращает статус: 0 для запросов API, которые не вошли в систему.

    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
                } ) ;
            }
        }
    } ) ;

Фронт-энд использует 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 типы сообщений включают в себя приложение друзей или группового приложения, приложение ответа (согласие или отказ), уведомление о записи группы, сообщение в чате (текст, изображения, выражения, файлы)

Перед реализацией отправки сообщений вам нужно иметь общее понимание некоторых APIS socket.io . Для получения подробной документации 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' ) ;

Присоединяйтесь к комнате

Присоединяйтесь к комнате в списке сессий. Список сеансов будет автоматически добавлен, когда приложение Friend будет успешным или группа успешно добавлена. Но вы также можете вручную удалить или добавить, и вы больше не будете получать сообщения о удаленном сеансе (аналогично блокировке).

    // 前端 发起加入房间的请求
    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 ) ; // 包括发送者
        } ) ;
    } ) ;

Несколько комнат

Там будет проблема с объединением нескольких чатов одновременно. Гребень может присоединиться к нескольким комнатам и отправлять сообщения в указанные комнаты, но не будет различать комнаты при принятии сообщений. Другими словами, все сообщения из комнаты будут отправлены клиенту вместе. Поэтому нам нужно отличить, из какого сообщения есть комната и распределить его. Это требует идентификатора комнаты для фильтрации, и Vchat использует идентификатор комнаты.

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

Отправить сообщение

    // 前端
    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);
    });

Регистрация сообщений

Все сообщения будут храниться в 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 } ) ;
    } ) ;

Дисплей проекта

Домашняя страница

Окно чата, можно перетаскивать или увеличить, обои чата и настройки цвета текста.

Личные настройки

Пространство применения

Связанные показания

Начало работы с основными основаниями
ocket.io документация
Решение по переключению темы VCHAT поступает от D2-Admin

Напишите позже

В этой статье в основном рассказывается об общем дизайне VCHAT и реализации некоторых основных функций. На самом деле, в процессе написания проектов все еще есть много подводных камней, таких как монгусский интерфейс-запрос, загрузка файлов и т. Д. Я не буду подробно здесь, и я обновлю его, если у меня будет время в будущем. Если Vchat вам полезен, не забудьте посмотреть ^_ ^.

Расширять