Emitiendo eventos

La idea principal detrás de Socket.IO es que puedes enviar y recibir cualquier evento que quieras, con cualquier dato que quieras. Cualquier objeto que pueda ser codificado como JSON funcionará, y también se soportan datos binarios.

Hagamos que cuando el usuario escriba un mensaje, el servidor lo reciba como un evento chat message. La sección script en index.html ahora debería verse así:

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>

Y en index.js imprimimos el evento chat message:

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

El resultado debería ser como el siguiente video:

información

CommonJS

Puedes ejecutar este ejemplo directamente en tu navegador en:

• CodeSandbox
• StackBlitz

ES modules

Puedes ejecutar este ejemplo directamente en tu navegador en:

• CodeSandbox
• StackBlitz