Vchat
1.0.0
もはや維持されません
このプロジェクトは、私が勉強していたときに書かれており、いくつかの場所は読みやすくなりません（Mongo部分の多数のコールバックなど）。それを必要とする学生はそれを注意深く読んで、ありがとう。
ブランチコードはオンラインであり、それに応じて変更されています。デフォルトでチャットグループに参加し、バックエンドがLinuxコードの調整に適応できる場合は、マスターを引くことをお勧めします。
ノード、npm、mongodbが必要であることに注意してください。プロジェクトのデフォルトのMongoDB IPアドレスは127.0.0.1:27017で、構成ファイルで変更できます。 （chatserver utils database.js）
cd chatRoom
npm install 安装前端依赖
npm run build 编译前端代码
cd ..
cd chatServer
npm install 安装后端依赖
npm run create 初始化数据库（号码池、表情包）
npm start 启动服务
在浏览器中打开 localhost:9988 即可
このプロジェクトは、作業にチャットルーム機能が必要だったために開始されましたが、何らかの理由で、XMPPプロトコルに基づいてStrophe.jsを最終的に選択しました。だから私はノードを使用して自分でそれのセットを書きたかったのです。私はもともと単にチャットページを書いたかったのですが、それを書いた後に満足していなかったので、私はそれをリファクタリングし続けました（製品マネージャーが常にニーズを変えた理由を理解できるようです）。
Mongodbなどの多くのことも、私がそれらを使用したのは初めてです。私は以前にMySQLにしか触れたことがありません。だから私は同時に学び、書きました。私は暇な時間を数ヶ月間断続的に書きました（今回はv0.9.0バージョンについて話しましたが、プロジェクトはまだ更新されています...）。 UIは私自身の感情から来ており、デザインの才能がありません（テーマの切り替えに関しては、デザインするのは本当に難しいです〜）、軽くスプレー - 。プロジェクトで最適化および改善する必要がある領域はまだたくさんあります。誰もが問題に言及することを歓迎します（記事の最後にQグループがあり、一緒に学び、コミュニケーションをとることを歓迎します）。
少ないゴシップでは、この記事では、主にプロジェクトの設計プロセスと機能的な実装のアイデアについて説明しています。プロジェクトに興味のある学生は、頭からつま先のつま先のつま先のつま先のつま先のつま先のつま先のつま先のつま先のつま先のつま先のつま先をつま先してオンラインでおしゃべりするつま先へのつま先までのソースコードVChatに移動してください。
* This is the divider --------------------------------------------------------------------------------------------------------------------------
フロントエンドは主にVueファミリーバケットを使用しており、足場建設プロジェクト、Vuex State Management、Vue-Router Control Routing、Axiosのフロントエンドインタラクションなど、何も言うことはありません。バックエンドはノードに基づくサービスであり、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で登録すると、コード番号がランダムに指定され、このコード番号は事前に生成された番号プールから取得されます（番号プールはMongoDBに存在します）。 100001-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 } ) ;
}
} )
} ;ログイン許可管理
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
} ) ;
}
}
} ) ; // 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では、メッセージの種類には、友人またはグループアプリケーション、返信アプリケーション（同意または拒否）、グループエントリ通知、チャットメッセージ（テキスト、写真、式、ファイル）が含まれます。
メッセージ送信を実装する前に、
socket.ioAPIを一般的に理解する必要があります。詳細な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は部屋IDを使用します。
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 } ) ;
} ) ;ホームページ
チャットウィンドウ、ドラッグまたはズーム化、チャットの壁紙とテキストの色設定を設定できます。
個人的な設定
アプリケーションスペース
この記事では、主にVCHATの全体的な設計といくつかの主要な機能の実装について説明しています。実際、Mongoose Inter-Tableクエリ、ファイルアップロードなど、プロジェクトを作成するプロセスにはまだ多くの落とし穴があります。ここでは詳細にはなりません。将来の時間があれば更新します。 VChatがあなたに役立つ場合は、 ^_ ^を見つめることを忘れないでください。
