[全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt

章節連結

這回實際演練來打造一個即時聊天室來練功,使用者可以分為管理員和一般資格。其中使用到的主力套件和技術有:Vue.js, MySQL, Socket.io, passwort & passport-jwt, JavaScript, CSS, Bootstrap。

web development chatroom


規格開設 (SPEC)

  • 使用者需要登入留言
  • 使用者可以註冊帳號
  • 使用者可以即時看到自己和他人的訊息,無需刷新
  • 訊息需要有會員名稱、時間和訊息內容
  • 管理員和使用者都需要登入才能使用功能
  • 管理員有後台可以看到所有的會員資料
  • 管理員可以針對會員資料做新增
  • 管理員可以刪除會員資料

資料夾結構


事前準備

請先安裝好 git, heroku, nodejs, vue 的指令,並可以回傳對應的版本號。(表示安裝成功)

建置和測試步驟

1.建立初始資料夾

2.編輯 server 的 package.json

3.在 /server 下新增 .sequelizerc,並編輯之

4.安裝 server 所需套件
5.在 /chatroom 內新增並編輯 app.js,並修改存取前端頁面的資料夾。當為 production mode的時候,讀取 server 目錄下的 dict 資料夾。換言之,到時候前端頁面打包的輸出資料夾就得在這個指定位置裡。完整設定請看 Github 裡的內容,這邊只摘要部分。

6.執行 npx sequelize dB:generate 類的指令,產生 model, seeder 資料等,將內容依照 ERD 修改。因為有 .sequelizerc 了,所以產生的資料夾和檔案會在 /server 內,並能成功讀取。
7.
打開 MySQL Workbench 之類的工具,在本機端建立資料庫,名稱要和你在 server 的 package.json 的名稱是一樣的
8.執行 npx sequelize db:migrate & npx sequelize db:seed:all
9.在 /server/router 資料夾內設置對應的 api 路徑
10.將記載者要如何跟後端資料庫做互動的方法獨立寫在 /server/controller 內,再載入到 api 路徑中

11.運用 Postman 工具,測試一下 api 能否正確回傳 .json 檔案
12.
在 /chatroom 下,使用 vue create client,並採用預設的 ESLInt , 不使用 history mode
13.
cd client,並安裝前端所需的套件。( axios, bootstrap, vuex, vue-router)

14.在 /chatroom/client 下新增 vue.config.js,設定輸出資料夾和代理伺服器位置,將前端發出的 http://localhost:8080 對應到後端的 http://localhost:3000

15.新增登入頁面,並測試後端是否可以接收到,這時多半會跑出 CORS 錯誤
16.將 Server 內的 app.js,新增 app.use(cors()),小心不要忘記()
17.
再測試是否可以回傳 json 訊息
18.
後端 server 設置 passport-jwt
19.在前端頁面測試可否傳回對應的使用者 json,權限設置正確
20.用 vuex 向後端取得設定檔,並在每個 view 內以 …mapState 的方法取得 vuex 內的狀態,詳情參見:[筆記] Vue 的狀態管理 Vuex 實作心得
21.開發非 socket.io 即時聊天的部分
22.開發需 socket.io 協助的部份
23.調整 css 版型,優惠使用者體驗
24.撰寫測試
25.進行heroku 佈署前作業,取得子目錄網址

26.修正後台資料庫網址成發佈版本(也就是上一步取得的 heroku 網址)
27.
在 /chatroom/client 資料夾下執行 npm run build,會發覺生成一個 public 資料夾就在 server 資料夾內
28.將後端 server 的 api 網址的 app.use(‘/’) 給取消掉,否則會無法顯示首頁
29.推到 heroku 上,測試可否正常運作
30.編寫 README.md 檔案



參考資料

1.node.js搭建接口(七):Node-使用passport-jwt验证token
2.Node.js 實作 The F2E_ChatRoom (1) 環境建置
3.[Node.js]Socket.io
4.Vue-Socket.io DEMO
5.express 搭配 mongodb 建立聊天室
6.Socket.IO使用技巧(一)
7.Vue-Socket.io的使用
8.vuex+socket.io实现实时私聊功能
9.Node.js + Web Socket 打造即时聊天程序
10.使用socket.io遇到的一些坑
11.vue中使用 vue-socket.io

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:94