Use socket.io-client with npm

[danilowanner]

Thanks a lot for your example. I’ve looked into websockets and react native too in the last couple of days.

You might be interested to know that hharnisc has also been working on a ws polyfill that is currently evaluated for integration into the react-native repo:
https://github.com/hharnisc/react-native

This just as a sidenote... to my actual question: Have you tried using the socket.io-client that is available through NPM? I had some issues and failed to make it work. Did you modify your version of the client besides adding a userAgent to the navigator object?

Luckily I got my program and socket working with the socket.io-client you provided with the example. Just wondering how to integrate future versions of the socket.io protocol.

[badfortrains]

I had seen that hharnisc opened a pr, but haven't really looked through his implementation. I might try to switch in his react-native branch for mine and see if the firebase/socket-io examples still work when I have some time. I'll be interested to see how the facebook maintainers respond to the pr. It was my impression that they were a little resistant to merging in a websocket pollyfill and instead wanted it to live as a separate module - but I might be wrong about that.

As for your actual question:
I have tried to use the npm socket.io-client, but there seem to be some issues with the react-native package manager and the way it tries to include the socket.io-client (probably the issues you're seeing).

The actual socket.io-client library is not modified beyond the userAgent change. I just pushed an update that makes this more clear by moving the user agent hack into the main index.ios.js file and directly including the pre-generated socket.io-client lib from within the socket.io dependency. So now updating the socket.io version in package.json should update the client lib too, although it relies on the hacky relative include of the client library

var io = require("./node_modules/socket.io/node_modules/socket.io-client/socket.io");

As to why requiring socket.io-client directly doesn't work, I'm not completely sure but here is what I've found so far:
The problem stems from the engine.io package (a dependency of socket.io-client) requiring a package called xmlhttprequest (note lower case). The react package manager complains it cannot find this package, even though it is in engine.io's node_modules folder. This seems to happen for 2 possible reasons

1. The package manager already has a registered XMLHttpRequest module and is not case sensitive when searching for packages thus ignores the lowercased xmlhttprequest, but is case sensitive when requiring packages.
2. React native is ignoring the "browser" field in the engine.io package.json and thus not using the version of the xmlhttprequest package we want it to. This seems to be true, but it doesn't explain why it can't find the xmlhttprequest package at all.

I'll try to look into this more and file an issue with react-native once I'm more clear on what is going on

[danilowanner]

Thanks for your elaboration!

Separating the hack from library seems the way to go. I did it like this in my app too.

What I will do is reference the pre-built js file instead of the custom one in the root. Did not occur to me that there was one in the package. Seems a good way, despite the long require path.

Your explanation of the error when requiring the package makes sense. I observed the same thing. Maybe the guys and gals at Facebook might be interested to know about the problem. Afaik they are working hard to make their packager compatible with all kinds of npm packages and like to know when it has issues.

Anyways let me know if you find out something...

[naartjie]

Just thinking out loud here (and I haven't had a chance to try this out), but how about renaming the xmlhttprequest which engine.io is requiring, just to see if that resolves the issue.

This would then tell you if it is indeed a case-sensitivity issue, and a conflict with the built in XMLHttpRequest. I do remember reading somewhere about similar issues with case-sensitivity on OS X and resolving node_modules, but can't remember where it was now.