ブロードキャスト

次の目標は、サーバーからイベントを他のすべてのユーザーに送信することです。

Socket.IO には、イベントをすべての人に送信するための io.emit() メソッドがあります。

// this will emit the event to all connected sockets
io.emit('hello', 'world'); 

特定の送信ソケットを除く全員にメッセージを送信したい場合は、そのソケットから送信するための broadcast フラグがあります。

io.on('connection', (socket) => {
  socket.broadcast.emit('hi');
});

この場合、簡潔にするために、送信者を含めて全員にメッセージを送信します。

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

そして、クライアント側で chat message イベントをキャプチャしたときに、ページに含めます。

ES6

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

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

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

  socket.on('chat message', (msg) => {
    const item = document.createElement('li');
    item.textContent = msg;
    messages.appendChild(item);
    window.scrollTo(0, document.body.scrollHeight);
  });
</script>

ES5

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

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

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

  socket.on('chat message', function(msg) {
    var item = document.createElement('li');
    item.textContent = msg;
    messages.appendChild(item);
    window.scrollTo(0, document.body.scrollHeight);
  });
</script>

実際に見てみましょう

情報

CommonJS

この例は、ブラウザで直接実行できます。

• CodeSandbox
• StackBlitz

ES モジュール

この例は、ブラウザで直接実行できます。

• CodeSandbox
• StackBlitz