簡介
不知道你有沒有開發多人線上遊戲的夢呢？然後即時同步的問題卻卡住了你
如何將所有人的資料同步給所有人的電腦上，在該如何實現呢？
又或你已經略知一二，卻不知如何下手。
如果你有上述問題，那這堂課正是為你而準備！
我們將帶你深入淺出有關於 SocketIO 的基礎知識
從 0 到 100 搭出一個簡單的即時多人聊天網頁，為你的 sideproject 添上一筆。
課程影片
本課程以剪輯成全字幕教學
建議透過該影片學習
https://www.youtube.com/watch?v=ssmEkPq8txA
課程程式碼
https://github.com/SR0725/socketio-course
課程成品預覽
https://socketio-course.ray0725.repl.co/
課程使用技術
1. JavaScript
2. SocketIO
3. Canvas
4. 非常少量的 ExpressJs
課前提醒
我預估 7: 50 附近，會暫時離開 10 分鐘，就當是休息時間 XD
第一章
何謂 SocketIO
如果想讓前端跟後端互相傳送資料，我們可能會用 fetch 或 axios 來取得或傳送資料給後端
但如果想做到雙方即時的不間段通訊，SocketIO 會是當中一個非常好的技術來實踐這件事情
如果想理解更多，可以參考 socket.io 的通訊協定基礎 WebSocket。
開始
先建立一個空資料夾來前端與後端的檔案，打開資料夾，並在上方的位置列上輸入 cmd
<img height="0" width="0" src="https://res.cloudinary.com/diwnwuvcu/image/upload/f_auto,c_limit,w_1125,q_auto/nmfpofekpby91xwvggeq" />點擊 Enter 即可開啟指向該路徑的小黑窗
<img height="0" width="0" src="https://res.cloudinary.com/diwnwuvcu/image/upload/f_auto,c_limit,w_537,q_auto/dsnho6mqdehxzraos1gb" />我們現在要來 **Vite** 這個工具建立前端的專案檔
何謂 Vite
在前端開發的路上，荊棘不斷，前人設計了各種工具好讓後輩在這條路上走得更順利點
與過往純粹寫 HTML、JS 檔案不同，今天的課程將使用 Vite 這個前端建置工具
有關於 Vite 是什麼？他的細節，這個是可以單獨再用三個小時去解釋的，這並不會在本堂課的內容裏頭。
今天，我只會帶大家去使用這個工具，並且直接去感受 Vite 帶給我們的美好
建置前端專案
在剛剛開起的小黑窗中輸入
npm create vite@latest
他會跳出以下訊息，這邊是要你輸入專案名稱，這邊我使用 frontend 來作為我的專案名稱
? Project name: » vite-project
再來會詢問你使用什麼框架，我們沒有要使用任何框架，選擇`Vanilla`表示原生的 JS
<img height="0" width="0" src="https://res.cloudinary.com/diwnwuvcu/image/upload/f_auto,c_limit,w_551,q_auto/hopga5opm1ar4vldkxxx" />這裡是詢問使用什麼語言，我們這堂課不會使用 TypeScript，所以選擇 JavaScript
<img height="0" width="0" src="https://res.cloudinary.com/diwnwuvcu/image/upload/f_auto,c_limit,w_547,q_auto/rpr8swsmj88h9uksqsfx" />最後他會建立一個叫做 frontend 的資料夾並跳出以下訊息
```
Done. Now run:
cd frontend
npm install
npm run dev