イベントを送信する

Socket.IO の基本的な考え方は、任意のデータを伴って任意のイベントを送受信できるということです。JSON としてエンコードできるオブジェクトはすべて使用できます。バイナリデータもサポートされています。

ユーザーがメッセージを入力すると、サーバーがchat messageイベントとして取得するようにしましょう。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 でchat messageイベントを出力します。

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

結果は次の動画のようになります。

情報

CommonJS

このサンプルはブラウザで直接実行できます。

• CodeSandbox
• StackBlitz

ES モジュール

このサンプルはブラウザで直接実行できます。

• CodeSandbox
• StackBlitz