Multiple socket connections and event bindings can be easily overlooked in SPAs and can cause headaches. I'd like to share my experience of prevent...
For further actions, you may consider blocking this person and/or reporting abuse
I was working with React and Socket.io and one of the warning messages I got from the React server suggested storing the socket reference in a
useRef()hook, but honestly, I kind of like your solution more.Another additional thought I've seen is to use the
.context()API and serve the socket to all components through a Provider.@bravemaster619 I'm trying to use this strategy with a complex react app, with authentication, tests, I think i solved authentication but the tests are impossible, did you used this with a complex app or just for simple apps? can you help me?
Sorry for late reply. I see no reason why tests are impossible in this approach. Can you show me some of your code?
I implemented socket io as middleware, my problem with socket in component and tests is mocking socket io with jest.mock, I dont want to connect to real server in tests, but with middleware approach I could make tests and it seems better to not depend on component life cycle to handle events;
I had a really hard time configuring websocket with React, with middleware approach I could met all requirements
It is really a great helpful article, many thanks!🙏 I have been recently working with socket io( totally a layman 😂...), and just encountered the issue of multiple listeners attached to a certain event, even I put my socket in my useEffect, the problem still persisted, in the end, it turned out I didnt do cleanup in useEffect. After that, I experimented on it a bit, and found out that those listeners are still there even after the connection is closed, thus next time when a user log back in( in my case), the user wil have multiple listeners fire for a single event. Not quite sure if this is default behavior, but its kinda weird cuz I thought everything will be gone after the connection is closed😅. And one more thing, I personally think that "off() & on()" trick is the safest way to work with socket in react cuz we usually use socket across components, definitely dont wanna trigger the event in multiple places...
Again, thank you for such a great article👍
if i have MyComponent and MyComponent2 use socket.on('receive_event', eventHandler);
if MyComponent2 use socket.off('receive_event').on('receive_event',()=> function)
is MyComponent have is off after on like MyComponent2 ? .
i want MyComponent2 change socket on is MyComponent no action . How ?.
Shouldn't this be
const eventHandler = () => setConnected(true);like thisconst eventHandler = () => setConnected(!connected);WHAT I AM LOOKING FOR IS FINALLY!!
It worked. Thanks.
Hello,
What is the difference between the two solutions you mentioned? The service and the contextApi?
why are you not executing the connect event ?
SocketIO.on('connect', () => { ... })Where do the connection events need to be placed?