聊天系統實現

最近把聊天系統的功能作了一些完善，而後把後臺管理的功能實現了。通過本身本人的一番調試沒有太大的bug，晚上就跟着部署在服務器上了。

線上地址

前臺：http://co-messager.chenr.cn （請使用PC谷歌瀏覽器訪問）

若是在使用中發現什麼問題但願你們提出寶貴的意見喲。項目地址： https://github.com/CCZX/wechat
目前項目一直在更新中。歡迎你們留下寶貴的意見。

注意：

1. 上傳文件都尚未完成。
2. webRTC相關使用可能不穩定。
3. 推薦一個朋友圈不少的朋友連接：http://co-messager.chenr.cn/#...
4. 因爲代碼優化不夠加上水管服務器，第一次訪問可能會比較慢請耐心等待。
5. 如發現問題請告訴我喲。

功能

• [x] 登錄註冊
• [x] 單聊
• [x] 羣聊
• [x] 歷史消息
• [x] 圖片發送
• [ ] 文件發送
• [ ] 代碼片斷髮送
• [x] 表情發送
• [x] 白板協做
• [x] 音視頻聊天
• [x] 消息已讀提醒
• [x] 好友分組
• [x] 好友備註
• [x] 好友上線提醒
• [x] 在線用戶頭像高亮
• [x] 添加好友
• [x] 添加羣聊
• [x] 朋友圈功能
• [x] 發表朋友圈
• [x] 好友朋友圈
• [x] 朋友圈動態點贊
• [x] 朋友圈動態評論
• [x] 朋友圈動態回覆評論
• [x] 日程設置

概要

本系統分爲Client，Server，Admin三個端：其中Client爲客戶端，Server爲服務器端，Admin爲管理員端。

系統功能圖

普通用戶

管理員

技術路線

本項目爲先後端分離的開發模式

• 客戶端使用Vue、VueX、Vue-Router等；
• 管理員端使用React、antd等技術棧；
• 後端使用的是node.js；
• 數據庫使用的是MongoDB；
• 在實現聊天的全雙工數據通訊使用的是WebSocket。

啓動項目

• 啓動服務器（3333端口）

cd chatServer
npm install
node app.js

• 啓動客戶端（8080端口）

cd chatClient
npm install
npm run dev

• 啓動管理員端（3000端口）

cd chatAdmin
npm install
npm start

啓動完成後流羣訪問localhost:8080以及localhost:3000能夠分別訪問客戶端以及管理員端。

項目打包

1. 客戶端的代碼打包後資源默認放在chatServer文件夾的public目錄下；
2. 管理員端在chatAdmin的build目錄下，須要本身本身手動將整個build目錄複製到chatServer文件夾的public目錄下，而後修改build目錄文件的index.html中引入資源路徑前都加上/build。

難點

1. 各類組件的拆分，項目文件結構。
2. 修改用戶分組、分組後用戶界面即時響應。
3. 在獲取會話後，對每條會話最後一條消息的獲取處理邏輯。
4. 對接七牛雲實現實現圖片的上傳。
5. webRTC技術。
6. 收到消息後即時提醒以及未讀消息的數量提醒。
7. 消息已讀提醒設置。
8. 用戶退出登陸後，後端登陸信息的即時清除。
9. 空間動態的評論以及回覆評論實現。
10. 不一樣頁面組件之間執行操做後的響應。

項目截圖

一、最近會話列表頁面（最近會話按照最後消息時間排序，在發送新的消息後該會話會排序到第一條）

二、好友分組、羣聊分類

三、新消息提醒、已讀提醒

四、空間動態

聯繫

• E-mail：ccdebuging@gmail.com、cAuth1218@163.com
• QQ：1831058205

該項目本人最近會一直跟進，直到實現一個較爲完善的聊天系統，後續再進行優化升級。項目地址： https://github.com/CCZX/wechat 歡迎你們提出寶貴的意見，若是能提 PR或者 issues就更好了。若是你以爲項目還能夠請留下你的 star✨吧🌹。