Web socket fails on Web

[Arpit1496]

Describe the issue Web socket connection fails on browser. The exact same code works on ubuntu 18.04, but fails on web.

To Reproduce (MUST BE PROVIDED)

To help us to understand what is going on and what is the easy way to resolve this bug we ask to describe the issue with a small code example, or if the problem is easy you can describe the issue as follows:

1. When I use 'WebSocketLink' to try 'web sockets in flutter'
2. I receive the following 'websocket failed to connect' on web.But the same link connects on ubuntu. I have seen for any cors issue and also used the CORS extention for chrome but had no success.
3. See error also the error if any
4. But I would like to receive know why the same link with same auth and tokens and initial payloads work in 1 platform but not in web.

device / execution context I run code on ubuntu with ws://api.kryptonait.com url for socket.

[vincenzopalazzo]

We need a reproducible example, you can use this API https://api.chat.graphql-flutter.dev/graphql

Or maybe play with https://github.com/zino-hofmann/graphql-flutter/pull/1204 and report some example that allow us to fix it if any problem exist!

Thanks!

[Arpit1496]

I saw #1204 but it has not been merged yet. I am getting same null values but have not made mistake of link vs Link.

My problem is that the exact same code works on ubuntu. I have a working socket with same link/auth/protocol. But the same fails on web without giving any errors.

Your server does'nt have auth. How can I reproduce my issue.

This is likely a link error which is not added to exception of result.

[vincenzopalazzo]

here we go, an information more you are using auth link.

without an example of code is hard to help! sorry

[Arpit1496]

Hey, I mentioned auth in point no. 4 of my first comment.

Also I am asking you to tell me how can I mimic auth on your server or any open source graphql server. Furthermore, if not possible, guide me to debug it.

As far as I have debugged, it works on 1 platform and not on other means it is an issue with the link. May be browser level debugging you could suggest ?

[Arpit1496]

Thanks for your time. But I have solved my issue.

The problem was that the protocol needed to be mentioned explicitly in channel generation. I am on stable version so my Websocketlink did'nt have subProtocol parameter.

final websocketLink = WebSocketLink( WS_END_POINT, config: SocketClientConfig( initialPayload: {}, headers: {}, autoReconnect: true, delayBetweenReconnectionAttempts: const Duration(seconds: 1), inactivityTimeout: const Duration( seconds: 10, ), connectFn: (uri, protocols) async { var channel = WebSocketChannel.connect( Uri.parse(WS_END_POINT), protocols: ['graphql-ws'], ); channel = channel.forGraphQL(); return channel; }, ),

[vincenzopalazzo]

you should give me more information on how yo have your configuration with a code example

This code works everywhere, so start from here and add your difference.

Future<void> main() async {
  // We're using HiveStore for persistence,
  // so we need to initialize Hive.
  await initHiveForFlutter();
  final HttpLink httpLink = HttpLink(
    defaultHeaders: {
      "Accept": "application/json",
      "Access-Control_Allow_Origin": "*",
    },
    'https://api.chat.graphql-flutter.dev/graphql',
  );
  var wsLink = WebSocketLink(
    'ws://api.chat.graphql-flutter.dev/graphql',
    config: const SocketClientConfig(
      inactivityTimeout: Duration(seconds: 40),
    ),
    subProtocol: GraphQLProtocol.graphqlTransportWs,
  );
  final Link link = Link.split(
    (request) => request.isSubscription,
    wsLink,
    httpLink,
  );
  ValueNotifier<GraphQLClient> client = ValueNotifier(
    GraphQLClient(
      link: link,
      // The default store is the InMemoryStore, which does NOT persist to disk
      cache: GraphQLCache(store: HiveStore()),
    ),
  );
  runApp(ChatApp(client: client));
}

Our beta is stable enough, and I strong suggest to upgrade in the last beta.

In your issue, there is any information on lib version and the code that you are using, and with this data I claim that the error is from your side, and I can not give any help without code.

[vincenzopalazzo]

Thanks for your time. But I have solved my issue.

Cool, so I close it :)