全棧式的開發多人在線聊天室

技術棧

以爲好的歡迎點個star ^_^。

• 前端：Express & EJS & ES6 & Less & Gulp
• 後端：Express & SocketIO & MongoDB & REST API
• 部署：Linux & PM2

演示

• 全棧式的開發多人在線聊天室
  • 項目只適配了移動端，請使用瀏覽器的手機視圖查看。
    • 項目源碼：https://github.com/bergwhite/nchat
    • 在線演示：http://y.bw2.me:8086/

目錄

├─bin
│    www       // 後端 服務器
│    database  // 後端 數據庫
│    socket    // 後端 socket
|    router    // 後端 路由
├─sessions     // 後端 session
├─public
│    src       // 前端 開發目錄
│    dist      // 前端 線上目錄
├─routes       // 前端 路由
├─view         // 前端 頁面
├─app.js       // 前端 服務器
├─gulpfile.js  // 前端 Gulp
├─package.json

安裝

• 項目基於MIT協議開源
• 啓動項目之前，請確保已經安裝mongodb，並在package.json中修改MongoDB的安裝路徑（--dbpath）

Windows安裝教程 | Linux安裝教程

git clone https://github.com/bergwhite/nodejs-chat  // 克隆項目
cd nodejs-chat  // 進入目錄
npm install  // 安裝依賴
npm run build  // 構建 線上代碼
npm run mongod // 開啓 數據庫
npm run start // 開啓 聊天室

功能

• 聊天
  • √ 羣聊
  • × 私聊
  • √ 表情
  • × 鬥圖
  • × 更多表情
  • √ 聊天機器人（圖靈）
• 用戶
  • √ 在線清單
  • √ 隨機頭像
  • √ 上線通知
  • √ 離線通知
  • √ 消息推送
  • × 上傳頭像
  • √ 在線統計
• 房間
  • √ 房間列表
  • √ 添加房間
  • × 搜索房間

優化

• 基礎
  • √ 代碼壓縮
• 展現
  • √ 之前未設置頭像的，顯示默認頭像
  • √ 加載速度優化
  • × 界面換膚
• 開發
  • √ 組件化開發
  • √ 模塊化開發
  • √ REST API
  • √ 使用PM2部署
  • √ 先後端分離
  • × 代碼規範
  • × 測試用例
• 安全
  • √ 密碼使用MD5+SALT保存
  • √ 聊天內容過濾< >等特殊標籤
• 認證
  • √ Session

• 部署

  • Linux & PM2

踩坑

圖靈機器人不支持跨域，經過代理中間件把請求代理到本地。

var proxy = require('http-proxy-middleware');

app.use('/api/robot', proxy({
  target: 'http://www.tuling123.com',
  changeOrigin: true
}));

Gulp使用通配符對多個文件處理，會壓縮到一個文件中。如下是分別進行壓縮的方式。

const gulp = require('gulp'),
      minifyJS = require('gulp-uglifyjs'),
      babel = require('gulp-babel'),
      rename = require('gulp-rename');

const compileDir = {
  css: {
    src: 'public/src/css/index.less',
    dest: 'public/dist/css'
  },
  js: {
    src: 'public/src/js/',
    dest: 'public/dist/js'
  }
};

gulp.task('compile-js', () => {
  const JSTaskList = ['index', 'login', 'mobile', 'room', 'roomAdd', 'userInfoMod', 'roomMember']
  return JSTaskList.map((e) => {
    gulp.src(`${compileDir.js.src}${e}.js`)
      .pipe(babel({
        presets: ['es2015']
      }))
      .pipe(minifyJS())
      .pipe(rename((path) => {
        path.basename += '.min'
      }))
      .pipe(gulp.dest(compileDir.js.dest))
  })
});

gulp-uglifyjs - No files given; aborting minification

以前刪除了一個JS文件，可是沒有刪除JSTaskList中的對應值。編譯時會報上面的錯誤。刪除對應的值就編譯成功了。