廣播

我們的下一個目標是從伺服器發射事件到其他使用者。

為了將事件傳送給所有人，Socket.IO 提供了 io.emit() 方法。

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

如果您想傳送訊息給所有人，除了特定發射 socket 之外，我們有 broadcast 旗標，可從該 socket 發射

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