阿童木聊天室
碼雲
線上地址www.genal.fun （已失效，不打算部署了）
有建議請到issues區
專案簡介
? 閒暇時間想做一個聊天室來鞏固前端技能，於是在2020年6月24號就開始了阿童木聊天室的開發之旅。
? 專案採用全typescript開發，這是為了以後的功能迭代打基礎。當然，我本身也是很喜歡typescript的。
? 目前聊天室已經具備完整的聊天功能，今後會陸續開發更多酷炫的功能目前已經停止迭代！有興趣的朋友可以自行fork去開發，你們隨意改！我有時間再進行升級新功能!
專案介面
PC端
行動端
功能介紹
- 行動端相容
- 使用者資訊的修改(頭像/使用者名稱/密碼)
- 群聊/私聊
- 建立群組/加入群組/退群/模糊搜尋群
- 新增好友/刪好友/模糊搜尋用戶
- 訊息分頁
- 表情包
- 圖片發送/圖片預覽
- 線上人數統計
- 自訂主題
- 重連提醒
技術概覽
- Typescript ：JavaScript 的一個超集，它最大的優勢是提供了類型系統和提高了程式碼的可讀性和可維護性。
- Vue2.6.x ：前端漸進式框架。
- Socket/io ：實現即時通信，websocket第三方函式庫。
- Vuex ：專為Vue.js 應用程式開發的狀態管理模式。
- Nestjs ：是一個用於建立高效、可擴展的Node.js 服務端應用框架，基於TypeScript 編寫並且結合了OOP1、FP2、FRP3 的相關理念。
- Typeorm : 支援最新的JavaScript 特性並提供額外的特性來幫助你開發任何使用資料庫的應用程式。
- ES6+ ：採用ES6+語法，箭頭函數、async/await等等語法很好用。
- SASS(SCSS) ：用SCSS做CSS預處理語言，可以使用最有效率的方式，以少量的程式碼創造複雜的設計。
資料庫表結構設計
環境配置
- 資料庫mysql 以及chat資料庫(注意資料庫格式為utf8mb4)
- node v10.16.3
運行專案
- 前端專案
cd genal - chat - client
npm i
npm run serve
mysql配置如果mysql連不上併報錯error: ER_NOT_SUPPORTED_AUTH_MODE， 是mysql版本不相容導致，參考這篇文章https://blog.csdn.net/qq_41831345/article/details/83150502
資料庫沒有sql腳本，直接改後端app.module.ts中的資料庫密碼，新建個chat資料庫了就行
後端項目
cd genal - chat - server
npm i
npm run start: dev
系統迭代記錄
點擊查看
v1.0.0
功能
v1.0.0介面
v2.0.0
功能
- 群聊/私聊
- 建立群組/加入群組聊天/模糊搜尋群
- 新增好友/模糊搜尋好友
- 更改使用者名稱/頭像上傳
- 表情包
- 訊息分頁
v2.0.0介面
v3.0.0
功能
- 群聊/私聊
- 建立群組/加入群組聊天/模糊搜尋群
- 新增好友/模糊搜尋好友
- 圖片上傳/貼上發送圖片/圖片預覽
- 更改使用者名稱/頭像上傳
- 表情包
- 訊息分頁
v3.0.0介面
同v2.0.0
v4.0.0
功能
- 群聊/私聊
- 建立群組/加入群組聊天/模糊搜尋群
- 新增好友/模糊搜尋好友
- 圖片上傳/貼上發送圖片/圖片預覽
- 更改使用者名稱/頭像上傳
- 表情包
- 訊息分頁
- 行動端相容
v4.0.0介面
同v2.0.0
v5.0.0
功能
- 群聊/私聊
- 建立群組/加入群組聊天/退群/模糊搜尋群
- 新增好友/刪好友/模糊搜尋好友
- 圖片上傳/貼上發送圖片/圖片預覽
- 更改使用者名稱/頭像上傳
- 表情包
- 訊息分頁
- 行動端相容
- 線上人數統計
- 重連提醒
v5.0.0介面
v6.0.0
功能
- 行動端相容
- 使用者資訊的修改(頭像/使用者名稱/密碼)
- 群聊/私聊
- 建立群組/加入群組/退群/模糊搜尋群
- 新增好友/刪好友/模糊搜尋用戶
- 訊息分頁
- 表情包
- 圖片發送/圖片預覽
- 線上人數統計
- 自訂主題
- 重連提醒
v6.0.0介面
作者
github： edison
貢獻者列表
mtnbgx、BoBoooooo、Nyaasu66、BeanCookie（排名不分先後）
如何部署
阿童木聊天室部署說明
更多細節
用typescript打造一個效能強悍的web聊天室
