用NodeJS打造多人在線聊天室（NodeJS & SocketIO & Express & EJS & MongoDB & Gulp）

項目背景

這個項目主要是爲了玩玩NodeJS，項目的方向大概是作出相似QQ的在線聊天系統。想要在線體驗能夠點擊在線演示。

項目使用PM2進行部署和管理，功能在不斷的迭代開發中。若是你以爲這個項目比較有趣，或者能對你有所幫助，歡迎給個Star。

項目地址：https://github.com/bergwhite/nchat

PS: 最近找工做，北京的歡迎聯繫。另外以前作過一個基於Vue全家桶二次開發的V2EX社區 https://github.com/bergwhite/v2ex-vue。

項目目錄

├─bin
│    www  // 啓動express
├─database
│    index.js  // MongoDB
├─public  // 靜態文件
│    css
│        index.css  // 首頁CSS
│    js
│        index.js  // 與socket服務進行通信（關鍵文件）
|        socket-server.js  // socket服務（關鍵文件）
│    img
├─routers
│    index.js  // 頁面路由
├─view
│    error.ejs  // 錯誤頁
│    index.ejs  // 首頁
│    userCenter.ejs  // 用戶中心（規劃中）
│    userList.ejs  // 用戶列表（規劃中）
├─app.js  // express
├─package.json  // npm包

路由

目前只有/目錄和/room/:id正式使用了，其餘路由的頁面還在迭代開發中。

/  // 首頁
/user  // 用戶列表
/user/:id  // 用戶中心
/user/:id/register  // 註冊（JSON）
/user/:id/login  // 登錄（JSON）
/user/:id/logout  // 註銷（JSON）
/user/:id/info  // 用戶資料（JSON）
/room/:id  // 指定聊天室

開始安裝

使用以前，請在package.json中修改MongoDB的安裝路徑（--dbpath）。

git clone https://github.com/bergwhite/nodejs-chat  // 克隆項目到本地
cd nodejs-chat  // 進入項目目錄
npm install  // 安裝依賴
npm run build  // 構建線上代碼
npm run mongod // 啓動MongoDB服務
npm run start // 啓動聊天室服務並啓動網站

項目演示

目前項目存在一個已知的bug，表情包沒法在div模擬的輸入框中插入（修復中）。

匿名聊天

用戶聊天

成員&房間

離線通知

更多房間

房間獨立

已上線功能

• 跨瀏覽器，跨地域聊天（SocketIO自帶技能）
• 首次進入會顯示歡迎信息
• 發送空消息會進行提示
• 直接發送消息默認暱稱爲「神祕人」
• 發送消息後會清空當前輸入框內容，而後焦點回到消息輸入框
• 添加用戶名後會成爲新用戶，而後告知全房間人有新用戶加入
• 能夠建立不一樣的房間，不一樣的房間的聊天是相互獨立的
• 顯示當前房間的在線用戶（設置了用戶名的）
• 顯示目前全部打開的房間
• 用戶（設置了用戶名的）離線會通知全部房間內的成員
• 壓縮線上代碼，加快訪問速度
• ...

待上線功能

用戶名

• 統計匿名用戶
• 支持一鍵隨機獲取用戶名

頭像

• 訪客使用默認頭像
• 新用戶（設置了用戶名的）隨機得到一個頭像
• 新用戶換頭像能夠從默認的一組頭像中選擇
• 是否支持上傳頭像還在考慮中（安全性問題）

聊天

• 支持多組豐富的表情包
• 是否支持上傳圖片還在考慮中（安全性問題）

數據庫

• 對接MongoDB，新用戶（設置了用戶名的）設置密碼後，將從臨時用戶轉變爲正式用戶

項目缺陷

• 界面醜（等功能完善了再考慮）
• 表情包沒法在div模擬的輸入框中插入（修復中）
• ...