title: Concise example of how to join and leave rooms using Flask and Socket.io?
body: <p>I'm trying to use socket.io with a Flask server connecting to JS.. I'm struggling with basically everything, but my first step is to make it so that users can connect to different channels. My broadcast message function is working, but when I click on a different channel, the messages do not get sent to a different channel.. What am I doing wrong?</p>
  
  <p>JS:</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', ()=&gt;{
  
    // Send user back to login page if they didn't sign in
    const username = localStorage.getItem('username');
    if (username == null){
      window.location = "/";
    }
  
    // Switch button active class when clicked
    $('.list-group .list-group-item.list-group-item-action').click(function(e) {
      $('.list-group .list-group-item.list-group-item-action.active').removeClass('active');
      var $this = $(this);
      if (!$this.hasClass('active')) {
          $this.addClass('active');
      }
      e.preventDefault();
    });
  
    // Connect to socket.io
    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
  
    socket.on('connect', () =&gt; {
  
      // Automatically connect to general channel
      socket.emit('join',{"channel": "general", "username":username});
  
      // When a channel is clicked, connect to that channel
      document.querySelectorAll('.list-group-item').forEach(function(channel){
        channel.onclick = () =&gt;{
          socket.emit('join',{"channel":channel.innerHTML, "username":username});
          return false;
        }
      });
  
      // When a message is sent, call 'send message' function from server
      document.querySelector('#send-message').onsubmit = () =&gt; {
        const message = document.querySelector('#m').value
        socket.emit('send message', {'message': message});
  
        // Clear message form
        document.querySelector('#m').value = "";
  
        return false;
      };
    });
  
  
  
    // Callback from server for sending messages
    socket.on('broadcast message', data =&gt;{
      console.log(data);
  
      // Append message to list of messages
      const li = document.createElement('li');
      li.innerHTML = `${data.message}`;
      document.querySelector('#messages').append(li);
  
    });
  });
  </code></pre>
  
  <p>Python Flask:</p>
  
  <pre><code>import os
  
  from flask import Flask, render_template, url_for
  from flask_socketio import SocketIO, emit, join_room, leave_room
  from collections import defaultdict
  
  app = Flask(__name__)
  app.config["SECRET_KEY"] = os.getenv("SECRET_KEY")
  socketio = SocketIO(app)
  
  messages = defaultdict(list)
  channels = ["Programming"]
  
  @app.route("/")
  def index():
      return render_template("login.html")
  
  @app.route("/chatroom/")
  def chatroom():
      return render_template("chatroom.html", channels=channels, messages=messages)
  
  @socketio.on("send message")
  def message(data):
      print(data)
      emit("broadcast message",  {"message": message}, broadcast=True)
  
  @socketio.on('join')
  def on_join(data):
      username = data['username']
      channel = data['channel']
      join_room(channel)
      #send(username + ' has entered the room.', channel=channel)
  
  if __name__ == '__main__':
      socketio.run(app)
  </code></pre>