Day21：使用 ws 实作讯息传递

专案结构命名调整

调整部分档案名称，避免过於混淆。

- 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);
    });
  });
});