Versión: 4.x

Broadcasting

El siguiente objetivo es emitir el evento desde el servidor al resto de los usuarios.

Para enviar un evento a todos, Socket.IO nos da el método io.emit().

// esto emitirá el evento a todos los sockets conectados
io.emit('hello', 'world'); 

Si quieres enviar un mensaje a todos excepto a un cierto socket emisor, tenemos la bandera broadcast para emitir desde ese socket:

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

En este caso, por simplicidad enviaremos el mensaje a todos, incluyendo al emisor.

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

Y en el lado del cliente cuando capturamos un evento chat message lo incluiremos en la página.

<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>

<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>

Veámoslo en acción:

información

CommonJS
ES modules

Puedes ejecutar este ejemplo directamente en tu navegador en: