Title: Unable to connect to NodeJS standalone socket.io with ReactJS
Tags: node.js;reactjs;socket.io
Question: I am looking for the best WS solution for IoT project. I am currently testing my options with Web Sockets. I have tried so far two NPM libraries 'ws' and 'websockets'. They worked great both NodeJS and ReactJS implementation was simple. I am now trying websocket.io. Reading the documentation I struggle to create even a simple working example copying the code directly from the documentation. Since the test code is so simple, I am really confused especially after the positive experience with two previous packages. I am pretty sure I am doing something wrong but I am unable to spot my mistake. I am really thankful for anyone helping to spot what am I not doing right.
NodeJS server instance listening on port 8000 (based on example here: https://socket.io/docs/v4/server-initialization/) :
const io = require(&quot;socket.io&quot;)();
io.on(&quot;connection&quot;, socket =&gt; {
console.log('blip')
io.listen(8000);
React client trying to connect to the NodeJS server from port 2000:
import React from &quot;react&quot;;
import { io } from &quot;socket.io-client&quot;;
class Io extends React.Component {
state = {
wsConnected: false
componentDidMount() {
const socket = io.connect('http://localhost:8000');
socket.on(&quot;connect&quot;, () =&gt; {
console.log('connect',socket.id);
render() {
const { wsConnected } = this.state;
return (
<div&gt;{wsConnected ? 'on' : 'off'}</div&gt;
export default Io
Comment: @cybercoder good questions, they are both the same version: 4.0.0

Comment: @cybercoder that worked. I am guessing that this will limit me now to use only the WebSocket.

Comment: Are client and server libraries in same Major version?

Comment: try this: ```const socket = io("ws://localhost:8000", { transports: ["websocket"] });``` in ```componentDidMount```

Comment: @xyz83243 I'll write a full answer now.

Here is the accepted answer: It seems you have CORS problem when in polling transport mode, So you can use Socket.io standalone server like this when you are using polling:
const io = require(&quot;socket.io&quot;)(
cors: {
origin: '*',
}
io.on(&quot;connection&quot;, socket =&gt; {
console.log(`${socket.handshake.headers.origin} connected`);
io.listen(8000);
But it's better use websocket transport if you need persistent http connection. When you are using websocket transport mode, there's no CORS policy.
websocket transport doesn't support http headers like cookies or etc but it is better to use it when there's energy consumption concerns in client side. Also you can force socket.io server to only supports determined transport modes. See socket.io documentations.
Comment for this answer: this resolved my issue. I have noticed that you have mentioned that I won't be able to use cookies. Unfortunately, I need to use them for authorization purposes. Is there any solution around this with the possibility to use the cookies?
Comment for this answer: Also you can control cross origin resource sharing yourself instead of using *.
Comment for this answer: There's no header when using ```websocket``` transport mode. You can use queries for auth purposes.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 5, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:03/29/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<node.js><reactjs><socket.io>', 'Title': 'Unable to connect to NodeJS standalone socket.io with ReactJS', 'ViewCount': 36, 'id': 66859908, 'user_AboutMe': None, 'user_AccountId': 4491304.0, 'user_DisplayName': 'xyz83242', 'user_Reputation': 495.0, 'user_Views': 47.0, 'user_id': 11753322.0}}