广播

我们的下一个目标是从服务器向其他用户发射事件。

为了向所有人发送事件，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