Javascript socketio:客户端未接收消息

我正在测试socketio，以构建一个具有多个频道的小型聊天应用程序。 我已设法将数据从客户端发送到服务器。服务器正在发回通道已创建的消息。但是，我的客户没有收到消息。有什么想法吗

客户端代码： 除了“频道已存在”和“频道已创建”这两个事件外，一切正常。 服务器正在发送这些事件，但客户端似乎没有收到它们，因为我的控制台中没有显示任何内容

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

  // Connect to websocket
  var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);

  // When connected, the user can register his username
  socket.on('connect', () => {

    document.getElementById('new_channel').hidden = true;

    if (localStorage.username) {
      socket.emit('register', {'username': localStorage.username});
    } else {
        document.getElementById('registration').onsubmit = () => {
          const username = document.getElementById('username').value;
          localStorage.setItem('username', username);
          socket.emit('register', {'username': username});
        };
    }
  });

  socket.on('registered', () => {
    const username = localStorage.username;
    document.getElementById('registration').innerHTML = '';
    document.getElementById('new_channel').hidden = false;
    document.getElementById('welcome').innerHTML = `Welcome ${username}`;
  });

  document.getElementById('new_channel').onsubmit = () => {
    const channel_name = document.getElementById('channel_id').value;
    socket.emit('new_channel', {'channel_name': channel_name});
  };

  socket.on('channel_already_exists', () => {
    console.log('already exists');
    document.getElementById('channel_message').innerHTML = 'Channel already exists. Please select another name.';
  });

  socket.on('channel_created', channels => {
    console.log('channel created');
    document.getElementById('channel_message').innerHTML = 'Channel has been created.';
  });

});

烧瓶上的服务器代码：

import os
import requests

from flask import Flask, jsonify, render_template, request
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config["SECRET_KEY"] = os.getenv("SECRET_KEY")
socketio = SocketIO(app)

users = set()
channels = {}

@app.route("/")
def index():
    not_registered = True
    return render_template("index.html")

#Register new user
@socketio.on("register")
def on_register(data):
    print("register")
    username = data["username"]
    users.add(username)
    emit("registered")

@socketio.on("new_channel")
def on_new_channel(data):
    print("new_channel")
    channel_name = data["channel_name"]
    if channel_name in channels:
        print("channel_already_exists")
        emit("channel_already_exists")
    else:
        #create a new empty channel
        print("new_channel_created")
        channels[channel_name] = ""
        emit('channel_created', channels)

尝试创建新频道时的客户端日志（即提交“新频道”时）

服务器日志：

C:\Users\rober\project2>flask run
 * Serving Flask app "application.py"
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
[2019-11-26 10:57:44,233] WARNING in __init__: Flask-SocketIO is Running under Werkzeug, WebSocket is not available.
Server initialized for threading.
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Invalid session e0e081d67cbf4189b990c1dc103da589
127.0.0.1 - - [26/Nov/2019 10:57:44] "GET /socket.io/?EIO=3&transport=polling&t=1574762243279-331&sid=e0e081d67cbf4189b990c1dc103da589 HTTP/1.1" 400 -
f3cc277e7bec49c8b2eba1272d102a6c: Sending packet OPEN data {'sid': 'f3cc277e7bec49c8b2eba1272d102a6c', 'upgrades': [], 'pingTimeout': 60000, 'pingInterval': 25000}
f3cc277e7bec49c8b2eba1272d102a6c: Sending packet MESSAGE data 0
127.0.0.1 - - [26/Nov/2019 10:57:44] "GET /socket.io/?EIO=3&transport=polling&t=1574762264065-380 HTTP/1.1" 200 -
f3cc277e7bec49c8b2eba1272d102a6c: Received packet MESSAGE data 2["register",{"username":"robert"}]
received event "register" from f3cc277e7bec49c8b2eba1272d102a6c [/]
register
127.0.0.1 - - [26/Nov/2019 10:57:44] "POST /socket.io/?EIO=3&transport=polling&t=1574762264385-381&sid=f3cc277e7bec49c8b2eba1272d102a6c HTTP/1.1" 200 -
emitting event "registered" to f3cc277e7bec49c8b2eba1272d102a6c [/]
f3cc277e7bec49c8b2eba1272d102a6c: Sending packet MESSAGE data 2["registered",null]
127.0.0.1 - - [26/Nov/2019 10:57:44] "GET /socket.io/?EIO=3&transport=polling&t=1574762264393-382&sid=f3cc277e7bec49c8b2eba1272d102a6c HTTP/1.1" 200 -
Invalid session e0e081d67cbf4189b990c1dc103da589
127.0.0.1 - - [26/Nov/2019 10:57:45] "POST /socket.io/?EIO=3&transport=polling&t=1574762265345-332&sid=e0e081d67cbf4189b990c1dc103da589 HTTP/1.1" 400 -
ca6c4332a9f347eab56882912b70a309: Sending packet OPEN data {'sid': 'ca6c4332a9f347eab56882912b70a309', 'upgrades': [], 'pingTimeout': 60000, 'pingInterval': 25000}
ca6c4332a9f347eab56882912b70a309: Sending packet MESSAGE data 0
127.0.0.1 - - [26/Nov/2019 10:57:45] "GET /socket.io/?EIO=3&transport=polling&t=1574762265792-4 HTTP/1.1" 200 -
44e90573522c46f583a5811c21a2cf97: Sending packet OPEN data {'sid': '44e90573522c46f583a5811c21a2cf97', 'upgrades': [], 'pingTimeout': 60000, 'pingInterval': 25000}
44e90573522c46f583a5811c21a2cf97: Sending packet MESSAGE data 0
127.0.0.1 - - [26/Nov/2019 10:57:47] "GET /socket.io/?EIO=3&transport=polling&t=1574762267360-333 HTTP/1.1" 200 -
44e90573522c46f583a5811c21a2cf97: Received packet MESSAGE data 2["register",{"username":"robert"}]
received event "register" from 44e90573522c46f583a5811c21a2cf97 [/]
register
127.0.0.1 - - [26/Nov/2019 10:57:48] "POST /socket.io/?EIO=3&transport=polling&t=1574762267414-334&sid=44e90573522c46f583a5811c21a2cf97 HTTP/1.1" 200 -
emitting event "registered" to 44e90573522c46f583a5811c21a2cf97 [/]
44e90573522c46f583a5811c21a2cf97: Sending packet MESSAGE data 2["registered",null]
127.0.0.1 - - [26/Nov/2019 10:57:48] "GET /socket.io/?EIO=3&transport=polling&t=1574762267420-335&sid=44e90573522c46f583a5811c21a2cf97 HTTP/1.1" 200 -
ca6c4332a9f347eab56882912b70a309: Received packet MESSAGE data 2["register",{"username":"goeland"}]
received event "register" from ca6c4332a9f347eab56882912b70a309 [/]
register
127.0.0.1 - - [26/Nov/2019 10:57:51] "POST /socket.io/?EIO=3&transport=polling&t=1574762271133-6&sid=ca6c4332a9f347eab56882912b70a309 HTTP/1.1" 200 -
emitting event "registered" to ca6c4332a9f347eab56882912b70a309 [/]
ca6c4332a9f347eab56882912b70a309: Sending packet MESSAGE data 2["registered",null]
127.0.0.1 - - [26/Nov/2019 10:57:51] "GET /socket.io/?EIO=3&transport=polling&t=1574762265812-5&sid=ca6c4332a9f347eab56882912b70a309 HTTP/1.1" 200 -
127.0.0.1 - - [26/Nov/2019 10:57:51] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [26/Nov/2019 10:57:51] "GET /static/index.js HTTP/1.1" 200 -
ccc77d7deda843fa8a846527cb19e4db: Sending packet OPEN data {'sid': 'ccc77d7deda843fa8a846527cb19e4db', 'upgrades': [], 'pingTimeout': 60000, 'pingInterval': 25000}
ccc77d7deda843fa8a846527cb19e4db: Sending packet MESSAGE data 0
127.0.0.1 - - [26/Nov/2019 10:57:51] "GET /socket.io/?EIO=3&transport=polling&t=1574762271323-0 HTTP/1.1" 200 -
ccc77d7deda843fa8a846527cb19e4db: Received packet MESSAGE data 2["register",{"username":"goeland"}]
received event "register" from ccc77d7deda843fa8a846527cb19e4db [/]
register
127.0.0.1 - - [26/Nov/2019 10:57:51] "POST /socket.io/?EIO=3&transport=polling&t=1574762271378-1&sid=ccc77d7deda843fa8a846527cb19e4db HTTP/1.1" 200 -
emitting event "registered" to ccc77d7deda843fa8a846527cb19e4db [/]
ccc77d7deda843fa8a846527cb19e4db: Sending packet MESSAGE data 2["registered",null]
127.0.0.1 - - [26/Nov/2019 10:57:51] "GET /socket.io/?EIO=3&transport=polling&t=1574762271379-2&sid=ccc77d7deda843fa8a846527cb19e4db HTTP/1.1" 200 -
ccc77d7deda843fa8a846527cb19e4db: Received packet MESSAGE data 2["new_channel",{"channel_name":"channel 3"}]
received event "new_channel" from ccc77d7deda843fa8a846527cb19e4db [/]
127.0.0.1 - - [26/Nov/2019 10:57:56] "GET / HTTP/1.1" 200 -
new_channel
127.0.0.1 - - [26/Nov/2019 10:57:56] "POST /socket.io/?EIO=3&transport=polling&t=1574762276888-4&sid=ccc77d7deda843fa8a846527cb19e4db HTTP/1.1" 200 -
{}
new_channel_created {}
emitting event "channel_created" to ccc77d7deda843fa8a846527cb19e4db [/]
ccc77d7deda843fa8a846527cb19e4db: Sending packet MESSAGE data 2["channel_created","channel 3"]
127.0.0.1 - - [26/Nov/2019 10:57:56] "GET /socket.io/?EIO=3&transport=polling&t=1574762271422-3&sid=ccc77d7deda843fa8a846527cb19e4db HTTP/1.1" 200 -
127.0.0.1 - - [26/Nov/2019 10:57:56] "GET /static/index.js HTTP/1.1" 200 -
0409f655ccc642f68322c4a9f64c3b66: Sending packet OPEN data {'sid': '0409f655ccc642f68322c4a9f64c3b66', 'upgrades': [], 'pingTimeout': 60000, 'pingInterval': 25000}
0409f655ccc642f68322c4a9f64c3b66: Sending packet MESSAGE data 0
127.0.0.1 - - [26/Nov/2019 10:57:57] "GET /socket.io/?EIO=3&transport=polling&t=1574762277050-0 HTTP/1.1" 200 -
0409f655ccc642f68322c4a9f64c3b66: Received packet MESSAGE data 2["register",{"username":"goeland"}]
received event "register" from 0409f655ccc642f68322c4a9f64c3b66 [/]
register
127.0.0.1 - - [26/Nov/2019 10:57:57] "POST /socket.io/?EIO=3&transport=polling&t=1574762277100-1&sid=0409f655ccc642f68322c4a9f64c3b66 HTTP/1.1" 200 -
emitting event "registered" to 0409f655ccc642f68322c4a9f64c3b66 [/]
0409f655ccc642f68322c4a9f64c3b66: Sending packet MESSAGE data 2["registered",null]
127.0.0.1 - - [26/Nov/2019 10:57:57] "GET /socket.io/?EIO=3&transport=polling&t=1574762277101-2&sid=0409f655ccc642f68322c4a9f64c3b66 HTTP/1.1" 200 -

---

根据您包含的日志，问题是由应用程序中的错误设计引起的

客户端请求通过web表单创建一个新频道。表单通过GET或POST请求提交数据，这会导致浏览器删除当前页面，然后重新加载表单提交请求响应附带的页面。浏览器重新加载页面时，会删除所有连接，包括Socket.IO链接。这就是为什么您的客户端没有收到由于此表单提交而产生的消息

---

我的建议是，将表单提交更改为使用AJAX，以便浏览器将其作为后台请求发送，而不会导致页面重新加载。

查看客户端和服务器的日志会话以查看这些事件的删除位置会很有用。您好，Miguel，当用户想要创建新频道时，服务器正确接收事件“new_channel”。服务器上的代码运行正常，并向客户端发送事件“channel\u ready\u exists”或“channel\u created”。但是，客户端没有收到这些事件，因此客户端不会发生任何事情。正如我上面所问的，确认服务器正在日志中发送事件将非常有用。然后在客户机日志中查看事件未调度到处理程序的原因。没有日志，我们只能猜测。我添加了客户端和服务器日志。这些日志不是Socket.IO日志，这是客户端和服务器的标准输出。客户端和服务器都有需要显式启用的日志记录选项。

C:\Users\rober\project2>flask run
 * Serving Flask app "application.py"
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
[2019-11-26 10:57:44,233] WARNING in __init__: Flask-SocketIO is Running under Werkzeug, WebSocket is not available.
Server initialized for threading.
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Invalid session e0e081d67cbf4189b990c1dc103da589
127.0.0.1 - - [26/Nov/2019 10:57:44] "GET /socket.io/?EIO=3&transport=polling&t=1574762243279-331&sid=e0e081d67cbf4189b990c1dc103da589 HTTP/1.1" 400 -
f3cc277e7bec49c8b2eba1272d102a6c: Sending packet OPEN data {'sid': 'f3cc277e7bec49c8b2eba1272d102a6c', 'upgrades': [], 'pingTimeout': 60000, 'pingInterval': 25000}
f3cc277e7bec49c8b2eba1272d102a6c: Sending packet MESSAGE data 0
127.0.0.1 - - [26/Nov/2019 10:57:44] "GET /socket.io/?EIO=3&transport=polling&t=1574762264065-380 HTTP/1.1" 200 -
f3cc277e7bec49c8b2eba1272d102a6c: Received packet MESSAGE data 2["register",{"username":"robert"}]
received event "register" from f3cc277e7bec49c8b2eba1272d102a6c [/]
register
127.0.0.1 - - [26/Nov/2019 10:57:44] "POST /socket.io/?EIO=3&transport=polling&t=1574762264385-381&sid=f3cc277e7bec49c8b2eba1272d102a6c HTTP/1.1" 200 -
emitting event "registered" to f3cc277e7bec49c8b2eba1272d102a6c [/]
f3cc277e7bec49c8b2eba1272d102a6c: Sending packet MESSAGE data 2["registered",null]
127.0.0.1 - - [26/Nov/2019 10:57:44] "GET /socket.io/?EIO=3&transport=polling&t=1574762264393-382&sid=f3cc277e7bec49c8b2eba1272d102a6c HTTP/1.1" 200 -
Invalid session e0e081d67cbf4189b990c1dc103da589
127.0.0.1 - - [26/Nov/2019 10:57:45] "POST /socket.io/?EIO=3&transport=polling&t=1574762265345-332&sid=e0e081d67cbf4189b990c1dc103da589 HTTP/1.1" 400 -
ca6c4332a9f347eab56882912b70a309: Sending packet OPEN data {'sid': 'ca6c4332a9f347eab56882912b70a309', 'upgrades': [], 'pingTimeout': 60000, 'pingInterval': 25000}
ca6c4332a9f347eab56882912b70a309: Sending packet MESSAGE data 0
127.0.0.1 - - [26/Nov/2019 10:57:45] "GET /socket.io/?EIO=3&transport=polling&t=1574762265792-4 HTTP/1.1" 200 -
44e90573522c46f583a5811c21a2cf97: Sending packet OPEN data {'sid': '44e90573522c46f583a5811c21a2cf97', 'upgrades': [], 'pingTimeout': 60000, 'pingInterval': 25000}
44e90573522c46f583a5811c21a2cf97: Sending packet MESSAGE data 0
127.0.0.1 - - [26/Nov/2019 10:57:47] "GET /socket.io/?EIO=3&transport=polling&t=1574762267360-333 HTTP/1.1" 200 -
44e90573522c46f583a5811c21a2cf97: Received packet MESSAGE data 2["register",{"username":"robert"}]
received event "register" from 44e90573522c46f583a5811c21a2cf97 [/]
register
127.0.0.1 - - [26/Nov/2019 10:57:48] "POST /socket.io/?EIO=3&transport=polling&t=1574762267414-334&sid=44e90573522c46f583a5811c21a2cf97 HTTP/1.1" 200 -
emitting event "registered" to 44e90573522c46f583a5811c21a2cf97 [/]
44e90573522c46f583a5811c21a2cf97: Sending packet MESSAGE data 2["registered",null]
127.0.0.1 - - [26/Nov/2019 10:57:48] "GET /socket.io/?EIO=3&transport=polling&t=1574762267420-335&sid=44e90573522c46f583a5811c21a2cf97 HTTP/1.1" 200 -
ca6c4332a9f347eab56882912b70a309: Received packet MESSAGE data 2["register",{"username":"goeland"}]
received event "register" from ca6c4332a9f347eab56882912b70a309 [/]
register
127.0.0.1 - - [26/Nov/2019 10:57:51] "POST /socket.io/?EIO=3&transport=polling&t=1574762271133-6&sid=ca6c4332a9f347eab56882912b70a309 HTTP/1.1" 200 -
emitting event "registered" to ca6c4332a9f347eab56882912b70a309 [/]
ca6c4332a9f347eab56882912b70a309: Sending packet MESSAGE data 2["registered",null]
127.0.0.1 - - [26/Nov/2019 10:57:51] "GET /socket.io/?EIO=3&transport=polling&t=1574762265812-5&sid=ca6c4332a9f347eab56882912b70a309 HTTP/1.1" 200 -
127.0.0.1 - - [26/Nov/2019 10:57:51] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [26/Nov/2019 10:57:51] "GET /static/index.js HTTP/1.1" 200 -
ccc77d7deda843fa8a846527cb19e4db: Sending packet OPEN data {'sid': 'ccc77d7deda843fa8a846527cb19e4db', 'upgrades': [], 'pingTimeout': 60000, 'pingInterval': 25000}
ccc77d7deda843fa8a846527cb19e4db: Sending packet MESSAGE data 0
127.0.0.1 - - [26/Nov/2019 10:57:51] "GET /socket.io/?EIO=3&transport=polling&t=1574762271323-0 HTTP/1.1" 200 -
ccc77d7deda843fa8a846527cb19e4db: Received packet MESSAGE data 2["register",{"username":"goeland"}]
received event "register" from ccc77d7deda843fa8a846527cb19e4db [/]
register
127.0.0.1 - - [26/Nov/2019 10:57:51] "POST /socket.io/?EIO=3&transport=polling&t=1574762271378-1&sid=ccc77d7deda843fa8a846527cb19e4db HTTP/1.1" 200 -
emitting event "registered" to ccc77d7deda843fa8a846527cb19e4db [/]
ccc77d7deda843fa8a846527cb19e4db: Sending packet MESSAGE data 2["registered",null]
127.0.0.1 - - [26/Nov/2019 10:57:51] "GET /socket.io/?EIO=3&transport=polling&t=1574762271379-2&sid=ccc77d7deda843fa8a846527cb19e4db HTTP/1.1" 200 -
ccc77d7deda843fa8a846527cb19e4db: Received packet MESSAGE data 2["new_channel",{"channel_name":"channel 3"}]
received event "new_channel" from ccc77d7deda843fa8a846527cb19e4db [/]
127.0.0.1 - - [26/Nov/2019 10:57:56] "GET / HTTP/1.1" 200 -
new_channel
127.0.0.1 - - [26/Nov/2019 10:57:56] "POST /socket.io/?EIO=3&transport=polling&t=1574762276888-4&sid=ccc77d7deda843fa8a846527cb19e4db HTTP/1.1" 200 -
{}
new_channel_created {}
emitting event "channel_created" to ccc77d7deda843fa8a846527cb19e4db [/]
ccc77d7deda843fa8a846527cb19e4db: Sending packet MESSAGE data 2["channel_created","channel 3"]
127.0.0.1 - - [26/Nov/2019 10:57:56] "GET /socket.io/?EIO=3&transport=polling&t=1574762271422-3&sid=ccc77d7deda843fa8a846527cb19e4db HTTP/1.1" 200 -
127.0.0.1 - - [26/Nov/2019 10:57:56] "GET /static/index.js HTTP/1.1" 200 -
0409f655ccc642f68322c4a9f64c3b66: Sending packet OPEN data {'sid': '0409f655ccc642f68322c4a9f64c3b66', 'upgrades': [], 'pingTimeout': 60000, 'pingInterval': 25000}
0409f655ccc642f68322c4a9f64c3b66: Sending packet MESSAGE data 0
127.0.0.1 - - [26/Nov/2019 10:57:57] "GET /socket.io/?EIO=3&transport=polling&t=1574762277050-0 HTTP/1.1" 200 -
0409f655ccc642f68322c4a9f64c3b66: Received packet MESSAGE data 2["register",{"username":"goeland"}]
received event "register" from 0409f655ccc642f68322c4a9f64c3b66 [/]
register
127.0.0.1 - - [26/Nov/2019 10:57:57] "POST /socket.io/?EIO=3&transport=polling&t=1574762277100-1&sid=0409f655ccc642f68322c4a9f64c3b66 HTTP/1.1" 200 -
emitting event "registered" to 0409f655ccc642f68322c4a9f64c3b66 [/]
0409f655ccc642f68322c4a9f64c3b66: Sending packet MESSAGE data 2["registered",null]
127.0.0.1 - - [26/Nov/2019 10:57:57] "GET /socket.io/?EIO=3&transport=polling&t=1574762277101-2&sid=0409f655ccc642f68322c4a9f64c3b66 HTTP/1.1" 200 -