使用node.js, mongodb, socket.io和react編寫的在線WEB網頁聊天程序–Fiora

GitHub：https://github.com/yinxin630/fiora/blob/master/doc/README.ZH.md

demo：https://fiora.suisuijiang.com/

功能

好友,群組,私聊,群聊
文本,圖片,代碼, url等多種類型消息
貼吧表情,滑稽表情,搜索表情包
桌面通知,聲音提醒,語音播報
自定義桌面背景,主題顏色,文本顏色
查看在線用戶, @功能
小黑屋禁言
Service Worker

目錄結構

|– [build] // webpack構建
|– [client] //客戶端代碼
|– [config] //配置
|– [dist] //打包輸出目錄
|– [doc] //文檔
|– [public] //靜態資源
|– [server] //服務端代碼
|– [utils] //工具方法
|– .babelrc // babel配置
|– .eslintignore // eslint忽略配置
|– .eslintrc // eslint規則配置
|– .gitignore // git忽略配置
|– .nodemonrc // nodemon配置
|– package-lock.json // npm 
|– package.json // npm 
| — yarn.lock // yarn 
…

安裝與運行

前置條件

要運行Fiora, 你需要具備Node.js(>= 8.9.0版本)環境, Mongodb數據庫

在本地運行

第一步

克隆項目到本地git clone https://github.com/yinxin630/fiora.git -b master

第二步

安裝依賴, 推薦使用yarn yarn 或者npm install

第三步

修改配置文件:

服務端配置: config/server.js 
客戶端配置: config/client.js 
webpack配置: config/webpack.js 
服務端配置中,如果不配置七牛CDN的話,圖片會存儲到服務端中.會增加服務端帶寬壓力和流量消耗,因此更推薦使用七牛CDN

七牛CDN配置說明:

qiniuAccessKey從七牛個人面板-密鑰管理頁面獲取
qiniuSecretKey從七牛個人面板-密鑰管理頁面獲取
qiniuBucket存儲空間的名稱
qiniuUrlPrefix存儲空間的域名,從七牛存儲空間-內容管理頁面獲取,需要寫成// xxx/或者http://xxx/或者https://xxx/的格式

第四步

啟動服務端npm run server

第五步

啟動客戶端npm run client

第六步

瀏覽器將會自動打開Fiora, 你也可以手動打開地址http://localhost:8080

在服務器運行

第一步, 第二步, 第三步

與在本地安裝相同

第四步

構建客戶端npm run build

移動構建產物到public 目錄mv dist/fiora/* public

或者如果你使用了七牛CDN的話, 可以把所以構建產物上次到七牛CDN, 然後僅將index.html 放到public 目錄, 這樣性能會更好

第五步

使用pm2 啟動服務端export NODE_ENV=production && pm2 start server/main.js –name=”fiora”

第六步

訪問地址http://[服務端ip]:[fiora端口號]