Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unrecognized WebSocket connection option(s) agent, perMessageDeflate, pfx, key, passphrase, cert, ca, ciphers, rejectUnauthorized. Did you mean to put these under headers? #1290

Closed
1 of 2 tasks
JuAlexandre opened this issue Apr 15, 2019 · 50 comments
Labels
bug Something isn't working
Milestone

Comments

@JuAlexandre
Copy link

You want to:

  • report a bug
  • request a feature

Current behaviour

When I install socket.io-client on a blank React Native Expo project I have a yellow message with:

Unrecognized WebSocket connection option(s) `agent`, `perMessageDeflate`, `pfx`, `key`, `passphrase`, `cert`, `ca`, `ciphers`, `rejectUnauthorized`. Did you mean to put these under `headers`?

Steps to reproduce (if the current behaviour is a bug)

yarn add socket.io-client

In App.js in the React Native project:

import React from 'react';
import { YellowBox } from 'react-native';
import io from 'socket.io-client';

YellowBox.ignoreWarnings(['Remote debugger']);

import AppContainer from './config/routing';

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        const socket = io('http://10.0.60.26:3000', {
            forceNew: true
        });
        socket.on('connect', () => console.log('Connection'));
    }

    render() {
        return <AppContainer />;
    }
}
@bogoslavskiy
Copy link

Same problem :(

@Luomusha
Copy link

+1

1 similar comment
@evaleirasclapps
Copy link

+1

@nsafai
Copy link

nsafai commented May 7, 2019

+1

Seems to have been an issue since at least as far back as Dec 18

@hbouhadji
Copy link

+1

1 similar comment
@wx962464
Copy link

+1

@maxgfr
Copy link

maxgfr commented Jul 1, 2019

+1

1 similar comment
@vietmobilefolk
Copy link

+1

@marcinczenko
Copy link

I am still getting this warning when using socket.io (2.2.0) on React-Native. I can silence the yellow box on the device screen with:

import { YellowBox } from 'react-native'

YellowBox.ignoreWarnings([
  'Unrecognized WebSocket connection option(s) `agent`, `perMessageDeflate`, `pfx`, `key`, `passphrase`, `cert`, `ca`, `ciphers`, `rejectUnauthorized`. Did you mean to put these under `headers`?'
])

but I still get this annoying warning on the console...

@samuelgoldenbaum
Copy link

downgrade to "socket.io-client": "2.1.0" and all OK

@litsdm
Copy link

litsdm commented Aug 13, 2019

For me it worked when I downgraded to 2.1.1 I did:
yarn add socket.io-client@2.1.1

At first it didn't work because I was adding the ^ symbol before the version socket.io-client@^2.1.1 which I believe accepts other minor versions of the package.

@FrederickEngelhardt
Copy link

FrederickEngelhardt commented Aug 15, 2019

Still an issue @2.2.0

@AminHwadria
Copy link

AminHwadria commented Sep 4, 2019

Try downgrading socket.io-client to 1.7.2, it works for me.

@Andrielson
Copy link

Still an issue @^2.3.0

@ghost
Copy link

ghost commented Oct 18, 2019

Still an issue v2.3.0 with react-native

@emclab
Copy link

emclab commented Oct 18, 2019

@2.1.1 is OK. But 2.3.0 throws the warning message on RN 0.61.1

@ashadnasim52
Copy link

any solution till now

@jhoanborges
Copy link

Still an issue v2.3.0 with react-native

@canaanites
Copy link

Hey guys! We have fixed this issue by downgrading to v2.1.1

Make sure you completely remove the older version and clear the cache.

  1. remove socket.io-client from package.json & better delete your package-lock/yarn.lock files.
  2. delete your entire node_modules folder (start fresh)
  3. npm install socket.io-client@2.1.1 --save

Done! This should work with react-native & react-native-web!

@jeanlambert17
Copy link

jeanlambert17 commented Nov 14, 2019

I have this same issue with react-native: 0.61.4 but somehow the app is crashing, I don't know if it's happening because of the warning or if is another socket-related thing, but when I tried to connect to the socket the app closes.

This is my conf:
{ autoConnect: false, reconnectionDelay: 1000, reconnection: true, transports: ['websocket'], agent: false, // [2] Please don't set this to true upgrade: false, rejectUnauthorized: false }

@jeanlambert17
Copy link

Does socket.open crashes if the socket is already connected?

@peterboyer
Copy link

This warning is raised here by ReactNative/WebSocket.js:117 because EngineIO (used by SocketIO under the hood) will reference the exposed ReactNative WebSocket implementation via EngineIO/websocket.js:121 which is passed opts which contains the properties that the warning message mentions. Curiously enough, these added properties described by the EngineIO maintainers via comment are "SSL options for Node.js client".

By inserting something like the code below at EngineIO/websocket.js:114 to manipulate the opts given to the WebSocket constructor we remove all the extraneous keys in opts to successfully stop the warning from appearing in the first place (omit is imported from Lodash, can be reworked out).

// lib/transports/websocket.js
...
if (this.isReactNative) {
  // prettier-ignore
  opts = omit(opts, ['agent', 'perMessageDeflate', 'pfx', 'key', 'passphrase', 'cert', 'ca', 'ciphers', 'rejectUnauthorized']);
}
...

If you're looking for a solution that doesn't involve simply muting the warning via YellowBox.ignoreWarnings then you could completely override the doOpen as defined EngineIO/websocket.js:87 by adding something like this below, to the entry point of your ReactNative project, typically index.js.

// index.js
...
+ import 'patches/EngineIOHeaderWarning';
...
// patches/EngineIOHeaderWarning.js
const WS = require('engine.io-client/lib/transports/websocket');

var WebSocketImpl = WebSocket; // eslint-disable-line no-undef

WS.prototype.doOpen = function() {
  if (!this.check()) {
    // let probe timeout
    return;
  }

  var uri = this.uri();
  var protocols = this.protocols;
  var opts = {};

  if (this.extraHeaders) {
    opts.headers = this.extraHeaders;
  }
  if (this.localAddress) {
    opts.localAddress = this.localAddress;
  }

  try {
    this.ws = new WebSocketImpl(uri, protocols, opts);
  } catch (err) {
    return this.emit('error', err);
  }
};

Overall, if we create a pull request for EngineIO to exclude these extra opts that aren't needed when used in ReactNative via this.isReactNative then we could suppress this warning for all using the SocketIO Client in their ReactNative projects.

@jzambrano12
Copy link

jzambrano12 commented Jan 27, 2020

You want to:

  • report a bug
  • request a feature

Current behaviour

When I install socket.io-client on a blank React Native Expo project I have a yellow message with:

Unrecognized WebSocket connection option(s) `agent`, `perMessageDeflate`, `pfx`, `key`, `passphrase`, `cert`, `ca`, `ciphers`, `rejectUnauthorized`. Did you mean to put these under `headers`?

Steps to reproduce (if the current behaviour is a bug)

yarn add socket.io-client

In App.js in the React Native project:

import React from 'react';
import { YellowBox } from 'react-native';
import io from 'socket.io-client';

YellowBox.ignoreWarnings(['Remote debugger']);

import AppContainer from './config/routing';

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        const socket = io('http://10.0.60.26:3000', {
            forceNew: true
        });
        socket.on('connect', () => console.log('Connection'));
    }

    render() {
        return <AppContainer />;
    }
}

My Solution:

Just save the socket in a useState like this:

import io from 'socket.io-client';
// ...

const [socket] = useState(() => io('SERVER_URL'));

Problem solved.

@prettydev
Copy link

In my case, v2.3 is ok when I connect to the local socket.io server.
But it occurs errors when I connect to the remote socket.io server.
The server source is the same.
So I downgrade the socket.io client version to 2.1.1, and it works fine.

@JamesMahy
Copy link

JamesMahy commented Feb 2, 2020

This warning is raised here by ReactNative/WebSocket.js:117 because EngineIO (used by SocketIO under the hood) will reference the exposed ReactNative WebSocket implementation via EngineIO/websocket.js:121 which is passed opts which contains the properties that the warning message mentions. Curiously enough, these added properties described by the EngineIO maintainers via comment are "SSL options for Node.js client".

By inserting something like the code below at EngineIO/websocket.js:114 to manipulate the opts given to the WebSocket constructor we remove all the extraneous keys in opts to successfully stop the warning from appearing in the first place (omit is imported from Lodash, can be reworked out).

// lib/transports/websocket.js
...
if (this.isReactNative) {
  // prettier-ignore
  opts = omit(opts, ['agent', 'perMessageDeflate', 'pfx', 'key', 'passphrase', 'cert', 'ca', 'ciphers', 'rejectUnauthorized']);
}
...

If you're looking for a solution that doesn't involve simply muting the warning via YellowBox.ignoreWarnings then you could completely override the doOpen as defined EngineIO/websocket.js:87 by adding something like this below, to the entry point of your ReactNative project, typically index.js.

// index.js
...
+ import 'patches/EngineIOHeaderWarning';
...
// patches/EngineIOHeaderWarning.js
const WS = require('engine.io-client/lib/transports/websocket');

var WebSocketImpl = WebSocket; // eslint-disable-line no-undef

WS.prototype.doOpen = function() {
  if (!this.check()) {
    // let probe timeout
    return;
  }

  var uri = this.uri();
  var protocols = this.protocols;
  var opts = {};

  if (this.extraHeaders) {
    opts.headers = this.extraHeaders;
  }
  if (this.localAddress) {
    opts.localAddress = this.localAddress;
  }

  try {
    this.ws = new WebSocketImpl(uri, protocols, opts);
  } catch (err) {
    return this.emit('error', err);
  }
};

Overall, if we create a pull request for EngineIO to exclude these extra opts that aren't needed when used in ReactNative via this.isReactNative then we could suppress this warning for all using the SocketIO Client in their ReactNative projects.

Your code wouldn't allow me to connect to the server and changed the intended behaviour of EngineIO so I've just wrapped those options in an if statement but used the same patch mechanism you suggested

// patches/EngineIOHeaderWarning.js
const WS = require('engine.io-client/lib/transports/websocket');

var WebSocketImpl = WebSocket; // eslint-disable-line no-undef

WS.prototype.doOpen = function() {
    if (!this.check()) {
        // let probe timeout
        return;
    }

    var uri = this.uri();
    var protocols = this.protocols;
    var opts = {};

    if(!this.isReactNative){
        opts.agent = this.agent;
        opts.perMessageDeflate = this.perMessageDeflate;

        // SSL options for Node.js client
        opts.pfx = this.pfx;
        opts.key = this.key;
        opts.passphrase = this.passphrase;
        opts.cert = this.cert;
        opts.ca = this.ca;
        opts.ciphers = this.ciphers;
        opts.rejectUnauthorized = this.rejectUnauthorized;
    }


    if (this.extraHeaders) {
        opts.headers = this.extraHeaders;
    }
    if (this.localAddress) {
        opts.localAddress = this.localAddress;
    }

    try {
        this.ws =
            this.usingBrowserWebSocket && !this.isReactNative
                ? protocols
                ? new WebSocketImpl(uri, protocols)
                : new WebSocketImpl(uri)
                : new WebSocketImpl(uri, protocols, opts);
    } catch (err) {
        return this.emit('error', err);
    }

    if (this.ws.binaryType === undefined) {
        this.supportsBinary = false;
    }

    if (this.ws.supports && this.ws.supports.binary) {
        this.supportsBinary = true;
        this.ws.binaryType = 'nodebuffer';
    } else {
        this.ws.binaryType = 'arraybuffer';
    }

    this.addEventListeners();
};

JamesMahy added a commit to SoSa-Community/app-oldnew that referenced this issue Feb 2, 2020
@ioness
Copy link

ioness commented Feb 26, 2020

downgrade to "socket.io-client": "2.1.0" and all OK

This worked for me.

@soullivaneuh
Copy link

If I well understand the issue, is this a related dependencies issue introduce in 06e9a4c?

@soullivaneuh
Copy link

The downgrade to 2.1.1 works indeed, but we are stuck on a two years old releases.

Can @ptboyer be applied and release on the project?

@schumannd
Copy link

schumannd commented Mar 11, 2020

Does this warning affect the functionality of the package? Just setting it up and don't want to be held back by this. Happy to ignore if it has no other consequences

Edit: For anyone wondering the same thing. As far as I can tell this warning is inconsequential.

@peterboyer
Copy link

@schumannd This issue is purely about muting the error/warning message. Functionally, this warning is inconsequential. :)

@MrCheater
Copy link

+1

@BassemN
Copy link

BassemN commented Mar 12, 2020

I am very worried about if the socket.io library is still maintained or not because of no official reply about a fix or an upcoming update.

@rburson
Copy link

rburson commented Mar 15, 2020

+1

1 similar comment
@rasoul707
Copy link

+1

@isthaison
Copy link

const _io = ioClient.connect(socketurl, { forceNode: true });
It's work

@BassemN
Copy link

BassemN commented Mar 31, 2020

@isthaison It doesn't work for me

@marcorm
Copy link

marcorm commented Apr 5, 2020

@isthaison for me it works... but every other http request becomes very slow... I don't know how it's related to the workaround... but it is...

@dayaki
Copy link

dayaki commented Apr 13, 2020

{ forceNode: true }

Thank you. this work for me.

@BassemN
Copy link

BassemN commented Apr 13, 2020

This is the only solution that worked for me.

This warning is raised here by ReactNative/WebSocket.js:117 because EngineIO (used by SocketIO under the hood) will reference the exposed ReactNative WebSocket implementation via EngineIO/websocket.js:121 which is passed opts which contains the properties that the warning message mentions. Curiously enough, these added properties described by the EngineIO maintainers via comment are "SSL options for Node.js client".
By inserting something like the code below at EngineIO/websocket.js:114 to manipulate the opts given to the WebSocket constructor we remove all the extraneous keys in opts to successfully stop the warning from appearing in the first place (omit is imported from Lodash, can be reworked out).

// lib/transports/websocket.js
...
if (this.isReactNative) {
  // prettier-ignore
  opts = omit(opts, ['agent', 'perMessageDeflate', 'pfx', 'key', 'passphrase', 'cert', 'ca', 'ciphers', 'rejectUnauthorized']);
}
...

If you're looking for a solution that doesn't involve simply muting the warning via YellowBox.ignoreWarnings then you could completely override the doOpen as defined EngineIO/websocket.js:87 by adding something like this below, to the entry point of your ReactNative project, typically index.js.

// index.js
...
+ import 'patches/EngineIOHeaderWarning';
...
// patches/EngineIOHeaderWarning.js
const WS = require('engine.io-client/lib/transports/websocket');

var WebSocketImpl = WebSocket; // eslint-disable-line no-undef

WS.prototype.doOpen = function() {
  if (!this.check()) {
    // let probe timeout
    return;
  }

  var uri = this.uri();
  var protocols = this.protocols;
  var opts = {};

  if (this.extraHeaders) {
    opts.headers = this.extraHeaders;
  }
  if (this.localAddress) {
    opts.localAddress = this.localAddress;
  }

  try {
    this.ws = new WebSocketImpl(uri, protocols, opts);
  } catch (err) {
    return this.emit('error', err);
  }
};

Overall, if we create a pull request for EngineIO to exclude these extra opts that aren't needed when used in ReactNative via this.isReactNative then we could suppress this warning for all using the SocketIO Client in their ReactNative projects.

Your code wouldn't allow me to connect to the server and changed the intended behaviour of EngineIO so I've just wrapped those options in an if statement but used the same patch mechanism you suggested

// patches/EngineIOHeaderWarning.js
const WS = require('engine.io-client/lib/transports/websocket');

var WebSocketImpl = WebSocket; // eslint-disable-line no-undef

WS.prototype.doOpen = function() {
    if (!this.check()) {
        // let probe timeout
        return;
    }

    var uri = this.uri();
    var protocols = this.protocols;
    var opts = {};

    if(!this.isReactNative){
        opts.agent = this.agent;
        opts.perMessageDeflate = this.perMessageDeflate;

        // SSL options for Node.js client
        opts.pfx = this.pfx;
        opts.key = this.key;
        opts.passphrase = this.passphrase;
        opts.cert = this.cert;
        opts.ca = this.ca;
        opts.ciphers = this.ciphers;
        opts.rejectUnauthorized = this.rejectUnauthorized;
    }


    if (this.extraHeaders) {
        opts.headers = this.extraHeaders;
    }
    if (this.localAddress) {
        opts.localAddress = this.localAddress;
    }

    try {
        this.ws =
            this.usingBrowserWebSocket && !this.isReactNative
                ? protocols
                ? new WebSocketImpl(uri, protocols)
                : new WebSocketImpl(uri)
                : new WebSocketImpl(uri, protocols, opts);
    } catch (err) {
        return this.emit('error', err);
    }

    if (this.ws.binaryType === undefined) {
        this.supportsBinary = false;
    }

    if (this.ws.supports && this.ws.supports.binary) {
        this.supportsBinary = true;
        this.ws.binaryType = 'nodebuffer';
    } else {
        this.ws.binaryType = 'arraybuffer';
    }

    this.addEventListeners();
};

@SaveYourTime
Copy link

SaveYourTime commented Apr 21, 2020

const _io = ioClient.connect(socketurl, { forceNode: true });
It's work

It works with me, Thanks!

"socket.io-client": "^2.3.0"

const socket = io(host, { forceNode: true });

@dommangetnicolas
Copy link

const _io = ioClient.connect(socketurl, { forceNode: true });
It's work

It works with me, Thanks!

"socket.io-client": "^2.3.0"

const socket = io(host, { forceNode: true });

It worked for me too! Big thanks

@s-vigneshwaran
Copy link

You can simply add some headers and it works!
socket = io.connect('SOCKET_URL_HERE', { jsonp: false, agent: '-', pfx: '-', cert: '-', ca: '-', ciphers: '-', rejectUnauthorized: '-', perMessageDeflate: '-' });

@AlexandruCalinica
Copy link

const _io = ioClient.connect(socketurl, { forceNode: true });

This resolves the warning but makes my socket connection really really slow(timeout actually), so its unusable for me.

@lrondanini
Copy link

const _io = ioClient.connect(socketurl, { forceNode: true });

This resolves the warning but makes my socket connection really really slow(timeout actually), so its unusable for me.

same here: connection timeout!

@darrenkeen
Copy link

I got rid of froceNode and downgraded to 2.1.0 and it worked fine. I also had the issue where I was using localhost and not the IP to my emulator device.

@isthaison
Copy link

The same @SaveYourTime , I'm using "socket.io-client": "^2.3.0"
refer here https://socket.io/docs/client-api/.
I why add forceNode option

@BassemN
Copy link

BassemN commented Jun 23, 2020

This issue should be fixed on engine.io-client v3.4.3 so all you need to do is to delete the yarn.lock file and the node_modules directory then run yarn install

ref socketio/engine.io-client@2f5c948

@peterboyer
Copy link

@BassemN Perhaps instead of deleting your yarn.lock file, you could use yarn upgrade-interactive to bump the version safely?

It seems a bit counter-intuitive to the idea of a "lock" file if you completely destroy it every time you want to upgrade your packages. 😅

@darrachequesne
Copy link
Member

It should be fixed by socketio/engine.io-client@e5bc106 (included in engine.io-client@3.4.3 and socket.io-client@2.3.0).

Regarding the forceNode option, it seems React Native actually supports WebSocket (ref), so forceNode: true should not be needed. Isn't that the case?

@umitayt
Copy link

umitayt commented Apr 11, 2022

Proxying WebSockets is working for me.
I am using node HTTP-proxy to allow 'ws' on the local machine, on a remote server configured Nginx proxy.

Server Side:
const io = require("socket.io")(server.listener, {
log: true,
pingInterval: 60000,
pingTimeout: 600000,
cors: {
origin: "http://localhost:3000",
methods: ["GET", "POST"]
}
});
const proxy = HttpProxy.createProxyServer({ ws: true });
io.on("upgrade", function(req, socket, head) {
proxy.ws(req, socket, head);
});

Front Side:
import {Manager} from "socket.io-client";
socketInstance = new Manager('ws://localhost:1342/',
{ transports: ["websocket"] ,
protocols:["http"],
port:1342,
auth:{ token: xxxxxx}
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests