本系列文已改編成書「甚麼？網頁也可以做派對遊戲？使用 Vue 和 babylon.js 打造 3D 派對遊戲吧！」

書中不只重構了程式架構、改善了介面設計，還新增了 2 個新遊戲呦！ˋ( ° ▽、° )

新遊戲分別使用了陀螺儀與震動回饋，趕快買書來研究研究吧！ლ(╹∀╹ლ)

在此感謝深智數位的協助，歡迎大家前往購書，鱈魚感謝大家 (｡･∀･)。

助教：「所以到底差在哪啊？沒圖沒真相，被你坑了都不知道。(´。＿。｀)」

鱈魚：「你對我是不是有甚麼很深的偏見啊 (っ °Д °;)っ，來人啊，上連結！」

所以甚麼是 NestJS？為甚麼要用 NestJS？

NestJS 是一個以 TypeScript 為主要開發語言並啟發於 Angular，實踐了 OOP、AOP 等等設計模式與 架構，提供一個嚴謹且低耦合的開發環境。

至於為甚麼要用 NestJS？因為有貓就給讚！ᕕ( ﾟ ∀。)ᕗ（大誤

其實主要是為了盡可能多練習 NestJS，所以在此專案中，後端伺服器決定採用 NestJS 進行開發。

而本次專案也不會使用到資料庫，所以規模更為單純，更適合和大家一起練習練習。

在開始之前先記得安裝 Nest CLI。（已經安裝過的讀者就不用再次安裝）

npm install -g @nestjs/cli

想要更加了解 NestJS 概念與知識的讀者，可以參考此連結：NestJS 帶你飛！

那就讓我們開始吧。

Socket.IO 連線時，會配給 client 一個 socket id，但是重新連線時 socket id 都不一樣，為了實現「就算 socket id 不同，也要能夠辨識出是誰」的功能需求。

就先讓我們新增負責處理 Socket.IO 連線的資源吧。

我們使用 Nest CLI 指令替我們自動新增資源，打開終端機後輸入以下指令

nest g resource ws-client

Nest CLI 會詢問一系列設定，協助我們快速建立並自動引用資源模組。

• What transport layer do you use?

  選擇「WebSockets」

• Would you like to generate CRUD entry points?

  因為用不到 CRUD，也沒有資料庫，所以這裡請輸入「n」

接著就會看到終端機跑出一堆訊息。

? What transport layer do you use? WebSockets
? Would you like to generate CRUD entry points? No
CREATE src/ws-client/ws-client.gateway.spec.ts (547 bytes)
CREATE src/ws-client/ws-client.gateway.ts (232 bytes)     
CREATE src/ws-client/ws-client.module.ts (244 bytes)      
CREATE src/ws-client/ws-client.service.spec.ts (475 bytes)
CREATE src/ws-client/ws-client.service.ts (92 bytes)      
UPDATE src/app.module.ts (332 bytes)

而且專案資料夾也發生變化了。

如上圖，Nest CLI 自動幫我們產生 ws-client 所需要的所有檔案，還自動在 app.module.ts 中引入檔案，是不是非常的快速且貼心啊！(´,,•ω•,,)

接下來就準備讓我們開始實作連線功能，後續章節中，我們會不斷的在 web 與 server 專案之間切換。

大家坐穩了，讓我們出發吧！─=≡Σ((( つ•̀ω•́)つ

總結

• 認識 NestJS
• 使用 Nest CLI 快速產生資源。

以上程式碼已同步至 GitLab，大家可以前往下載：

GitLab - D09