使用 FastAPI/fastapi-socketio 和 JavaScript/socket.io.js 进行双向通信 --> 连接错误答案

【问题标题】：Bidirectional Communication with FastAPI/fastapi-socketio and JavaScript/socket.io.js --> Connection Error使用 FastAPI/fastapi-socketio 和 JavaScript/socket.io.js 进行双向通信 --> 连接错误
【发布时间】：2021-08-31 02:23:06
【问题描述】：

我构建了一个小演示来尝试通过 FLASK 中的 WebSockets 进行双向通信，效果很好。现在我正在尝试使用连接失败的 FastAPI（和 fastapi-socketio 而不是 flask-socketio）进行相同的设置。有谁知道我做错了什么？提前谢谢你。

终端错误：
INFO:127.0.0.1:50117 - “GET / HTTP/1.1” 200 OK
INFO:127.0.0.1:50117 - "GET /socket.io/?EIO=4&transport=polling&t=NeEnmWx HTTP/1.1" 404 未找到

控制台中的错误：
加载资源失败：服务器响应状态为 404（未找到） polling-xhr.js:202
GET http://127.0.0.1:8000/socket.io/?EIO=4&transport=polling&t=NeEnoe_ 404（未找到）

index.html:

<!DOCTYPE html>
<html>

<head>
  <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.js"
    integrity="sha512-2RDFHqfLZW8IhPRvQYmK9bTLfj/hddxGXQAred2wNZGkrKQkLGj8RCkXfRJPHlDerdHHIzTFaahq4s/P4V6Qig=="
    crossorigin="anonymous"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

  <script type="text/javascript">

    $(document).ready(function () {

      var socket = io.connect('http://' + document.domain + ':' + location.port);

      socket.on('connect', function (event) {
        console.log('user is connected now');
        socket.emit('client_connect_event', { data: 'User connected' });
      });

      socket.on('server_antwort_01', function (msg, cb) {
        $('#log0').append('<br>' + $('<div/>').text('logs #' + msg.count + ': ' + msg.data).html());
        if (cb)
          cb();
      });

      $('form#start').submit(function (event) {
        socket.emit('client_start_event', { data: 'Start doing something' });
        return false;
      });

      $('form#stop').submit(function (event) {
        socket.emit('client_stop_event', { data: 'Stop doing something' });
        return false;
      });
    });
  </script>

  <h1>Websocket Demo</h1>

  <h2> Press below to display something send from Server</h2>
  <form id="start" method="post" action="#">
    <input type="submit" value="Start">
  </form>

  <form id="stop" method="post" action="#">
    <input type="submit" value="Stop">
  </form>

  <h3> Log </h3>
  <div id="log0"></div>
</body>
</html>

mainSocket.py（带有 FastAPI）

from fastapi import FastAPI
from fastapi_socketio import SocketManager
from fastapi.responses import HTMLResponse
app = FastAPI()
socket_manager = SocketManager(app=app)

html = ""
with open('index.html', 'r') as f:
    html = f.read()

@app.get("/")
async def get():
    return HTMLResponse(html)

@app.sio.on('client_connect_event')
async def handle_client_connect_event(message):
    print(message)
    await app.sio.emit('server_antwort01', {'data': 'connection was successful'})    

@app.sio.on('client_start_event')
async def handle_client_start_event(message):
    print('Server says: start_event worked')
    print(message)
    await app.sio.emit('server_antwort01',{'data':'start event worked'})

【问题讨论】：

标签： socket.io fastapi

【解决方案1】：

让它工作将 main.py 更新为：

from fastapi import FastAPI
from fastapi_socketio import SocketManager
from fastapi.responses import HTMLResponse

app = FastAPI()
socket_manager = SocketManager(app=app)

html = ""
with open('index.html', 'r') as f:
    html = f.read()

@app.get("/")
async def get():
    return HTMLResponse(html)

@app.sio.on('client_connect_event')
async def handle_client_connect_event(sid, *args, **kwargs): # (!)
    await app.sio.emit('server_antwort01', {'data': 'connection was successful'})    

@app.sio.on('client_start_event')
async def handle_client_start_event(sid, *args, **kwargs): # (!)
    print('Server says: start_event worked')
    await app.sio.emit('server_antwort01',{'data':'start event worked'})

和 index.html 中的 var socket 到：

var socket = io('ws://localhost:8000', {
    path: '/ws/socket.io'
});

【讨论】：