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

技術棧

覺得好的歡迎點個star ^_^。

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

演示

• 全棧式的開發多人線上聊天室
  • 項目只適配了移動端，請使用瀏覽器的手機視圖查看。
    • 項目源碼：https://github.com/bergwhite/nchat
    • 線上演示：http://47.93.252.247: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中的對應值。編譯時會報上面的錯誤。刪除對應的值就編譯成功了。