DEV Community

A Socket.io tutorial that ISN'T a chat app (with React.js)

Talha Muhammad on April 07, 2019

A Socket.io tutorial that ISN'T a chat app (with React.js) Recently, a friend asked for advice for displaying sensor data in real-time (...
Collapse
 
mandaputtra profile image
Manda Putra

I love the title

Collapse
 
ajaypatel profile image
FoodBite

Hey i have a question, i am making chat app ,so where should i put my socket.on() method to continuously update the state without calling it explicitly.
I am noob in react, please help, thanks in advance

Collapse
 
captainpandaz profile image
Talha Muhammad

Hey! Sorry about the late response.

I'm going to assume that you're asking about where to put socket.on() on the client app (which im also assuming is in react).

I'm also going to assume you aren't using hooks since this tutorial did not have hooks (hooks are awesome btw)

If both of these are valid, you can add the "listener" to a components componentDidMount lifecycle method, just like I did above.

You can read more about the method here: reactjs.org/docs/react-component.h...

Collapse
 
nejurgis profile image
Nejurgis

Hey Talha! I've found your post by looking for tuts on best practices for react+web sockets. Thanks its a nice read! Im looking for ways how to optimize my code since its a bit slow right now, I'm using gatsbyJs on the front end and an express on server side to store some mouse events by visitors of the website, I was wondering if you could help me out by looking if im doing something that slows down the whole process.. the app is deployed here jurg.io/ and here's the code for client: github.com/Nejurgis/portfolio and here's the simple server - github.com/Nejurgis/portfolio-server . Forever grateful!

Collapse
 
tg2024286352 profile image
tg20

Thank you! this is exactly what I was looking for

Collapse
 
captainpandaz profile image
Talha Muhammad

Awesome! 😎

Collapse
 
sahilatahar profile image
Sahil Atahar

Nice article, I have build a Realtime code editor project using socket.io called Code-Sync.

It offers a real-time collaborative code editor featuring unique room generation, syntax highlighting, and auto-suggestions. Users can seamlessly edit, save, and download files while communicating through group chat

Collapse
 
lethanhvietctt5 profile image
Le Thanh Viet

I have learned about ReactJS and Socket recently and written an video call and chat app using ReactJS and Socket .Here is my source code: github.com/lethanhvietctt5/video-c.... I hope it can help you guys to build a video chat app.

Collapse
 
l3android profile image
Leandro Gabriel

What's the repository? please

Collapse
 
captainpandaz profile image
Talha Muhammad

I didn't set up a repo but all code is above

Collapse
 
feezyhendrix_18 profile image
Abdulhafeez Abdulraheem

Awesome!

Collapse
 
rogergcc profile image
Roger

i read isnt a chat app and YES!!!

Collapse
 
teamallnighter profile image
Chris Connelly

Love it!

Collapse
 
kikeflowers profile image
kikeflowers

Thanks, It helped me a lot.

Collapse
 
whenmoon profile image
Tom Belton

This is awesome, way more useful than the official chat app tutorial. I feel like I'm ready to go and start using socket.io although will be doing everything with react hooks 👌🏼

Collapse
 
captainpandaz profile image
Talha Muhammad

Good luck! I recently went through a great hooks course and I can't get enough of them! Hooks are great and I definitely recommend using them in conjunction with socket.io

Collapse
 
rogergcc profile image
Roger

ok setinterval