發送事件

Socket.IO 背後的主要概念是，您可以傳送和接收任何想要的事件，以及任何想要的資料。任何可以編碼為 JSON 的物件都可以，而且也支援二進位資料。

讓我們設定當使用者輸入訊息時，伺服器會將其接收為聊天訊息事件。index.html 中的script 區段現在應如下所示

ES6

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();

  const form = document.getElementById('form');
  const input = document.getElementById('input');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (input.value) {
      socket.emit('chat message', input.value);
      input.value = '';
    }
  });
</script>

ES5

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();

  var form = document.getElementById('form');
  var input = document.getElementById('input');

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    if (input.value) {
      socket.emit('chat message', input.value);
      input.value = '';
    }
  });
</script>

而在 index.js 中，我們會列印出聊天訊息事件

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
  });
});

結果應如下面的影片所示

資訊

CommonJS

您可以在以下位置直接於瀏覽器中執行此範例

• CodeSandbox
• StackBlitz

ES 模組

您可以在以下位置直接於瀏覽器中執行此範例

• CodeSandbox
• StackBlitz