Unable to use realtime in flutter web

[sebastianbuechler]

When trying to use the realtime feature in flutter I see in the logs two requests:

A GET request from guest to /api/realtime which responds with 200. I guess that's the subscription.

A POST request from user to /api/realtime which fails with 404 and meta:

{
  "errorDetails": "No client associated with connection ID \"2KJAld0HGCUSgANm7FtkEMavWlbpoVGFdXGrwOnh\"",
  "errorMessage": "Missing or invalid client id."
}

I guess that's the data I changed on the admin panel.

I use email auth and the user has credentials. The user is able to fetch from this collection. The code in flutter used is:

client.realtime.subscribe('demo', (e) {
    print(e.record);
});

Why is the first call as guest? Is this the reason why the second request fails?

[ganigeorgiev]

If you are using flutter web, currently the realtime api is not supported there because the underlying lib dart-lang/http doesn't support streamed responses (see the limitations in https://github.com/pocketbase/dart-sdk#limitations).

The GET /api/realtime request is for establishing the SSE connection.

The second one, POST /api/realtime, is for attaching a subscription (and authorizing). The error you are seeing is probably either because you are using flutter web or the client connection was terminated for some reason before being able to make the subscription.

You can also start the PocketBase executable with --debug to inspect in the console when the realtime connect/disconnect events were fired.

I'll move the issue to the Dart SDK repo.

[sebastianbuechler]

You're absolutely right, I was using Flutter web. Thanks!

[explorer-source]

I don't see dart-lang/http supporting streamed responses any time soon as it's already been almost a year.

Is it possible to implement SSE on flutter web using Dampfwalze's implementation.

Edit: dart-lang/sse found this, I'll try this one

[explorer-source]

After 3 days I couldn't make it work 😢 I think it's possible but I'm not experienced enough in this field sorry.

[ganigeorgiev]

I'll consider sometime next week to expose a global sseClientFactory config option to allow users to provide their own client implementation like fetch_client or other similar.

[ganigeorgiev]

I've pushed a small change in v0.10.1 that allows providing a custom httpClientFactory. I've briefly tested the realtime events in the browser with fetch_client and it seems to work fine, but keep in mind that I cannot guarantee whether everything works with the custom client. You can import it conditionally OR use a check similar to kIsWeb:

import "package:pocketbase/pocketbase.dart";
import 'package:fetch_client/fetch_client.dart';
import 'package:flutter/foundation.dart' show kIsWeb;

void main() {
  final pb = PocketBase(
    "http://127.0.0.1:8090",
    // load the fetch_client only for web, otherwise - fallback to the default http.Client()
    httpClientFactory: kIsWeb ? () => FetchClient(mode: RequestMode.cors) : null,
  );

  // ...
}