Error: The provided socket.io client (`io`) has already been augmented into a Sails socket SDK instance (it has `io.sails`).

[AWR14]

Having trouble getting this websocket to work

when the page loads i get "Uncaught SyntaxError: Unexpected token < _getcookie:1"

The when i navigate to a new page i get the error in the title of this post.

I'm using chrome and have an extension that enables cross domain, could this be the issue?

import socketIOClient from 'socket.io-client';
import sailsIOClient from 'sails.io.js';

componentDidMount() {
var io = sailsIOClient(socketIOClient);

    // Set some options:
    // (you have to specify the host and port of the Sails backend when using this library from Node.js)
    io.sails.url = 'http://myurl.com';
    console.log('url', io.sails.url)
    var test = io.socket.get('/api2/job', function serverResponded (body, JWR) {
      // body === JWR.body
      console.log('Sails responded with: ', body);
      console.log('with headers: ', JWR.headers);
      console.log('and with status code: ', JWR.statusCode);

      // ...
      // more stuff
      // ...

      // When you are finished with `io.socket`, or any other sockets you connect manually,
      // you should make sure and disconnect them, e.g.:
      io.socket.disconnect();

      // (note that there is no callback argument to the `.disconnect` method)
    });
}

[AWR14]

I've updated my code to the below, which works but when navigating to another page i still get

"Error: The provided socket.io client (io) has already been augmented into a Sails socket SDK instance (it has io.sails). "

Can anyone explain why this is? it points to this line "this.io = sailsIOClient(socketIOClient);"

do i need to close the socket when on componentWillUnmount?

import socketIOClient from 'socket.io-client';
import sailsIOClient from 'sails.io.js';

componentDidMount() {
    if (this.props.websocketRoute) {
      this.io = sailsIOClient(socketIOClient);

      this.io.sails.url = 'http://myurl.com:1337';

      this.io.socket = this.io.sails.connect();

      this.io.socket.on('/api2/job', function (message) {
        console.log("Jobs Message Received", message);
      )}
}

[raqem]

Hi @AWR14, Just wanted to let you know we are moving all open Sails issues into one repo so in hopes that it will be easier for our devs to keep a better eye on things. ~ Cheers!

[johnabrams7]

@AWR14 - Thanks for providing the detailed info and examples so far.

What versions of Sails, sails-hook-sockets, & sails.io.js socket client are you using at the moment?

As for browser extensions, it's certainly worth testing with them temporarily disabled when in doubt.

[navid-kalaei]

same issue here:

{
    "sails.io.js": "^1.2.1",
    "socket.io-client": "^2.2.0",
    "sails": "^1.2.2",
    "sails-hook-sockets": "^1.5.5",
}

It happens when I initialize socket in react in different files. I have a sense in front end even the socket is initializing in different palaces it is global to the whole project and cannot be connected to the same endpoint twice.

SOLVED: Initialized the socket just once as a service then stored it as a context in the app then consumed it whenever it was needed instead of creating a new socket each time. FYI: If you are facing the same problem and have no clue how to consume your socket in React, store it in a context and develop a high order component for consuming and injecting the socket to your desired component. BTW, the right place for updating your state is componentDidMount in class components and in useEffect hook.

[johnabrams7]

@navid-kalaei Thanks for the workaround! This will certainly be considered for further socket developments. @AWR14 Have you tried this out?

[MaheshkumarSundaram]

same issue here:

{
    "sails.io.js": "^1.2.1",
    "socket.io-client": "^2.2.0",
    "sails": "^1.2.2",
    "sails-hook-sockets": "^1.5.5",
}

It happens when I initialize socket in react in different files. I have a sense in front end even the socket is initializing in different palaces it is global to the whole project and cannot be connected to the same endpoint twice.

SOLVED: Initialized the socket just once as a service then stored it as a context in the app then consumed it whenever it was needed instead of creating a new socket each time. FYI: If you are facing the same problem and have no clue how to consume your socket in React, store it in a context and develop a high order component for consuming and injecting the socket to your desired component. BTW, the right place for updating your state is componentDidMount in class components and in useEffect hook.

Hi @navid-kalaei, Could you please include an example for storing socket in a context and consuming? Thank you!

[eashaw]

Hey @MaheshkumarSundaram, I don't have an example of react code that does this. Is there a reason why you wouldn't use the built in socket client to accomplish this? https://sailsjs.com/documentation/reference/web-sockets/socket-client#socket-client-sails-io-js-

[MaheshkumarSundaram]

Hey @MaheshkumarSundaram, I don't have an example of react code that does this. Is there a reason why you wouldn't use the built in socket client to accomplish this? https://sailsjs.com/documentation/reference/web-sockets/socket-client#socket-client-sails-io-js-

Hi @eashaw ,

I tried varies solutions I found across the internet but only this worked for me. But the problem is it works well for JS but in Typescript, it doesn't.

In TS, the error is at the line: if (socketIOClient.sails), which is basically saying Property 'sails' doesn't exist on socketIOClient which is pretty valid as the Socket IO Client doesn't have a sails prop by default and it's injected later by sails.io.js. But I'm not sure how to fix this problem in TS?

If anyone could help, it would be very much appreciated. Thanks.