專案結構命名調整

調整部分檔案名稱，避免過於混淆。

- client
    - main.js -> client.js

- server
    - index.js -> server.js

引用 js 的路徑也要修正。

// index.html

<script src="./client.js"></script>

安裝 nodemon plugin。

yarn add nodemon -D

package.json 寫入 scripts

"scripts": {
    "dev": "nodemon server.js"
},

Step1 : 監聽送出的訊息

// index.html
<input type="text" class="input-message" />
<button type="button" class="send-btn">Send Message</button>

透過 DOM 操作來監聽按鈕按下時，input 輸入的值為何?並將其送給 server-side。

// client.js

const sendBtn = document.querySelector('.send-btn');
sendBtn.addEventListener('click', () => {
  const inputValue = document.querySelector('.input-message').value;
  ws.send(inputValue);
  document.querySelector('.input-message').value = '';
});

Step2 & Step3 : 監聽接收訊息並轉發

server-side 接收到的訊息，已經被轉成二進制的形式，所以這邊需要再重新轉回 string，方便儲存或是轉發回 client-side。

// server.js

wss.on('connection', function connection(ws) {
  // Step2 : received client-side message
  ws.on('message', function (message) {
    const bufferMessage = Buffer.from(message).toString();
    // Step3 : Forward to client-side
    ws.send(bufferMessage);
  });
});

Step4 : 印出轉發回來的訊息

// received message and render in HTML
ws.onmessage = function (event) {
  console.log(event.data);
};

但這樣存在一個問題，能夠接收到轉發回來訊息的 client-side，只有送出訊息的那一方，若有其他登入的玩家或使用者，依然是無法接收到轉發回來的訊息，所以這邊需要使用廣播的方式，讓所有人都能收到訊息。

回到 server.js

透過 ws 的 api 結合 forEach 找到當前所有使用者，針對所有人都發送訊息。

wss.on('connection', function connection(ws) {
  // Step2 : received client-side message
  ws.on('message', function (message) {
    const bufferMessage = Buffer.from(message).toString();
    // Step3 : Forward to client-side
    wss.clients.forEach((client) => {
      client.send(bufferMessage);
    });
  });
});