Socket IO with React and Typescript

Check out how to make a wonderful SOCKET IO connection with React & Express.
Video Info
Music by Tesko / prod. THXMOS: / @prod.thxmos6970
Github: github.com/joe...
Support
Like this video? You can show your support by buying me a coffee ☕❤️: www.buymeacoff...
Socials
Github: github.com/joe...
Twitter: / thenerdycanuck
About The Channel
The knowledge that I share here is mostly from my personal experiences. I wouldn't say I'm a 20 year professional, rather I am just a DevOps / Software Engineer with a lot of experience who enjoys teaching what I know in my spare time. I believe that sharing some of my basic knowledge on this platform can help others get started. There are many ways to program something and the videos you see here are my take on the NodeJS / Typescript / and sometimes Unity world. If this channel helps you learn, or helps you think differently then my job is done 😊.
#reactjs #socketio #typescript

[@JoaoKunha]

I stumble on the issue sockets/Component State not updating, only way to work was remove and add the eventlistener each time, but even so was not fine. I'll try to add the state to the Websocket context, like you did. Well done. Thank you

[@MislavBreka]

Hey! I believe the problem you were facing while disconnecting is because you send socked ids instead of client uids. Instead of Object.values you meant to use Object.keys in few lines there. Hope this helps

[@CiceroRafaelSilvadeOliveira]

Eu entendi porque a informação de usuários online está errada no client, é o seguinte, o dicionário de usuários conectados que temos no servidor é do tipo { [uid: string]: string } onde as chaves são os id's gerados no servidor usando o v4 e os valores são os socket id's. Ao enviar a lista de usuários do servidor para o client nós enviamos os valores do dicionário de usuários conectados, mas quando emitimos o evento 'user_disconnected' nós mandamos o uid do usuário que desconectou, ou seja, mandamos uma chave desse dicionário, só que o client não tem uma lista das chaves, ele tem uma lista dos valores desse dicionário, então quando o client tenta executar a ação 'remove_user' do SocketContext nenhum item da lista é retirado. Para corrigir isso é só trocar 'const users = Object.values(this.users);' por 'const users = Object.keys(this.users);' no arquivo socket.ts do servidor.

[@wjs7881]

Awesome! Thank you.

[@physcript2436]

this is great thank you

[@van8646]

amazing, thank you so much

[@m12652]

Thanks for this :)

[@alexandergarzo9415]

Thank you tor this tutorial! I have a question, where and how should I deploy the server? please help!

[@christianangelomsulit3759]

AWS, Vercel, Linode etc..

[@yukishimazu6378]

Awesome video! Thank you so much!! I have one question. When one of the clients disconnects, the number of Users online doesn't change in the other clients' page( 36:13 ). Can you solve the problem? I think when users: string[] is updated, react render is not working but I couldn't solve it.

[@TheNerdyCanuck]

Yeah I think I forgot this part, I can help if you still need it.

[@mawebtech]

awesome tutorial thank you.. I just wondering how can i use that socket instance another place such as controllers. It needs to have server instance that ServerSocket class thats why i can not use any other page

[@TheNerdyCanuck]

You can use it with controllers, thats the point of the static instance. Is that what you mean?

[@mawebtech]

​@@TheNerdyCanuck actually how to get use in a that controller so another page usage because instance wants a httpServer arg. in main.js file there is a const httpServer = http.createServer(application); but in controller there isn't. please forgive my newbie. In the video, I only see its use in the main directory, but how can I use the same instance on a different controller page?

[@user-qd7pz3nh8e]

where to find the starter please?

[@RdozeTV]

Mind to share what keyboard you are using?

[@TheNerdyCanuck]

Logitech wireless mechanical it's awesome

[@josemanuelulloavasquez3559]

How could I split the listeners into separate files based on that structure?

[@forli69]

you just have to create a function that defines the listeners in another file. Just like he did with start listeners. Example: Inside of clientEvents.ts you create a function clientEvents with all your events for the clients and inside of the StartListeners function you call the clientEvents function.

[@keepfeatherinitbrothaaaa]

I have a problem. My structure is as follows: - In my UI client component I have an onSubmitMessageHandler where i socket.emit("newMessage", 'some message val'). I'm importing socket from useContext(SocketContext).SocketState - On the server I listen for this emit and then react by calling socket.broadcast.emit("updateMessages", ). - Then in the SocketContextComponent, in the StartListeners function, I have a socket.on("updateMessages") listener which sends a SocketDispatch where I then update the messages state (an array of strings). My dispatch logic defined in the SocketContext is correct and working. Now the problem is that my dispatch always fires twice. I've been console.logging and the double call doesn't happen on the server, it happens in this last socket.on("updateMessages") listener. What am I missing? I've tried wrapping the onSubmitMessageHandler with a useCallback and an empty dependency array, wrapping the entire component in React.memo, but it's still making duplicate dispatch calls.

[@TheNerdyCanuck]

Remove the "react.strictmode" from the index file, see if that helps

[@keepfeatherinitbrothaaaa]

@@TheNerdyCanuck Hey. Thanks for the reply. That did resolve the issue, however this seems to be more of a workaround than a permanent solution. In other words, I'm curious if there's some anti-pattern that I'm using that could be causing this issue, or if there could be some structural improvements made to avoid it altogether.

[@TheNerdyCanuck]

@@keepfeatherinitbrothaaaa I thought the same, but logically I don't understand how it could be calling twice. If someone explains it to me one day I'll let you know :)

[@alvarmarkhester7194]

@@TheNerdyCanuck StrictMode just mounts component and remounts, so all the code is running twice. This is to make sure effects clean up if needed, cleaning up ie disconnecting from socker properly, so socketIO is perfect example why this check is nice to have.

[@alvarmarkhester7194]

@@TheNerdyCanuck great video, thanks for nice structure and good pace!