全栈式的开发多人在线聊天室

技术栈

觉得好的欢迎点个 star ^_^。

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

演示

• 全栈式的开发多人在线聊天室
  • 项目只适配了移动端，请使用浏览器的手机视图查看。

目录

 ├─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 中的对应值。编译时会报上面的错误。删除对应的值就编译成功了。