score:1
runned you example and it looks like client connection is rejected because of the cors policy.
you can get this fixed by adding this to your server:
const io = require('socket.io')(http, {
cors: {
origin: "http://localhost:3000"
}
});
above assumes that you are running reactjs server in port 3000. if you are using different port then you need to change this to match.
you can also set cors to "*"
. this means that all origins are accepted. but please keep in mind that this is considered a bad practice.
const io = require('socket.io')(http, {
cors: {
origin: "*"
}
});
about cors
cors is a security mechanism in the browser. when browser takes connection to some other server than the host of the website, the browser will block the response by default.
in your case you are running your website on one origin (for example localhost:3000
) and socket io server in localhost:4000
. these are considered to be different origins by the browser.
way to fix this is that the server will send cors-header with the response. that will inform the browser that this connection is ok to use "cross origin". the snippet above will just add cors header to the socket io's initial response.
you can see these headers in the chrome developer tools on the network tab. you will also get a cors error in the console if the connection is blocked.
working ok for me
just copied your updated code and it is working fine for me. added cat background for bonus.
Source: stackoverflow.com
Related Query
- Having Trouble connecting react client to node backend with socket.io
- Having Issues with Writing Backend Code in Express and Connecting To React
- Socket IO - server not connecting with my react client
- React client socket not connecting with server socket
- Having issues connecting to express backend with React
- How to run a React Native App with Node js Backend on Android Device?
- Having trouble with React rendering a series of images from a map function
- React Hooks - having trouble with splice updating state during onClick event
- Trouble with sending data from react to node
- Having trouble updating a React component using a Hook with a timer
- React: Create CSV at client side with data retrieved from backend via Socket IO
- Make conditional GraphQL request based on node type value in React component with Apollo Client
- Apify-Client having trouble working with React
- Converting Vue slot code to React slot code - having trouble with passing data
- Send data back to React client from Node server with POST request
- Having trouble getting checkboxes to programmatically reset with React Bootstrap
- Having trouble with React Hooks and States. Trying to make a password strength meter
- React socket io client emitting twice to node server
- Having trouble setting radio with additional state method in React
- Having trouble with troubleshooting what's going wrong in testflight with my ionic react firebase app
- Having some trouble deploying react app and express/node.js backend on same port
- I am having trouble with dispatching redux action from react Login component . I have tried to figure it out in vain
- Having trouble with React useState method
- Having lots of trouble with React and Redux setup and props
- Trouble with file upload using javascript swagger client and react
- Having trouble connecting redux to react and dispatching actions
- connecting react frontend with node js rest api
- Having trouble with react error: 'Objects are not valid as a React child. If you meant to render a collection of children, use an array instead'
- Problem in connecting node js with react js
- Can't send jwtToken from react client to node/express backend with axios
More Query from same tag
- TypeError: this.props.persistor.subscribe is not a function Redux Persist
- React: How to load an image by path that contains special characters?
- What's the difference between useState(function_name), useState(function_name()), useState(()=>function_name()) and useState(()=>function_name)?
- Max jsx props per line within a function parameter
- Jest + Enzyme tests written in CoffeeScript
- How to reset value on form field?
- How to setInterval countdown for correct element index in the array JavaScript?
- How to map the select control options with the certain type?
- How can I make a button write text?
- How can I check condition in reactjsx?
- React Webpack not render DOM (regeneratorRuntime is not defined)
- react-hooks-form conflict with reactstrap
- Getting broken image icon when displaying image from online url in ReactJS
- React-Redux Functional Component Multiple Renders
- React with react-router: render component by replacing content in an element
- How reset form values using react bootstrap
- React & Progressbar.js: Custom shaped progress circle
- Too many re-renders. Using switch statement with useState()
- How to test functions other than render in a React class using jest?
- Aws Amplify Using Multiple Cognito User Pools in One GraphQL Api
- Can I use a dumb component as my top-level component with React/Redux App?
- How to render simple React component in MVC6 application, for dummies
- How to connect API with Web SPA through docker
- Microsoft Graph Toolkit: get logged in user
- ReactJS Button not calling the onClick event
- styled components: how to select child component?
- How to setup an app using browserify, babel, eslint, react/jsx, and jest (no gulp/grunt)?
- How to change the background or text color of the countdown timer to green when there is only 30 minutes remaining to finish the countdown?
- Combining objects with object destructuring and the turnary operator
- How to map over array of multiple types in TypeScript?