借着放假期間將NodeJS重新回顧了一下並玩了一下sketch來進行設計界面,很不錯。(注:代碼整理后會放到github上,請關注。)
本次聊天室我給它定義了一個名稱叫“秘密聊天室”。
需求:

技術選型:
后端:NodeJs,Socket.io,中間件(express,body-parser,multer,ejs),mongoose
express:是NodeJs Web應用框架,主要是要理解它的router
body-parser:用於獲取req中的參數值
multer:用於上傳文件
ejs:用於模板渲染
mongoose:連接mongoose數據庫
數據庫:mongodb
前端:bootstrap布局,vuejs進行雙向綁定,請求還是使用的jquery的ajax,未使用fetch(主要是bootstrap是基於jquery的,所以沒用使用webpack或browerify等打包工具進行處理fetch)。
實現:
1、創建web服務器

2、進行身份認證,哪些路由要進行身份處理。

4、數據庫配置
![]()
5、定義數據模型

6、用戶注冊,登錄

7、建立socket.io

8、前端代碼就比較簡單了,無否是一些請求而已,下面只截取前端socke.io部分。

運行效果:
1、登錄

2、主界面

3、創建房間(創建自己感興趣的話題)

3、模擬兩個用戶

4、每個房間鼠標移入會顯示房間內容

5、加入房間,會提示誰加入

6、退出房間,同樣會有提示,房間之間互不影響。

7、消息

在現階段還有未完成部分。如消息的保存,人員頭像,收藏等。
后續,希望可以將nodejs消息處理做成一個通用組件,安裝消息中心后,任何系統中可以很方便調用。
最后來一張sketch的設計稿

