---
# System prepended metadata

title: 簡易 Websocket demo

---

# 簡易 Websocket demo

## Server 端（node.js）

首先將以下 code 貼進名為 demo.js 的檔案（自己建立）

```
// 在伺服器端安裝 ws 模組
const WebSocket = require('ws');

// 建立 WebSocket 伺服器
const wss = new WebSocket.Server({ port: 8080 });

// 監聽 connection 事件，建立新的 WebSocket 連接
wss.on('connection', function connection(ws) {
  // 監聽 message 事件，接收客戶端發送的訊息
  ws.on('message', function incoming(message) {
    // 將收到的訊息廣播給所有已連接的用戶
    const msg = JSON.parse(message)
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(msg);
      }
    });
  });
});
```

## Client 端 (javascript)

然後將以下 code 貼進 client.html (一樣自己建立)

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" class="textbox" />
    <button class="sendButton">send</button>
    <div
      class="chatWindow"
      style="width: 600px; height: 400px; background: #e0e0e0"
    ></div>
  </body>
  <script>
    // 建立 WebSocket 連接
    const socket = new WebSocket('ws://localhost:8080');

    const textbox = document.querySelector('.textbox');
    const sendButton = document.querySelector('.sendButton');
    const chatWindow = document.querySelector('.chatWindow');

    // 監聽 message 事件，並在收到新訊息時將其顯示在聊天視窗中
    socket.onmessage = function (event) {
      console.log(event);
      const message = event.data;
      chatWindow.innerHTML += '<p>' + message + '</p>';
    };

    // 當用戶輸入訊息並按下發送按鈕時，使用 send 方法將訊息發送到伺服器
    sendButton.onclick = function () {
      const message = textbox.value;
      chatWindow.innerHTML += '<p>' + message + '</p>';
      socket.send(message);
    };
  </script>
</html>

```

## 啟動

**請記得一定要先啟動 nodejs server 再去做以下的事情!!**

啟動 liverserver 並打開兩個視窗，就可以互相傳訊息了，下方的灰匡會呈現即時聊天訊息
