Laravel Reverb: The Easiest Way to Add Real-Time Magic to Your App

Final code: github.com/glennraya/funwithr...
Laravel Reverb is a recent addition to the Laravel ecosystem, making it incredibly easy to add real-time features to any web application or website. It seamlessly integrates with Laravel's event broadcasting capabilities and uses Echo to listen to events from your Laravel-powered backend.
In this video, we'll dive into a practical example of utilizing Reverb to enable real-time communication between your frontend and backend via WebSocket connections. With Reverb, implementing real-time features in 2024 and beyond is a must for any modern web app. Join me as we explore how effortless and powerful Reverb can be!
#laravel #reverb #websocket #realtime #eventbroadcasting #laravelecho #php #webdevelopment #backend #frontend #fullstack #programming #tutorial #coding #websockets #real-timeapps #laraveltutorial #webapp #modernwebdevelopment #liveupdates #fullstackdevelopment

[@webdevlounge]

You deserved more subscribers

[@glennraya]

Thank you! 🙏

[@hamburger--fries]

Wow! This saved me some time and I did not know about Reverb. I am using it for a Book project taking Japanese to other languages and allow users to edit the text. I section text into blocks which could be a paragraph or a sentence and users can see which blocks of text in the book are being edited or have a hold because someone already edited. I used Tailwind as well. Thanks for this wonderful video you put out!

[@glennraya]

Thanks for your kind comment. Good luck on your projects. You may check my other videos related to Laravel Reverb. ☺️🙏

[@rajaasyraf25]

Thanks a lot for sharing this!

[@glennraya]

@@rajaasyraf25 you're welcome 🙏☺️

[@farhadfarzi3351]

Thats so cool.😯

[@glennraya]

@@farhadfarzi3351 thanks 🙂

[@christiancolewan]

Ang ganda ng explanation kung ganto lang sana mga speakers sa DICT seminars😅

[@glennraya]

ahaha, salamat po! 😆

[@ElephantBay-nv5jn]

good one bro

[@gamesandlofimucic]

where do you get ID and keys for reverb in the env file? also, nice tutorial, subscribed to you haha

[@glennraya]

There's no artisan command to generate that unless you install broadcasting from scratch, but you can set it to whatever string/numeric values you want for as long as it is unique. That's all it requires.

[@gamesandlofimucic]

@@glennraya so hindi na need gumawa ng account boss? hindi katulad ng pusher? so random string as long as unique?

[@glennraya]

@@gamesandlofimucic yes po. Wala ng account bale parang locally hosted yan

[@CaneZyle]

nice one boss. easy to deploy din ito? like sa mga configs/env... any tips/advice on the things to consider before deploying (ie: dev server), any issues you encountered so far using this package?

[@glennraya]

Thank you. Actually kahapon ko lang na try yung Reverb, pero yung deployment sa production should be almost the same sa local, may reverb server and queue workers na naka start, you may need to configure supervisor to restart yung mga process kapag nag reboot ng server, and yung mga deployment tips sa Laravel Broadcasting docs, under deployment may mga tips sila sa server configs.

[@TheHenriquesbr]

Cool, simple and straightforward. I tried several projects and none worked through the network. Only on the server. Like using another machine or over the phone doesn't work. Any tricks to make it work?

[@glennraya]

I haven't tried that setup yet, but it should be fairly easy to setup in production servers.

[@TheHenriquesbr]

@@glennraya Thanks for the feedback! Maybe when you have some free time, you could make a video explaining how to put it into production on a local server. Lay people always wanting to learn from the best. Thanks again and stay focused on helping others!

[@glennraya]

@@TheHenriquesbr Yes, I actually planning the video for deploying Reverb into a production server, a VPS with a domain. Thank you for your feedback! ☺

[@tasneemwahdan3618]

Very nice explanation 👌 thank you You used the same channel for both events right?

[@glennraya]

Thank you! yes, it's a single channel, and listen to multiple events. Tomorrow, I'm going to upload a new video as a follow-up to this, where I'm going to explain how we can use Laravel Reverb when the frontend is separated from the backend, I'll be using NextJS for that example.

[@tasneemwahdan3618]

@@glennraya great! Thank you 😊

[@ThanHtutZaw3]

@@glennraya Can we also use this in MEVN stack ? Nodejs Vue Mongo

[@hamzabarry7880]

Hi I'm using livewire how to dispach my event??

[@glennraya]

Hi, I'm not using livewire so I can't tell 😅 to my knowledge people say it's actually easier in livewire. However dispatching an event is just the same: broadcast(...) or event(...) from your controller methods or wherever you need to dispatch the event.

[@hamzabarry7880]

@@glennraya yes it's normally very easy to dispatch but I have a problem that I don't know where he is from

[@anthonyhidalgo3391]

Nice video, what is your vsc theme please

[@glennraya]

Thanks! The theme is "Github Dark Palenight"

[@JSONFX]

What do you use for this project? Awesome video by the way!

[@JSONFX]

and also what theme are you using?

[@glennraya]

Thank you, I used nextUI for some of the UI. It's the Laravel Breeze scaffolding.

[@JSONFX]

@@glennraya what font are you using for this project?

[@glennraya]

@@JSONFX Github's Monaspace code fonts (Monaspace Neon).

[@user-zh5bo3tz5x]

it is working, but i had to install pusher js, even i don't need it. otherwise there is an error: ReferenceError: Pusher is not defined

[@glennraya]

Yes, I'm aware of the Pusher is not defined error, to what I remember, you only need to put the window.Pusher instance in the useEffect hook. If you try to remove pusher, it won't work. I think Echo is using some of Pusher's methods, maybe that's why it is still needed and was included in the docs to be installed.

[@JordanJanevski]

Very informative and nicely done. I tried this in my local env. but i cant pass this simple error. I can notice at 8:25 of this video that your console shows the same thing for you as well. Firefox cant establish a connection to wss. I tried both laravel Herd (free) and docker but to no avail. Do you have any guidance for how to resolve this? Thanks in advance

[@glennraya]

Thanks for the comment, you have to make sure that REVERB_HOST is set your local domain "example.test" and your REVERB_SCHEME is set to https. In some dev environments, some do encounter this issue on Firefox, so far I don't encounter this. Kinda unpredictable, but it should work normally in production.

[@JordanJanevski]

@@glennraya Thanks for the answer, I already have the env set with the correct data. But i am already at this for 2 days and i slowly lean to giving up :/

[@glennraya]

If you're developing on Windows but it's working on Webkit browsers (chrome, edge, etc.) it should be fine, other people also have this issue on Firefox on Windows because Firefox seems to have been rejecting local SSL, in production it should be fine. On macOS though, it seems to be ok.

[@glennraya]

@@JordanJanevski I suggest removing the local SSL and testing it on HTTP only (without SSL), and it should work. I also talked to other people regarding this, and their issue is that the local SSL on Windows seems to be not working on all browsers.

[@JordanJanevski]

@@glennraya After disabling the SSL in herd, and changing app url and reverb scheme to http, I dont see any differences. I still see the error in the console being for wss.. is windows this bad or is it just me? x.x its the same for both chrome / firefox

[@lotkutv2392]

Saktong sakto to sa inaaral ko kanina sa work for realtime notif when client request something😂 gamit ko sir laravel + pusher at react/next + pusherjs. Saktong sakto itong video mo ito hinahanap ko yung naka per user po yung notif sa ngayon kasi ginagawa ko parang naka public broadcast lang hindi naka private channel.

[@glennraya]

Madali po yan promise. Mas matagal ko pa ginawa yung UI para example kaysa doon sa real-time mismo.

[@KingRyanGaming]

Mas gaganda ba system king naka vue or next.js ang front end?

[@glennraya]

@@KingRyanGaming depende po sa requirements ng project. If malaking app na maraming modules and may kasama pang mobile app, better na naka decoupled architecture (separate frontend/backend).

[@yamato23488]

Pwede sa laravel 10 sir?

[@glennraya]

Yes pwede po.