Realtime Features for React: Easier Than You Think

Рет қаралды 45,374

Жыл бұрын

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

Пікірлер: 45

@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 4 ай бұрын

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

@ammarys9980 4 ай бұрын

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

@malamhari_ 9 ай бұрын

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

@cameronmccoy2204 15 күн бұрын

Pppppp😊pp

@angzar Жыл бұрын

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

@jnayehsirine6222 8 ай бұрын

KEEP GOING !!!, you have such GOOOD content

@Subhamremady Жыл бұрын

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

@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

@murphyvanoijen6190 Жыл бұрын

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

@astronaut22 2 ай бұрын

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?

@siosaiafonua9286 10 ай бұрын

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

@NhanNguyen-ng7vn 6 ай бұрын

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 !

@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. 😁

@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 5 ай бұрын

Have you got your answer ?

@krisbude9607 9 ай бұрын

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.

@justin9494 2 ай бұрын

Can I use this with Strapi?

@suaeb175 Жыл бұрын

Thanks 🙏

@crazytydoo Жыл бұрын

I love the intros to these videos, very German 😆

@AaronMcCloud_Me 10 ай бұрын

7:25 The real-time functionality

@TheDionysiac 11 ай бұрын

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 9 ай бұрын

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 8 ай бұрын

@@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?