06-broadcasting.md

title	Tutorial step #5 - Broadcasting
sidebar_label	Step #5: Broadcasting
slug	step-5

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

Broadcasting

The next goal is for us to emit the event from the server to the rest of the users.

In order to send an event to everyone, Socket.IO gives us the io.emit() method.

// this will emit the event to all connected sockets
// put this code on index.js file
io.emit('hello', 'world'); 

If you want to send a message to everyone except for a certain emitting socket, we have the broadcast flag for emitting from that socket:

// put this code on index.js file
io.on('connection', (socket) => {
  socket.broadcast.emit('hi');
});

In this case, for the sake of simplicity we’ll send the message to everyone, including the sender.

replace this line of code from index.js 
io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

And on the client side when we capture a chat message event we’ll include it in the page.

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

  const form = document.getElementById('form');
  const input = document.getElementById('input');
  // highlight-start
  const messages = document.getElementById('messages');
  // highlight-end

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

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

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

  var form = document.getElementById('form');
  var input = document.getElementById('input');
  // highlight-start
  var messages = document.getElementById('messages');
  // highlight-end

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

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

Let's see it in action:

:::info

You can run this example directly in your browser on:

• CodeSandbox

• StackBlitz

You can run this example directly in your browser on:

• CodeSandbox

• StackBlitz

:::