Realtime Features for React: Easier Than You Think

When I was new to web dev, implementing real-time features into your apps seemed like a nightmare. So many things to keep in mind. How to deploy the web sockets? How to manage scaling? I think this might be one of the most beginner-friendly approaches to implementing real-time features into your own app.
My GitHub: github.com/joschan21
The minimal realtime chat code: github.com/joschan21/minimal-...
Pusher (not sponsored): pusher.com/channels
I wish you a lot of fun implementing real-time features into your app! Let me know if you build something cool with it! Cheers

[@faizanahmed9304]

Thanks a lot! I was just looking the docs for pusher and was not understanding much and you've just dropped a video.

[@joshtriedcoding]

Been there, at first they confused me too

[@NinjaNezie]

Needed this for a clock in system I’m building. Very nice tutorial 🔥.

[@malamhari_]

Thanks, this video is very helpful to grasp the basic of Pusher
Hope you do well onwards!

[@cameronmccoy2204]

Pppppp😊pp

[@angzar]

Excellent Josh, great video as always. ...(ps. prisma format -> makes it so pretty)

[@ammarys9980]

bro you just created a conclusion for their bad documents, that's hard to believe, YOU A LIFE SAVER.

[@jnayehsirine6222]

KEEP GOING !!!, you have such GOOOD content

[@mateuspaula_dev]

Good video, thank you very much for sharing your knowledge. I really hope you keep producing videos with the same intensity.
Best regards, all the best from Brazil 🇧🇷

[@joshtriedcoding]

Cheers man, appreciate you

[@Subhamremady]

amazing bro. It was really something new for me . THnakss for the video

[@murphyvanoijen6190]

@Josh,
Great video again. Does this also work in NextJS 12?

[@siosaiafonua9286]

can react query do the same thing? provide real time updates?

[@astronaut22]

can we use pusher to implement ads campain feature like google ads, I mean showing users data as ad in queue in real time ?

[@josht29]

Great tutorial! But what if I have multiple channel I need to listen to? Do I need to create one useEffect per channel or put all listeners in one useEffect?

[@AssBlasterChan]

have you got a repo for reference? Curious how to set up the part where pusher talks to the db to preserve the state

[@joshtriedcoding]

Good call, will update that in the description

[@asimalqasmi7316]

@@joshtriedcoding waiting for the update 👍👍

[@joshtriedcoding]

@@asimalqasmi7316 It's available in the description now: github.com/joschan21/minimal-react-realtime

[@asimalqasmi7316]

I tried it myself before you sent the repo
It stumbled on useRouter in app page since it wasn't clear in the video until I figured out it was imported from navigation not router.
If you want to see my repo I'll share it here. 😁

[@NhanNguyen-ng7vn]

Today, i'm creating a chat in my school'project, and i don't khow how to unsubcribe channel_name inside return callback of UseEffect. Thanks you !

[@edihasrin7290]

hi josh,
Can you explain how to use SWR for realtime data. From the info I got on Twitter, it says it doesn't use third party services / web scoket.
i am very interested about that

[@tnctnctnctnc]

Have you got your answer ?

[@justin9494]

Can I use this with Strapi?

[@krisbude9607]

nice video Josh. Just one thing... I wouldn't teach other developers to use a let in a react client component instead of the useState hook. In this particular case it works because you don't have any parent component. But it is really a bad practice and should not be used in a client component to maintain state.

[@suaeb175]

Thanks 🙏

[@AaronMcCloud_Me]

7:25 The real-time functionality

[@crazytydoo]

I love the intros to these videos, very German 😆

[@TheDionysiac]

I'm not overly familiar with Prisma, but I was under the impression that you needed to set it up to work with a 3rd party DB service like Supabase or Planetscale. If so, which are you using in this project? If not, where is the database located?

[@filipjnc]

Any supported dbs and hosted anywhere.

[@acupofkoffi]

Hi. How long have you been learning web dev?

[@joshtriedcoding]

Gonna make a video on that soon :)

[@alexmagwe]

why dint you use useState for the input value?

[@joshtriedcoding]

no need to

[@hn3m3s1s]

Is it complex to setup a internal websocket on NextJS ?! 😢

[@joshtriedcoding]

Due to NextJS being serverless and WS requiring stateful connections, you can't. That's why I found this method so convenient, alternatively NodeJS with socket.io for small scale apps is totally fine too

[@hn3m3s1s]

@@joshtriedcoding Isn’t it that nextjs embed expressjs, and actually have a backend? The prisma calls for example are server side, right ?

[@joshtriedcoding]

@@hn3m3s1s Yes they are server-side. NextJS API routes use NodeJS, however, due to them being serverless, you don't have access to some APIs such as the file system. You can think of it as "every time my NextJS API gets called, I am 'renting' out a few seconds of a server's resources for this route to process the request".

[@hn3m3s1s]

@@joshtriedcoding Wuw, thanks for that! Very clear explanation and I understand now better how next works!

[@eeespartak]

@@joshtriedcodingWhy would you recommend it for small scale apps only? What better alternatives could you name for sth like a Java api + React/Next client?

[@haijomblo-rn8pl]

"use server" = prisma not api again 😢

[@maximusrayvego2673]

jump to 7:24

[@yacine5046]

That's really good, but it's paid and limited. The free version is also limited

[@ekchills6948]

Woow

[@whoisasey]

THANK YOU!! the Pusher docs were so trash.

[@user-hg4sv8ms6n]

NOt helpful
Just showing your code