Cannot connect from expo app to the websocket server

[filozof6]

Please provide the following:

1. SDK Version: 40
2. Platforms(Android/iOS/web/all): Android emulator

So I am trying to implement apollo client with my expo app where I am trying to connect to a websocket address (which works in graphiql dev tool).

This is my code:

import { ApolloClient } from 'apollo-client';
import { split, ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { onError } from 'apollo-link-error';
import { getMainDefinition } from 'apollo-utilities';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import * as SecureStore from 'expo-secure-store';
import unfetch from 'unfetch';
import Websocket from 'isomorphic-ws';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import getEnvVars from '../environment';

const myClient = new SubscriptionClient(`ws://0.0.0.0:3003/graphql`, {
  // reconnect: true,
});
myClient.onConnected(e => {
  console.log('onConnected', e);
});
myClient.onReconnected(e => {
  console.log('reconnected', e);
});
myClient.onDisconnected(e => {
  console.log('onDisconnected', e);
});
myClient.onError(e => {
  console.log('onError', e);
});

const wsLink = new WebSocketLink(myClient);
const envVars = getEnvVars();
const apolloServerHost = `${envVars.serverHost}/graphql`;
let httpLink = new HttpLink({
  uri: apolloServerHost,
  fetch: unfetch,
});

/* const wsLink = new WebSocketLink({
  uri: `ws://0.0.0.0:3003/graphql`,
  options: {
    reconnect: true,
    lazy: true,
  },
  webSocketImpl: Websocket,
}); */
const authLink = setContext(async () => {
  const token = await SecureStore.getItemAsync('userToken');
  return {
    headers: {
      Authorization: token,
    },
  };
});

httpLink = authLink.concat(httpLink);

const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
  },
  wsLink,
  httpLink,
);

const apolloClient = new ApolloClient({
  // By default, this client will send queries to the
  //  `/graphql` endpoint on the same host
  // Pass the configuration option { uri: YOUR_GRAPHQL_API_URL } to the `HttpLink` to connect
  // to a different host
  // link,
  link,
  cache: new InMemoryCache(),
  resolvers: {},
});

export default apolloClient;

When I try to connect I get:
onError Event {
“isTrusted”: false,
“message”: “Failed to connect to /0.0.0.0:3003”,
}

I am using react native debugger version 0.11

I am totally clueless where the problem can be I went through all of the questions but I am totally not sure.

Can it be the cors issue or that somehow the emulator network is blocking the request? The queries and mutations work normally.

[fwayong]

If you look in the documentation of { SubscriptionClient } → subscriptions-transport-ws this states that it is for Client (browser) that’s probably why it works in graphiql dev tool but not on simulator / device?

So to connect to the server you need to use Websocket → isomorphic-ws and follow the documentation on how to implement:

const WebSocket = require('isomorphic-ws');

const ws = new WebSocket('wss://echo.websocket.org/');

ws.onopen = function open() {
  console.log('connected');
  ws.send(Date.now());
};

ws.onclose = function close() {
  console.log('disconnected');
};

ws.onmessage = function incoming(data) {
  console.log(`Roundtrip time: ${Date.now() - data.data} ms`);

  setTimeout(function timeout() {
    ws.send(Date.now());
  }, 500);
};