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

Chiclaim 发布于2019-08-20 18:16 / 3413人阅读

摘要：技术栈觉得好的欢迎点个。前端后端部署演示全栈式的开发多人在线聊天室项目只适配了移动端，请使用浏览器的手机视图查看。之前删除了一个文件，但是没有删除中的对应值。编译时会报上面的错误。

技术栈

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

前端：Express & EJS & ES6 & Less & Gulp

后端：Express & SocketIO & MongoDB & REST API & Token

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

专线服务 idc机房托管 webrtc多人聊天室多人视频交友聊天室多人聊天室c语言代码 webrtc多人聊天室视频教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84276.html

2017-07-25 前端日报

摘要：前端日报精选三思而后行想提高团队技术，来试试这个套路如何开发一个插件学习笔记块级作用域绑定译文详解带来的个重大变化中文周二放送画图知乎专栏第期新特性译配置译高性能视差滚动行代码构建区块链知乎专栏渲染器修仙之路之拷贝对象已 2017-07-25 前端日报精选 SSR 三思而后行想提高团队技术，来试试这个套路！如何开发一个 Atom 插件ES6学习笔记：块级作用域绑定【译文】详解VUE2...

bluesky 2019-08-20 18:17 评论0 收藏0
UCloud WebRTC 来了！支持万人直播的一站式实时音视频解决方案

摘要：宋体同时支持多平台的接入，能满足不同客户端的接入需求。宋体宋体支持万人直播推送宋体宋体利用实时集群直播集群，实现音视频连麦互动可以同时推送万人直播，具体原理如下。有人说：2G 看文字，3G 看图片，4G 看视频，那么对于已经开启序幕的 5G 时代呢？随着短视频、在线课堂、互动直播等音视频应用的崛起，如何适配差异化的网络环境，为用户提供更流畅高清的实时音视频服务成为关注重点。而当前的音视频技术...

AlphaGooo 2019-12-27 12:20 评论0 收藏0
BAT数据中心建设背后的“推手” 新华三是怎么做到的？

摘要：日前，聚焦于的新华三数据中心基础设施研讨会在福州召开，在此次研讨会上，新华三集团全面展现了自身在数据中心全生命周期服务上的综合实力。从在我们的生活中，几乎每天都会用到百度的搜索引擎，腾讯的微信、QQ，阿里巴巴的淘宝和支付宝，但你有没有想过，这些工具每天会被用到多少次？尽管没有非常精确的统计，数以亿计肯定只是保守估计。我们之所以能够享受这些互联网工具带来的便捷，与其背后所拥有的强大数据中心支撑...

Nino 2019-04-30 14:38 评论0 收藏0
全栈开发——动手打造属于自己的直播间（Vue+SpringBoot+Nginx）

摘要：经过琢磨，其实是要考虑安全性的。具体在以下几个方面跨域连接协议升级前握手拦截器消息信道拦截器对于跨域问题，我们可以通过方法来设置可连接的域名，防止跨站连接。前言大学的学习时光临近尾声，感叹时光匆匆，三年一晃而过。同学们都忙着找工作，我也在这里抛一份简历吧，欢迎各位老板和猎手诚邀。我们进入正题。直播行业是当前火热的行业，谁都想从中分得一杯羹，直播养活了一大批人，一个平台主播粗略估计就...

e10101 2019-07-25 13:57 评论0 收藏0