Ошибка Socket.IO / JavaScript при трансляции сообщения в комнату (ы) - PullRequest
Новая
       5

Ошибка Socket.IO / JavaScript при трансляции сообщения в комнату (ы)

0 голосов
/ 11 февраля 2020

Я работаю над чат-приложением с Socket.IO (сервер использует flask -SocketIO). Пользователи могут создавать новые каналы (комнаты) и переключаться между ними. В моем коде ниже по какой-то причине каждый раз, когда я переключаюсь (обратно) в комнату (даже имея одну комнату и «переключаюсь» обратно на нее), функция-обработчик «широковещательного сообщения» выполняется дополнительное время. То есть, если я отправляю «Hello» на «channel_1», переключаюсь обратно на другой канал и затем обратно на «channel_1», а затем отправляю «Hello again», он транслируется (console.log в моем примере) ДВАЖДЫ. И в следующий раз я переключаюсь обратно на «канал_1», 3 раза, и т. Д. c. Я подумал, что это должно быть как-то связано с JS -кодом, может быть, так называется метод connectSocket (), потому что flask -app выдает «широковещательное сообщение» только один раз каждый раз. Извиняюсь за длинный код - я пропустил ненужные биты как мог. 

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

  // IF USER SWITCHES / SELECTS EXISTING CHANNEL
  document.querySelector('#select_channel').onsubmit = () => {
    var channel = document.querySelector('select').value;

    const r2 = newXHR();
    r2.open('POST', '/select_channel');
    const data = new FormData();
    data.append('channel', channel);
    r2.onload = () => {
      connectSocket(channel);
    };
    r2.send(data);
    return false;
  }


  // IF USER CREATES NEW CHANNEL
  document.querySelector('#new_channel').onsubmit = () => {
    const new_channel_name = document.querySelector('#new_channel_name').value;
    const r1 = newXHR();
    r1.open('POST', '/new_channel');
    const data = new FormData();
    data.append('new_channel_name', new_channel_name);
    r1.onload = () => {
      const response = JSON.parse(r1.responseText);
      if (response.channel_exists) {
        alert("Channel already exists");
        return false;
      }
      else {
        const option = document.createElement('option');
        option.innerHTML = new_channel_name;
        document.querySelector('select').append(option);

        connectSocket(new_channel_name);
        document.getElementById('new_channel').reset();
      }
    };
    r1.send(data);
    return false;
  };
});


function connectSocket(channel) {
  var socket = io();
  socket.on('connect', () => {
    // if user previously connected to any channel, disconnect him
    if (localStorage.getItem('channel') != null)
      {
        socket.emit('leave', {'room': localStorage.getItem('channel'), 'username': display_name});
      }
    socket.emit('join', {'room': channel, 'username': display_name});
    localStorage.setItem('channel', channel);
    const data = new FormData();
    data.append('username', display_name);
    data.append('room', channel);
    document.querySelector('#current_channel').innerHTML = channel;

  });

  document.querySelector('#send_message').onsubmit = () => {
    var message = document.querySelector('#message').value;
    socket.emit('send', {'message': message, 'room': channel});
    console.log(`SENDING ${message}`);
    return false;
  }

  // PROBLEM: EVERY TIME CHANNEL CHANGED AND MSG SENT IN THAT CHANNEL -> 1 EXTRA COPY OF THAT MESSAGE IS BROADCAST - I>E> THE BELOW IS DONE +1 TIMES
  socket.on('broadcast message', function handle_broadcast (data) {
    console.log(data);
  });
}

Фрагменты Python: 

# [IMPORT & CONFIG STATEMENTS...]

socketio = SocketIO(app, logger=True, engineio_logger=True)

# Global variables
channels = []
messagetext = None


@app.route("/select_channel", methods=["GET", "POST"])
def select_channel():
  if request.method == "POST": 
    channel = request.form.get("channel")
    session["channel"] = channel
    return jsonify({"success": True})
  return render_template("chat.html", channels = channels)

@app.route("/new_channel", methods=["GET", "POST"])
def new_channel():
  if request.method == "POST":
    new_channel = request.form.get("new_channel_name")
    if new_channel in channels:
      return jsonify({"channel_exists": True})

    else:
      channels.append(new_channel)
      session["channel"] = new_channel
      return json.dumps(channels)
  return render_template("chat.html", channels = channels)

@socketio.on('join')
def on_join(data):
    username = data['username']
    room = data['room']
    join_room(room)
    send(username + ' has entered the room.', room=room)

@socketio.on('leave')
def on_leave(data):
    username = data['username']
    room = data['room']
    leave_room(room)
    send(username + ' has left the room.', room=room)

@socketio.on("send") 
def handle_send(data):
  messagetext = data["message"]
  room = data["room"]
  emit("broadcast message", {"message": messagetext}, room=room)


if __name__ == '__main__':
  socketio.run(app, debug=True)

1 Ответ

0 голосов
/ 11 февраля 2020

Я думаю, что в библиотеке Flask-SocketIO, когда вы входите в комнату, если вы не передаете sid, она использует flask.request.sid. Я не уверен, что Flask-SocketIO использует для этого свойства, но я предполагаю, что когда вы входите в комнату, устанавливается один sid. И когда вы выходите из комнаты, возможно используется другая sid, что означает, что ваш первоначальный клиент фактически не выходил из комнаты. Поэтому, когда они присоединяются снова, создается новое соединение (имеется в виду второе параллельное соединение), которое может объяснить, почему вы получаете широковещательное сообщение несколько раз.

Я бы рекомендовал попытаться создать свой собственный sid для передачи. в функции join_room() и leave_room(), чтобы посмотреть, решит ли это проблему. Вы можете передать его с клиента на сервер и просто для тестирования это может быть что-то простое, например session1.

Надеюсь, это поможет.

...