Socket IO with React and Typescript

Check out how to make a wonderful SOCKET IO connection with React & Express.

Video Info

Support

Socials

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

[thephotophilic_guy]

6:52 Client side configuration starts here!

[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.

[yukishimazu]

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.

[alexandergarzo]

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

[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

[RdozeTV]

Mind to share what keyboard you are using?

[josemanuelulloavasquez]

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

[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
- On the server I listen for this emit and then react by calling socket.broadcast.emit("updateMessages", <incoming message>).
- 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.