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

Подписаться 632

Просмотров 7 тыс.

50% 1

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

Наука

Опубликовано:

27 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 53

@hamburger--fries 4 дня назад

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 4 дня назад

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

@christiancolewan 3 дня назад

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

@glennraya 3 дня назад

ahaha, salamat po! 😆

@rajaasyraf25 2 дня назад

Thanks a lot for sharing this!

@glennraya 2 дня назад

@@rajaasyraf25 you're welcome 🙏☺️

@farhadfarzi3351 День назад

Thats so cool.😯

@glennraya День назад

@@farhadfarzi3351 thanks 🙂

@ElephantBay-nv5jn 29 дней назад

good one bro

@gamesandlofimucic 5 часов назад

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

@glennraya 5 часов назад

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 3 часа назад

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

@glennraya 3 часа назад

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

@tasneemwahdan3618 21 день назад

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

@glennraya 21 день назад

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 21 день назад

@@glennraya great! Thank you 😊

@ThanHtutZaw3 11 дней назад

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

@anthonyhidalgo3391 14 дней назад

Nice video, what is your vsc theme please

@glennraya 14 дней назад

Thanks! The theme is "Github Dark Palenight"

@JSONFX 15 дней назад

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

@JSONFX 15 дней назад

and also what theme are you using?

@glennraya 15 дней назад

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

@JSONFX 8 дней назад

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

@glennraya 8 дней назад

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

@CaneZyle 28 дней назад

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 28 дней назад

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 20 дней назад

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 20 дней назад

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

@TheHenriquesbr 19 дней назад

@@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 19 дней назад

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

@hamzabarry7880 2 дня назад

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

@glennraya 2 дня назад

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 2 дня назад

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

@JordanJanevski 10 дней назад

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 10 дней назад

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 10 дней назад

@@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 10 дней назад

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 10 дней назад

@@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 10 дней назад

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

@user-zh5bo3tz5x 7 дней назад

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 6 дней назад

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.

@yamato23488 20 дней назад

Pwede sa laravel 10 sir?

@glennraya 20 дней назад

Yes pwede po.

@lotkutv2392 29 дней назад

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 29 дней назад

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

@KingRyanGaming 25 дней назад

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

@glennraya 25 дней назад

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