Subscriptions-transport-ws: error on basic setup "Unable to find native implementation, or alternative implementation for Websocket"

[dohomi]

Hello,
I receive after basic setup an error at my project. Following setup:

apollo-client: Version 1.6.0
subscriptions-transport-ws: Version 0.7.3

import 'isomorphic-fetch'
import { ApolloClient, createNetworkInterface } from 'apollo-client'
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'

const apolloUri = 'https://api.graph.cool/simple/v1/__ID__' 
const wsClient = new SubscriptionClient('wss://subscriptions.graph.cool/v1/__ID__', {
  reconnect: true
})

const networkInterface = createNetworkInterface({
  uri: apolloUri,
  transportBatching: true,
  opts: {
    credentials: 'same-origin'
  },
  ssrMode: process.SERVER_BUILD
})

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
)

export const apolloClient = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
  dataIdFromObject: r => r.id
})

```
Unable to find native implementation, or alternative implementation for WebSocket!

Error: Unable to find native implementation, or alternative implementation for WebSocket!
at new SubscriptionClient (/data/vuejs/students-admin/node_modules/subscriptions-transport-ws/dist/client.js:31:19)```
Thanks

[sorenbs]

Just to clarify - you are running this in node, right?
What version of node are you using?

[dohomi]

I'm running it in my current NUXT project, Node 8.1 is in use

[sorenbs]

I have no experience with this, but you probably have to include a a websocket implementation such as https://github.com/websockets/ws

Let's wait for the Apollo folks to chime in :-)

[helfer]

Hey @dohomi, @sorenbs is right. This error is thrown here. You can fix it by providing a websocket implementation to the client constructor as the third argument:

import ws from 'ws';

const wsClient = new SubscriptionClient('wss://subscriptions.graph.cool/v1/__ID__', {
  reconnect: true
}, ws)

[mistic]

@dohomi is this issue solved?

[dohomi]

Will close it here because I guess the issue belongs to NUXT, I can't get wsrunning in my application without an error

[saadbinsaeed]

Same problem even the ws package did not work for me :(

[kukiron]

The solution worked for me though, after adding ws package.

[csmit175]

this worked perfectly for me

[flintovich]

@helfer, Thanks, this helped for my case also

[cyrus-za]

I got the same error and even adding ws doesn't solve the issue for me. I am using nextjs, not nuxt but same thing basically.

[morajabi]

I added ws in next js and it worked. Thanks

[dmurawsky]

+1 I'm using next.js and getting this error when trying to use subscriptions

[mghazanfar]

PS F:workbluerain-app-assetspackagesbluerain-app-assets> npm test

@blueeast/[email protected] test F:workbluerain-app-assetspackagesbluerain-app-assets
jest

npm ERR! Test failed. See above for more details.

This is what I got after this solution. Please help me. Why my tests are getting failed without giving any detail about each story???

[morajabi]

@mghazanfar Could you share more of your code or fill another issue with all the details?

[mghazanfar]

Sure
See in the below:

1- import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws/dist/client';
2- import WebSocket from 'ws';
3- const wsClient = new SubscriptionClient('ws://localhost:5000', {
reconnect: true,
connectionParams: {
accessToken: 'jkasdhkjashd jkashdjk ashdas'
}
}, WebSocket);
These three steps were actually required and After doing them I have already shared the problem in the post above.

[morajabi]

There are no addGraphQLSubscriptions in the main subscriptions-transport-ws package as of version 0.83 I guess. Use this instead: https://www.npmjs.com/package/add-graphql-subscriptions

[adnan1naeem]

I am having this problem by using websocketLink from apollo-link-ws library.As it uses subscriptions-transport-ws under the hood in its library.My problem was not resolved after adding ws package.any help ???
Link of library I am trying to use
https://github.com/apollographql/apollo-link/tree/master/packages/apollo-link-ws

[Cuxs]

I've used create react app in my project and that error occurs when I try to build the app.
The ws package also produces an error, I've tried with socket.io client but it throws the same error.
Is there another websocket implementation rather than ws that I can use there?

[nehaMetricks]

I am using apollo-link-ws and facing the same issue. I have tried adding ws package and it does not resolve the error. Any help would be appreciated.

[jsangilve]

@nehaMetricks in case you didn't find a solution:

import * as ws from 'ws';
import { WebSocketLink } from 'apollo-link-ws';

const wsLink = new WebSocketLink({
  uri: `ws://localhost:3003/graphql`,
  options: {
    reconnect: true,
  },
  webSocketImpl: ws
});

[tam-dev]

@nehaMetricks in case you didn't find a solution:

import * as ws from 'ws';
import { WebSocketLink } from 'apollo-link-ws';

const wsLink = new WebSocketLink({
  uri: `ws://localhost:3003/graphql`,
  options: {
    reconnect: true,
  },
  webSocketImpl: ws
});

Thank you so much , it was solved my problem

[dandv]

Apollo team, it would be nice if this error provided more direct guidance on how to solve this issue.

For HTTP links, the error when running in Node is very helpful, by suggesting to install fetch and providing a pretty complete example with createHttpLink.

[imomin]

I tried above solution shared by @nehaMetricks now I am getting following error.
TypeError: this.wsImpl is not a constructor
at SubscriptionClient.Yzoe.SubscriptionClient.connect

[gabeblack]

@imomin import WebSocket from 'ws';

[thatgriffith]

For those of you who are still stuck after testing @jsangilve solution (like I was). There is a great solution here: https://github.com/apollographql/subscriptions-transport-ws/issues/333#issuecomment-359261024