反应中的WebSocket连接客户端和烧瓶服务器没有打开

Question

在我的项目中，我使用的是React前端和带有RESTful API的Flask服务器。基本功能是前端从服务器获取数据并显示它。这很好用，但我认为只要服务器从其他地方接收到新数据，客户端就会自动重新获取，从而改进了它。我可以使用轮询，只是间隔启动一个获取请求，但这似乎是WebSockets的完美用例。因此，我试图在服务器和客户端之间实现websocket连接，其中服务器在发生某些事件时向客户端发送消息。

我的服务器是用Flask编写的python，使用特定于Flask的websocket库似乎是个好主意。我最终使用flask-socketio，但我一直遇到问题。我服务器的相关部分如下：

from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

... # Server functionality for receiving and storing data from elsewhere, not related to the websocket

# Handle the webapp connecting to the websocket
@socketio.on('connect')
def test_connect():
    print('someone connected to websocket')
    emit('responseMessage', {'data': 'Connected! ayy'})


# Handle the webapp connecting to the websocket, including namespace for testing
@socketio.on('connect', namespace='/devices')
def test_connect2():
    print('someone connected to websocket!')
    emit('responseMessage', {'data': 'Connected! ayy'})


# Handle the webapp sending a message to the websocket
@socketio.on('message')
def handle_message():
    print('someone sent to the websocket')


# Handle the webapp sending a message to the websocket, including namespace for testing
@socketio.on('message', namespace='/devices')
def handle_message2():
    print('someone sent to the websocket!')


@socketio.on_error_default  # handles all namespaces without an explicit error handler
def default_error_handler(e):
    print('An error occured:')
    print(e)

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

对于前端，我最初尝试使用库。我和react-websocket一起去了。

<Websocket
  url={'ws://localhost:5000'} // I also tried /devices at the end of this url
  onMessage={() => console.log('Received message through websocket.')}
  debug={true}
/>

然而，此解决方案在连接后立即断开连接，这意味着出现了问题。然而，找出确切的错误似乎是不可能的;尽管debug={true}，我在日志中没有任何迹象。我没有使用这个解决方案，而是为前端交换了一个更自定义的WebSocket解决方案：

componentDidMount() {
    moment.locale('nb');
    jsonRequest(irrelevant url).then(jsonResponse => {
      ... // Handle the results of the initial fetch

      const socket = new WebSocket('ws://localhost:5000'); // I also tried /devices at the end of this url

      socket.onopen = () => console.log('opened custom socket');
      socket.onclose = () => console.log('closed custom socket');
      socket.onmessage = e => console.log('got message');
      socket.onerror = e => console.log('websocket error');
      socket.addEventListener('open', function(event) {
        console.log('sending');
        socket.send('Hello Server!');
      });
      socket.addEventListener('message', function(event) {
        console.log('Message from server ', event.data);
      });
      this.socket = socket;

      this.setState(...);
    });
}

此解决方案存在同样的问题。我的控制台输出如下：

Rendering...是我放在渲染函数顶部的控制台语句。

因此，在两种解决方案中，客户端在连接后立即断开与websocket连接的连接。我的服务器也没有注意到任何事情。没有任何事件处理程序触发 - 不是@socketio.on('connect')，而是@socketio.on('message')，甚至不是@socketio.on_error_default。因此，我发现自己陷入了障碍。我如何从这里调试？问题可能是什么？我在Ubuntu服务器上尝试过相同的代码，所以我不认为 localhost就是问题。

Answer 1

您将Socket.IO与WebSocket混淆。 Socket.IO协议建立在WebSocket和HTTP之上。您使用普通的WebSocket客户端连接到Socket.IO服务器会导致连接失败。您需要使用Socket.IO客户端，例如this one。