技術共學｜來開發一個即時的多人聊天網頁與繪圖白板吧！

Ray 貓

29 Jul 2024 • 4 min read

📅 發布時間: 2024-07-29
🏷️ 標籤: SocketIO, Vite, JavaScript, Canvas, ExpressJS, 即時通訊

不知道你有沒有開發多人線上遊戲的夢呢？然後即時同步的問題卻卡住了你。如何將所有人的資料同步給所有人的電腦上，又該如何實現呢？如果你有上述問題，這堂課正是為你而準備！我們將帶你深入淺出有關 SocketIO 的基礎知識，從 0 到 100 搭出一個簡單的即時多人聊天網頁，為你的 sideproject 添上一筆。

簡介

不知道你有沒有開發多人線上遊戲的夢呢？然後即時同步的問題卻卡住了你

如何將所有人的資料同步給所有人的電腦上，在該如何實現呢？

又或你已經略知一二，卻不知如何下手。

如果你有上述問題，那這堂課正是為你而準備！

我們將帶你深入淺出有關於 SocketIO 的基礎知識

從 0 到 100 搭出一個簡單的即時多人聊天網頁，為你的 sideproject 添上一筆。

課程影片

本課程以剪輯成全字幕教學

建議透過該影片學習

https://www.youtube.com/watch?v=ssmEkPq8txA

課程程式碼

https://github.com/SR0725/socketio-course

課程成品預覽

https://socketio-course.ray0725.repl.co/

課程使用技術

JavaScript
SocketIO
Canvas
非常少量的 ExpressJs

課前提醒

我預估 7:50 附近，會暫時離開 10 分鐘，就當是休息時間 XD

第一章

何謂 SocketIO

如果想讓前端跟後端互相傳送資料，我們可能會用 fetch 或 axios 來取得或傳送資料給後端

但如果想做到雙方即時的不間段通訊，SocketIO 會是當中一個非常好的技術來實踐這件事情

如果想理解更多，可以參考 socket.io 的通訊協定基礎 WebSocket。

開始

先建立一個空資料夾來前端與後端的檔案，打開資料夾，並在上方的位置列上輸入 cmd

圖：位置列輸入 cmd 開啟命令提示字元

點擊 Enter 即可開啟指向該路徑的小黑窗

圖：命令提示字元已開啟

我們現在要來 Vite 這個工具建立前端的專案檔

何謂 Vite

在前端開發的路上，荊棘不斷，前人設計了各種工具好讓後輩在這條路上走得更順利點

與過往純粹寫 HTML、JS 檔案不同，今天的課程將使用 Vite 這個前端建置工具

有關於 Vite 是什麼？他的細節，這個是可以單獨再用三個小時去解釋的，這並不會在本堂課的內容裏頭。

今天，我只會帶大家去使用這個工具，並且直接去感受 Vite 帶給我們的美好

建置前端專案

在剛剛開起的小黑窗中輸入

npm create vite@latest

他會跳出以下訊息，這邊是要你輸入專案名稱，這邊我使用 frontend 來作為我的專案名稱

? Project name: » vite-project

再來會詢問你使用什麼框架，我們沒有要使用任何框架，選擇 Vanilla 表示原生的 JS

圖：選擇 Vanilla 框架

這裡是詢問使用什麼語言，我們這堂課不會使用 TypeScript，所以選擇 JavaScript

圖：選擇 JavaScript 語言

最後他會建立一個叫做 frontend 的資料夾並跳出以下訊息

Done. Now run:

  cd frontend
  npm install
  npm run dev

簡介