onDone immediately called.

[ollyde]

There doesn't seem to be any documentation on how to connect manually, without using the client side library.
I'm trying to connect to this library manually using web_socket_channel from Flutter.

When I connect using the GraphQL JS library it works, so the server is working 100%.

When I connect I get the this message from the server.

I'm connecting with the following settings.

 _channel = WebSocketChannel.connect(
    Uri.parse(getWebStockUrl()),
    protocols: ["graphql-ws"],
  );

  final subscriptionQuery = r'''
      [Some sub query]
    '''

  _channel?.sink.add(jsonEncode({
    "type": "connection_init",
    "payload": {"Authorization": auth.jwt}
  }));
  _channel?.sink.add(jsonEncode({
    "type": "start",
    "payload": {"query": subscriptionQuery}
  }));

Any ideas where I'm going wrong?

[enisdenjo]

There doesn't seem to be any documentation on how to connect manually, without using the client side library.

Yes there is, the GraphQL over WebSocket Protocol.

Just by looking at your example, I see you're not implementing the protocol properly. For starters, the graphql-ws subprotocol is used by the deprecated subscriptions-transport-ws.

This library uses the graphql-transport-ws subprotocol (I couldn't name the subprotocol graphql-ws too since the deprecated library already reserved it and the two protocols are different).

[ollyde]

@enisdenjo ah we meet again. Thank you for your response, you are a life saver.

Seems we get a little further this time.

Not sure what I'm missing. It seems to disconnect right away. hmm

_channel!.stream.listen((message) {
    if (kDebugMode) {
      print("Got listen event");
      print(message);
    }
  })
    ..onData((data) {
      if (kDebugMode) {
        print("onData - WebSocket - " + data.toString().substring(0, data.toString().length > 70 ? 70 : data.toString().length) + "..");
        // print(data);
      }
      if (data is String) {
        try {
          final json = jsonDecode(data);

          if (json["type"] != null && json["type"] == "connection_ack") {
            success();
          }

          if (json?["payload"]?["data"] != null) {
            final data = json["payload"]!["data"];
            _filterData(context, data);
            return;
          }
        } catch (e) {
          //
        }
      }
    })
    ..onDone(() {
      if (kDebugMode) {
        print("onDone - WebSocket");
      }
      _reconnect(context, success);
    })
    ..onError((e) {
      if (kDebugMode) {
        print("onError - WebSocket");
        print(e);
      }
      _reconnect(context, success);
    });

[ollyde]

@enisdenjo I understand. The server is working with the JS library. But the flutter library does not work and we are following this document, something is missing from the documentation.

import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:uuid/uuid.dart';
import 'package:web_socket_channel/web_socket_channel.dart';

WebSocketChannel? _channel;
bool _isReconnecting = false;

connectToWebsocket(BuildContext context, Function() success) {
  _channel?.sink.close();

  _channel = WebSocketChannel.connect(
    Uri.parse(getWebStockUrl()),
    protocols: ["graphql-transport-ws"],
  );

  final subscriptionQuery = r'''
      subscription Subscription { 
        gotChatMessage {
          messageResults {
            {ms}
          }
          room {
            {rm}
          }
        }
      }
    '''
      .replaceFirst("{ms}", messageResultFields)
      .replaceFirst("{rm}", roomFields);

  _channel?.sink.add(jsonEncode({
    "type": "connection_init",
    "payload": {"Authorization": auth.jwt}
  }));

  _channel?.sink.add(jsonEncode({
    "id": Uuid().v4(),
    "type": "start",
    "payload": {"query": subscriptionQuery}
  }));

  _channel!.stream.listen((message) {
    if (kDebugMode) {
      print("Got listen event");
      print(message);
    }
  })
    ..onData((data) {
      if (kDebugMode) {
        print(data);
      }
      if (data is String) {
        try {
          final json = jsonDecode(data);

          if (json["type"] != null && json["type"] == "connection_ack") {
            success();
          }

          if (json?["payload"]?["data"] != null) {
            final data = json["payload"]!["data"];
            _filterData(context, data);
            return;
          }
        } catch (e) {
          //
        }
      }
    })
    ..onDone(() {
      if (kDebugMode) {
        print("onDone - WebSocket");
      }
    })
    ..onError((e) {
      if (kDebugMode) {
        print("onError - WebSocket");
        print(e);
      }
    });
}

[enisdenjo]

... we are following this document, something is missing from the documentation.

Nothing is missing and you're not following the document - just by glancing at your code, I see you're still trying to subscribe using the deprecated subscriptions-transport-ws Protocol GQL_START message instead of the Subscribe message.

Please read the GraphQL over WebSocket Protocol again, but this time with care.

[ollyde]

@enisdenjo thank you seemed to solve it. Do you want some Solana?

[enisdenjo]

Glad you got it working!

Do you want some Solana?

Thanks a lot, but I love OSS enough to not want money for my OSS work. You're free to sponsor me (or donate) through GitHub though. 😄

[ollyde]

@enisdenjo sponsored :-)