Question

我正在尝试将socket.io与连接到JS的Flask服务器一起使用。.我基本上都在努力工作，但是我要做的第一步就是使它能够使用户连接到不同的频道。我的广播消息功能正常运行，但是当我单击其他频道时，消息不会发送到其他频道。我在做什么错了？

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)

Answer 2

我相信第一个答案是正确的。请注意，尽可能避免使用“innerhtml”，尤其是在这种情况下。通过设置innerhtml，用户在消息中写入的任何内容都将在另一端被视为html。这包括脚本标签，这意味着有人可以通过发送恶意消息在其他人的机器上远程运行 javascript。

我建议使用innerText 或textContent。这会将消息视为纯文本而不是 html。它们略有不同，因此可能值得研究一下您需要哪一个。

我会这样做作为评论，但我的代表不够高。

tl:dr 使用 textContent 或innerText 代替innerhtml。

关于如何使用Flask和Socket.io进出房间的简明示例？

2 个答案: