Краткий пример того, как присоединиться и покинуть комнаты, используя Flask и Socket.io?

Question

Я пытаюсь использовать socket.io с сервером Flask, подключенным к JS .. Я борюсь практически со всем, но мой первый шаг - сделать так, чтобы пользователи могли подключаться к разным каналам.Моя функция широковещательных сообщений работает, но когда я нажимаю на другой канал, сообщения не отправляются на другой канал. Что я делаю не так?

JS:

document.addEventListener('DOMContentLoaded', ()=>{

  // 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', () => {

    // 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 = () =>{
        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 = () => {
      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 =>{
    console.log(data);

    // Append message to list of messages
    const li = document.createElement('li');
    li.innerHTML = `${data.message}`;
    document.querySelector('#messages').append(li);

  });
});

Python Flask:

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)

Answer 1

Думайте о комнате как о массиве пользователей, которые остаются на сервере.Когда вы отправляете ваше сообщение в «отправить сообщение», вы устанавливаете broadcast=True, поэтому оно отправляет его как глобальное сообщение всем пользователям, если они подключены.Если вы хотите отправлять сообщения пользователям только в определенных комнатах, вам нужно будет указать, в какую комнату вы хотите отправлять сообщение от клиента, каждый раз, когда отправляете сообщение, например:

// client.js

socket.emit('join', { 'channel': channel, ... });
socket.emit('send message', {'message': message, 'channel': channel});

// server.py

@socketio.on("send message")
def message(data):
    room = data['channel']
    emit('broadcast message', data['message'], room=room)