摘要:技術(shù)棧覺得好的歡迎點個。前端后端部署演示全棧式的開發(fā)多人在線聊天室項目只適配了移動端,請使用瀏覽器的手機視圖查看。之前刪除了一個文件,但是沒有刪除中的對應(yīng)值。編譯時會報上面的錯誤。
技術(shù)棧
覺得好的歡迎點個star ^_^。
前端:Express & EJS & ES6 & Less & Gulp
后端:Express & SocketIO & MongoDB & REST API & Token
部署:Linux & PM2
演示
全棧式的開發(fā)多人在線聊天室
項目只適配了移動端,請使用瀏覽器的手機視圖查看。
項目源碼:https://github.com/bergwhite/nchat
在線演示:http://y.bw2.me:8086
目錄
├─bin │ www // 后端 服務(wù)器 │ database // 后端 數(shù)據(jù)庫 │ socket // 后端 socket | router // 后端 路由 ├─sessions // 后端 session ├─public │ src // 前端 開發(fā)目錄 │ dist // 前端 線上目錄 ├─routes // 前端 路由 ├─view // 前端 頁面 ├─app.js // 前端 服務(wù)器 ├─gulpfile.js // 前端 Gulp ├─package.json
安裝
項目基于MIT協(xié)議開源
啟動項目以前,請確保已經(jīng)安裝mongodb,并在package.json中修改MongoDB的安裝路徑(--dbpath)
Windows安裝教程 | Linux安裝教程
git clone https://github.com/bergwhite/nodejs-chat // 克隆項目 cd nodejs-chat // 進入目錄 npm install // 安裝依賴 npm run build // 構(gòu)建 線上代碼 npm run mongod // 開啟 數(shù)據(jù)庫 npm run start // 開啟 聊天室
功能
聊天
√ 群聊
× 私聊
√ 表情
× 斗圖
× 更多表情
√ 聊天機器人(圖靈)
用戶
√ 在線清單
√ 隨機頭像
√ 上線通知
√ 離線通知
√ 消息推送
× 上傳頭像
√ 在線統(tǒng)計
房間
√ 房間列表
√ 添加房間
× 搜索房間
優(yōu)化
基礎(chǔ)
√ 代碼壓縮
展示
√ 以前未設(shè)置頭像的,顯示默認頭像
√ 加載速度優(yōu)化
× 界面換膚
開發(fā)
√ 組件化開發(fā)
√ 模塊化開發(fā)
√ REST API
√ 使用PM2部署
√ 前后端分離
× 代碼規(guī)范
× 測試用例
安全
√ 密碼使用MD5+SALT保存
√ 聊天內(nèi)容過濾< >等特殊標簽
認證
√ 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中的對應(yīng)值。編譯時會報上面的錯誤。刪除對應(yīng)的值就編譯成功了。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/84276.html
摘要:前端日報精選三思而后行想提高團隊技術(shù),來試試這個套路如何開發(fā)一個插件學習筆記塊級作用域綁定譯文詳解帶來的個重大變化中文周二放送畫圖知乎專欄第期新特性譯配置譯高性能視差滾動行代碼構(gòu)建區(qū)塊鏈知乎專欄渲染器修仙之路之拷貝對象已 2017-07-25 前端日報 精選 SSR 三思而后行想提高團隊技術(shù),來試試這個套路!如何開發(fā)一個 Atom 插件ES6學習筆記:塊級作用域綁定【譯文】詳解VUE2...
摘要:宋體同時支持多平臺的接入,能滿足不同客戶端的接入需求。宋體宋體支持萬人直播推送宋體宋體利用實時集群直播集群,實現(xiàn)音視頻連麥互動可以同時推送萬人直播,具體原理如下。有人說:2G 看文字,3G 看圖片,4G 看視頻,那么對于已經(jīng)開啟序幕的 5G 時代呢?隨著短視頻、在線課堂、互動直播等音視頻應(yīng)用的崛起,如何適配差異化的網(wǎng)絡(luò)環(huán)境,為用戶提供更流暢高清的實時音視頻服務(wù)成為關(guān)注重點。而當前的音視頻技術(shù)...
摘要:日前,聚焦于的新華三數(shù)據(jù)中心基礎(chǔ)設(shè)施研討會在福州召開,在此次研討會上,新華三集團全面展現(xiàn)了自身在數(shù)據(jù)中心全生命周期服務(wù)上的綜合實力。從在我們的生活中,幾乎每天都會用到百度的搜索引擎,騰訊的微信、QQ,阿里巴巴的淘寶和支付寶,但你有沒有想過,這些工具每天會被用到多少次?盡管沒有非常精確的統(tǒng)計,數(shù)以億計肯定只是保守估計。我們之所以能夠享受這些互聯(lián)網(wǎng)工具帶來的便捷,與其背后所擁有的強大數(shù)據(jù)中心支撐...
摘要:經(jīng)過琢磨,其實是要考慮安全性的。具體在以下幾個方面跨域連接協(xié)議升級前握手攔截器消息信道攔截器對于跨域問題,我們可以通過方法來設(shè)置可連接的域名,防止跨站連接。 前言 大學的學習時光臨近尾聲,感嘆時光匆匆,三年一晃而過。同學們都忙著找工作,我也在這里拋一份簡歷吧,歡迎各位老板和獵手誠邀。我們進入正題。直播行業(yè)是當前火熱的行業(yè),誰都想從中分得一杯羹,直播養(yǎng)活了一大批人,一個平臺主播粗略估計就...
閱讀 2962·2023-04-26 01:32
閱讀 1557·2021-09-13 10:37
閱讀 2292·2019-08-30 15:56
閱讀 1686·2019-08-30 14:00
閱讀 3062·2019-08-30 12:44
閱讀 1976·2019-08-26 12:20
閱讀 1072·2019-08-23 16:29
閱讀 3238·2019-08-23 14:44