Search code examples
flutterwebsocket

Cannot connect to to FastAPI with WebSocket in Flutter. 403 forbidden / code 1006

So I've been trying for while to establish a websocket connection between my flutter app and FastAPI. I believe the problem lies in Flutter.

So far i've tried the flutter packages socket_io_client, web_socket_channel and websocket_manager to no awail.

I suspect it might have to do with the app architecture maybe... bit at a loss atm.

Here is the flutter errors:

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

Im aware it says the 403 forbidden came from my API, though i know websocket connection is possible, as i've tested it with javascript.

here is the log from the 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 have all the WebSocket code in a Class that is beeing 'provided', I.E WebSocketState:

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

WebSocketState:

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();
  }
}

the connectAndListen method is called in the first/main page after user has authenticated, then in other Pages the websocket is beeing used.

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

API websocket 'class':

websocket_notifier.py

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 main:

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)

Any ideas what Im doing wrong? (the other flutter websocket packages I've used virutally In the same way as the one I showed)

Solution

  • through lots of testing i finally found a way to get websockets to work with my flutter app and fastapi. https://github.com/tiangolo/fastapi/issues/129

    Had to try a bit of different things from that issue thread. But endend up with using python-socketio. I had to use a lower version of python-socketio to be compatible with the newest flutter socket_io_client package.