Float에서 WebSocket을 사용하여 FastAPI에 연결할 수 없습니다. 403 금지 / 코드 1006

Float에서 WebSocket을 사용하여 FastAPI에 연결할 수 없습니다. 403 금지 / 코드 1006

그래서 나는 내 플래터 앱과 패스트 API 사이에 웹 소켓 연결을 설정하려고 오랫동안 노력해왔다. 나는 그 문제가 Flutter에 있다고 믿는다.

지금까지 나는 socket_io_client, web_socket_channel 및 websocket_manager라는 플래터 패키지를 시도했지만 실패하지 않았다.

아마 앱 아키텍처와 관련이 있을 것 같은데... 어안이 벙벙하다.

다음은 플라우터 오류입니다:

I/onListen(26110): arguments: null
I/EventStreamHandler(26110): 🔴 event sink
I/onListen(26110): arguments: null
I/EventStreamHandler(26110): 🔴 event sink
W/System.err(26110): java.net.ProtocolException: Expected HTTP 101 response but was '403 Forbidden'
W/System.err(26110):    at okhttp3.internal.ws.RealWebSocket.checkUpgradeSuccess$okhttp(RealWebSocket.kt:185)
W/System.err(26110):    at okhttp3.internal.ws.RealWebSocket$connect$1.onResponse(RealWebSocket.kt:156)
W/System.err(26110):    at okhttp3.RealCall$AsyncCall.run(RealCall.kt:140)
W/System.err(26110):    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
W/System.err(26110):    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
W/System.err(26110):    at java.lang.Thread.run(Thread.java:923)
I/EventStreamHandler(26110): ✅ sink is not null
I/flutter (26110): websocket closed

자바스크립트로 테스트했기 때문에 웹소켓 연결이 가능하다는 것을 알지만, 403 금지는 내 API에서 나온 것으로 알고 있다.

다음은 API의 로그입니다:

DEBUG    | websockets.protocol:__init__:244 - server - state = CONNECTING
DEBUG    | websockets.protocol:connection_made:1340 - server - event = connection_made(<_SelectorSocketTransport fd=484 read=polling write=<idle, bufsize=0>>)
DEBUG    | websockets.protocol:data_received:1412 - server - event = data_received(<422 bytes>)
DEBUG    | websockets.server:read_http_request:237 - server < GET /11 HTTP/1.1
DEBUG    | websockets.server:read_http_request:238 - server < Headers([('authorization', 'Bearer *JWTTOKEN*'), ('upgrade', 'websocket'), ('connection', 'Upgrade'), ('sec-websocket-key', 'zytoCsWVlcmsKghL5XFEdA=='), ('sec-websocket-version', '13'), ('host', '10.0.2.2:8000'), ('accept-encoding', 'gzip'), ('user-agent', 'okhttp/4.3.1')])
INFO     | uvicorn.protocols.websockets.websockets_impl:asgi_send:198 - ('127.0.0.1', 50772) - "WebSocket /11" 403
DEBUG    | websockets.server:write_http_response:256 - server > HTTP/1.1 403 Forbidden
DEBUG    | websockets.server:write_http_response:257 - server > Headers([('Date', 'Fri, 09 Apr 2021 11:10:11 GMT'), ('Server', 'Python/3.7 websockets/8.1'), ('Content-Length', '0'), ('Content-Type', 'text/plain'), ('Connection', 'close')])
DEBUG    | websockets.server:write_http_response:267 - server > body (0 bytes)
DEBUG    | websockets.protocol:fail_connection:1261 - server ! failing CONNECTING WebSocket connection with code 1006
DEBUG    | websockets.protocol:connection_lost:1354 - server - event = connection_lost(None)
DEBUG    | websockets.protocol:connection_lost:1356 - server - state = CLOSED
DEBUG    | websockets.protocol:connection_lost:1365 - server x code = 1006, reason = [no reason]

I.E. WebSocketState: 클래스에 '제공' 중인 모든 WebSocket 코드가 있습니다:

 return runApp(
    MultiProvider(
      providers: [
        Provider<AuthenticationState>(
          create: (_) => new AuthenticationState(),
        ),
        Provider<WebSocketState>(
          create: (_) => new WebSocketState(),
        ),
      ],
      child: MyApp(),
    ),
  );

웹 소켓 상태:

class WebSocketState {
  final _socketMessage = StreamController<Message>();
  Sink<Message> get getMessageSink => _socketMessage.sink;
  Stream<Message> get getMessageStream => _socketMessage.stream;

  WebsocketManager socket;

  bool isConnected() => true;

  void connectAndListen(int userId) async {
    var token = await secureStorage.read(key: 'token');
    socket = WebsocketManager(
        'ws://10.0.2.2:8000/$userId', {'Authorization': 'Bearer $token'});

    socket.onClose((dynamic message) {
      print('websocket closed');
    });

    // Listen to server messages
    socket.onMessage((dynamic message) {
      print("Message = " + message.toString());
    });
    // Connect to server
    socket.connect();
  }

  void dispose() {
    _socketMessage.close();
    socket.close();
  }
}

connectAndListen 메서드는 사용자가 인증된 후 첫 페이지/메인 페이지에서 호출되며, 다른 페이지에서는 웹 소켓이 사용되고 있습니다.

@override
  void didChangeDependencies() {
    super.didChangeDependencies();
    Provider.of<WebSocketState>(context, listen: false).connectAndListen(
        Provider.of<AuthenticationState>(context, listen: false).id);
  }

API 웹 소켓 'class':

websocket_notifier입니다.파이의

from enum import Enum
import json
from typing import List

class SocketClient:
    def __init__(self, user_id: int, websocket: WebSocket):
        self.user_id = user_id
        self.websocket = websocket

class WSObjects(Enum):
    Message = 0

class Notifier:
    def __init__(self):
        self.connections: List[SocketClient] = []
        self.generator = self.get_notification_generator()

    async def get_notification_generator(self):
        while True:
            message = yield
            await self._notify(message)

    async def push(self, msg: str):
        await self.generator.asend(msg)

    async def connect(self, user_id: int, websocket: WebSocket):
        await websocket.accept()
        self.connections.append(SocketClient(user_id, websocket))

    def remove(self, websocket: WebSocket):
        client: SocketClient
        for x in self.connections:
            if x.websocket == websocket:
                client = x
        self.connections.remove(client)

    async def _notify(self, message: str):
        living_connections = []
        while len(self.connections) > 0:
            # Looping like this is necessary in case a disconnection is handled
            # during await websocket.send_text(message)
            client = self.connections.pop()
            await client.websocket.send_text(message)
            living_connections.append(client)
        self.connections = living_connections
    
    async def send(self, user_id: int, info: WSObjects, json_object: dict):
        print("WS send running")
        msg = {
            "info": info,
            "data": json_object
        }
        print("connections count: " + str(len(self.connections)))

        for client in self.connections:
            if client.user_id == user_id:
                print("WS sending msg to ${client.user_id}")
                await client.websocket.send_text(json.dumps(msg))
                break


notifier = Notifier()

API 기본:

from fastapi import FastAPI 

from websocket_notifier import notifier
from starlette.websockets import WebSocket, WebSocketDisconnect

app = FastAPI()

@app.get("/")
async def root():
    return {"message": "Root"}

@app.websocket("/ws/{user_id}")
async def websocket_endpoint(user_id: int, websocket: WebSocket):
    await notifier.connect(user_id, websocket)
    try:
        while True:
            data = await websocket.receive_text()
            await websocket.send_text(f"Message text was: {data}")
    except WebSocketDisconnect:
        notifier.remove(websocket)

@app.on_event("startup")
async def startup():
    # Prime the push notification generator
    await notifier.generator.asend(None)

내가 뭘 잘못했는지 알아? (제가 보여드린 것과 같은 방식으로 가상으로 사용한 다른 Floating 웹 소켓 패키지)

---

많은 테스트를 통해 나는 마침내 내 플래터 앱과 fastapi로 웹 소켓을 작동시키는 방법을 찾았다.

그 이슈 스레드와는 다른 것들을 시도해야 했다. 하지만 결국 파이썬-소켓리오를 사용하게 된다. 나는 최신 flooter socket_io_client 패키지와 호환되기 위해 더 낮은 버전의 python-socketio를 사용해야 했다.

---

같은 문제가 있으신 분들도 확인 부탁드립니다. 웹소켓 데코레이터에서 API 라우터의 접두사가 작동하지 않습니다.

---

그 이유는 경로에 있을 수 있다. 서버와 클라이언트 모두에서 후행을 방지합니다. 예: ->에서 자동 리디렉션하면 연결에 중요한 헤더를 제거할 수 있습니다. 전체 경로가 APIRouter.prefix를 통해 정의된 경우 엔드포인트 장식자 대신 빈 경로를 사용합니다.