iT邦幫忙

2021 iThome 鐵人賽

DAY 11
1
Software Development

新手也能打造網路電話系統-WebRTC入門與活用系列 第 11

Day 11 - 應用篇 - 建構WebSocket聊天室(架構總覽)

了解WebSocket的概念後,我們要練習用Socket.IO來打造一個聊天室系統,藉此了解WebSocket的使用方式與概念,在日後實作WebRTC網路電話時能更得心應手。

本篇會先介紹聊天室的功能、專案架構、系統流程,讓大家大致了解我們接下來要做的事情有哪些。下方的畫面為成品。

聊天室功能與系統流程

功能需求

  • 使用者名稱輸入
  • 新成員加入聊天室顯示通知
  • 成員離開聊天室顯示通知
  • 訊息發送
  • 訊息顯示
  • 收到新訊息時滾動置底

系統流程-加入聊天室之前

https://ithelp.ithome.com.tw/upload/images/20210924/20118188m0r1upkUES.png

  1. UserA開啟瀏覽器輸入localhost:3001,以連線至Server。
  2. Server回傳網頁資源,讓UserA的瀏覽器呈顯聊天室系統的畫面。
  3. UserA輸入自己的使用者名稱。
  4. UserA向Server建立Socket連線。
  5. UserA向Server發送join事件,以加入房間。
  6. Server向UserA發送new member事件,以顯示UserA已加入的通知。
  7. UserB加入聊天室的流程與上述的UserA一致,差別在於Server會在最後向UserA與UserB發送new member事件,以顯示UserB已加入的通知。

系統流程-加入聊天室之後

https://ithelp.ithome.com.tw/upload/images/20210924/20118188IrI6GlsJK3.png

  1. UserA向Server發送message事件,以傳送訊息。
  2. Server向UserA與UserB發送new message事件,以顯示新訊息。
  3. UserA向Server終止Socket連線。
  4. Server向UserB發送member leave事件,以顯示UserA已離開的通知。

開發前置準備

開發工具

請大家先準備以下開發工具。

  • 開發環境:VSCode
  • 瀏覽器:Chrome
  • 網頁程式:HTML、CSS、JavaScript
  • 伺服器程式:NodeJS

專案架構

聊天室系統的專案架構如下,大家可以建立一個資料夾並新增以下的檔案。

套件安裝

建立完專案架構的檔案後,我們需要安裝專案會使用到的兩個套件。

  • NodeJS的Web API框架:Express
  • 即時通訊套件:Socket.IO

先開啟package.json檔案,在檔案中撰寫以下內容,以描述本專案的基本資訊與需要安裝的套件。

{
  "name": "chatroom",
  "version": "0.0.1",
  "description": "Chatroom based on WebSocket",
  "dependencies": {
    "express": "^4.17.1",
    "socket.io": "^4.1.2"
  }
}

開啟終端機,輸入以下指令來安裝套件。

npm install

安裝完成後,專案資料夾會產生一些新的檔案,這樣我們就可以準備來寫程式囉!


上一篇
Day 10 - 觀念篇 - WebSocket
下一篇
Day 12 - 應用篇 - 建構WebSocket聊天室(Client端)
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言