Great content! I just want to warn anyone who was struggling with the authentication. AVOID the 1.18.0 laravel-echo version, the auth is broken. If you use the 1.17.1 it works normally
Thank you so much, I just started learning about laravel reverb and sockets since yesterday. and I scratched my brains out trying to figure out why echo was not listening to events properly. downgrading the version fixed it. Thank you
By the way, if you believe this is a bug from echo v1.18.0, it would really help the community if you could file a bug report so the maintainers can fix it.
@@glennraya no sorry, it works for a while then im getting the same issue. I made a simple chat application using reverb and echo yesterday through a tutorial and docs. I used private channel to send messages. And sometimes it works flawlessly but when i logout and login again from second user the dispatched event is not being listened by client side for the first user or vice versa. Cant seem to understand what the problem is i downgraded the echo version refreshed the page and it works fine until i close one of the sessions and then the issue comes again.
Reverb will work with clients for as long as they can pull npm packages and support websocket protocols. To what I know Flutter doesn't support npm packages. So it may not work.
Using Vue3 or Nuxt instead of NextJS likely only requires little change here, since most are simply endpoint requests. For example, instead of useEffect, you would use onMounted using Vue instead.
I also encountered that and I think I made some updates to the repo, I remembered I just move that line somewhere in Echo, but regardless it would still work.
Hello and Good Day. I tried reverb for the first time, and I noticed that everytime I had some changes. I am getting an error, web socket connection failed. Then I tried going back to where I started, where the reverb was working fine, I am still getting that error. How should I fix this? I looked at the documentation, it said to run reverb:restart command to reflect changes, but it seems to not work for me.
Yes, it can be just $request->user()->id or ->user(), either way is fine. And take note this is just a demonstration and actually not a production app of course and you can improve some implementations as you see fit. 👍
In the example I used Laravel's NextJS scaffolding which is in regular JS, if you want to use typescript, you need to install a brand new nextjs via npx then configure it to use typescript, you can refer to nextjs docs for that.
Hello and Good day. I tried reverb for the first time, and I noticed that everytime I made some changes on my code, I am getting a "Websocket Connection Failed" in my browser console. Now when I tried going back to where I started, where everything was working fine, I am still getting the said error. I checked the documentation, and it said to run reverb:restart to reflect the changes, but it seems to not work for me.
I m facing problem since 2 days last night I found your video on TH-cam. this is my code snippet if you can help me this is my front-end side code useEffect(() => { if (echo) { echo.private(`order`) .listen('orderEvent', (e: any) => { console.log('Real time event', e); }); } }, []) event trigger from back-end code broadcast(new OrderEvent($order->toArray()))->toOthers(); but I dont get response in my console
@@warisrazaarain1544 First, you should ensure that you are accepting the event payload in the __construct() method of your OrderEvent class. And also, since this is a private channel, you should accept the "id" of the currently authenticated user in your channels.php route, ex. 'order.{id}'... That is discussed in my first Reverb video: th-cam.com/video/jMcIE1hnaYw/w-d-xo.html
@@warisrazaarain1544 If it doesn't print on the console, it's likely there's an issue on your Echo event listener on the frontend, check your syntax and in your code example ( echo.private(`order`)), you didn't specify the id of the currently authenticated user or the id of the one who should receive the event: "echo.private(`order{id}`)"
@@ObedGakpa most of the topics discussed can be applied to Vue as well, not much will change, you only need to use Vue’s way of handling state management and the onMounted hook instead of the useEffect in React.
I haven't tried it in React Native, but if you can pull npm packages in React Native and if it supports protocols for websockets, I think it would work.
@@glennraya bro, I'm trying to do this, the connection is working, it's just not subscribing to any channels, are the "Authorizing Private Broadcast Channels" steps in "SPA Authentication" mandatory for "Mobile App Authentication"? what do you think?
@@misterjs023 Yes, I think you should implement the authorization of private channels as well in mobile apps, additionally, I got some "update" notes in the video description, in your Laravel backend, in the authentication part, you can just return your tokens as "JSON response" instead of cookie, you might get an issue logging in (but should still work).
@@misterjs023 In your Echo events, it should accept an "id" of the currently authenticated user or the id of the user who can listen to an event, for private channels that is required.
Hi, in the description of the video, I mentioned an update there regarding returning the response of the auth token as cookies, but you can instead return it as json, return response()->json(['token' => $token]); It will ensure that the token won't have an expiration by default.
There's a couple of ports involved here, first the frontend port (3000), backend port (8000). Kindly clarify your issues, someone here might encounter the same error and have successfully fixed it and maybe able to help you.
@@glennraya I mean that, when I try to connect to the reverb websocket, I am getting the error, connection to ws://domain failed, I am using laravel 10, and nextjs14
@@joebadawi3258 Usually this error occurs when your REVERB_HOST env value doesn't match your local domain, or if you are using Windows and have local SSL, Windows is known to have issues with local SSL.
Hi, in the video I specifically discussed integrating Reverb with NextJS. I used the NextJS scaffolding for Laravel made by the Laravel team themselves, and it's mentioned/discussed in the video at the beginning.
Hi, great video. Using this nextjs and laravel setup, how can i protect the frontend routes? I want only authenticated users to be able to use the chatting app.
Thank you! You can easily protect the routes by putting them in the "auth" middleware group. You can also choose which user to interact with by just passing their ID as the receiver in the Echo part.
@glennraya thank you for your response. I don't understand what you mean by Middleware group. When I look at other nextjs projects, I see a separete Middleware file plus an authProvider context file that wraps the children of a layout, but after some research I think that Middleware file runs on the serverside and therefore doesn't accept the useAuth hook. Looking at your code I only see Middleware as a string variable.. with no components to protect children pages... so I am confused.
@@harrisonamaghu3956 I'm not sure how knowledgeable you are in Laravel, but the auth middleware group I mentioned is on the Laravel side (backend), that's where you'll configure the routes, including the authenticated routes that only authenticated users can access.
@glennraya oh I was asking about the frontend nextjs. I already setup the backend Middleware. But since we're using a different framework for frontend I don't know if I need another Middleware on the frontend to prevent access to certain pages in nextjs
I also use Vue, but right now I don't have an example of this using Vue, however, it's not very hard to transfer the concept here in Vue, you only have to listen to the channels inside the onMounted() hook in Vue, since this is React, of course, it's inside of the useEffect(). That's all the major difference when it comes to the implementation.
@@glennraya yung problem ko po kasi dun sa ginawa ko is di ko mapagana yung chat notification sound at yung sa group chat na instead of yung members lang makakatanggap ng message, lahat ng users ang nakaka tanggap haha. pero okay lang po sir, will wait kung meron ka man bago tutorials
@@gamesandlofimucic sa notif sound, search ka na lang ng similar implementation sa vue, if lahat ng users nakakatanggap, need mo lang ipasa yung ID ng user na gusto mo padalhan dun sa broadcast event class, para yun lang ang makaka listen ng events.
@@gamesandlofimucic Yung pinaka latest kong video about Reverb: th-cam.com/video/C39uG7PaeDI/w-d-xo.htmlsi=iYipIPdQVCwbY77Z - one on one chat na yan, kaso React pa din, makak receive lang ng message is yung intended user, hindi lahat. Check mo lang yung event class saka yung Echo listeners ko sa code, available sa description.
thank you it's was really good video, but i can not connect from live server, my react or laravel project are hosted with diffrent project, do you have any solution for this please, can you post a live server deploy video please
Thanks, if your front end and back end are hosted on different servers, make sure you setup your CORS properly, or authentication tokens, and also make sure you are using valid SSL and able to communicate to the back end's web socket server. I believe this setup can be read from the Laravel docs.
@@সীমাহীনভালবাসা-গ২র Some people who have the same setup as yours was able to set it up. Of course, different systems have different configs. Many of the problem has something to do with SSL and some CORS config. It would be helpful if you can tell the exact error. You can also open an issue on the GitHub repo linked in the description so you can post a screenshot, etc.
Salamat boss, medyo na guluhan ung sa first step pero nagets ko naman. hinahanap ko tong tutorial kung pano gamtiin reverb pero for RESTApi , decoupled arch ung lagi kong gamit sa web dev,
Sir! Hello, Good Day po. meron po kayong full tutorial on how to start a very simple project using laravel and nextjs po? interested po kasi akong matuto nito. kahit basic CRUD operations lang po. Thank you and God bless♥
@@darck5240 Yes, if you're using wss, you need to specify the actual domain name in your .env file for the REVERB_HOST, and the REVERB_SCHEME should be 'https' instead of 'http'
@@glennraya Thank you for your help and time. however something still seems to be missing since postman is only connecting on ws and not wss. i'll come back here and comment if i ever find the solution, great tutorial though keep it up ✌
Hello.. I made it work in React-Native.. what i did is just use my own auth middleware instead of "auth:sanctum" ->withBroadcasting( __DIR__.'/../routes/channels.php', ['prefix' => 'api', 'middleware' => ['api', 'auth:api']], )
Hi, absolutely you can. If you watched this video the implementation in vuejs should be similar. The only difference would be for example, you would place the Echo event listeners inside of the onMounted() hook in Vue, instead of inside the useEffect in React of course. You can use Reverb in any front-end framework (React, Vue, Svelte, Gatsby, Next, Angular, etc.).
@@glennraya I mean how can I subscribe to my channels in vuejs with laravel echo, and listen for events. The laravel echo has a file in echo.js. I can't use that because I am already using typescript. So I have to adapt it as a ts in my main.ts file I think. And then listen to channels for events. But I cant find the correct ts syntax. My vue app is separated from laravel.
Great content! I just want to warn anyone who was struggling with the authentication. AVOID the 1.18.0 laravel-echo version, the auth is broken. If you use the 1.17.1 it works normally
What is the "1.18.0/1.17.1"?
@@glennraya Oops, forgot to mention, it is the laravel-echo version
Thank you so much, I just started learning about laravel reverb and sockets since yesterday. and I scratched my brains out trying to figure out why echo was not listening to events properly. downgrading the version fixed it. Thank you
By the way, if you believe this is a bug from echo v1.18.0, it would really help the community if you could file a bug report so the maintainers can fix it.
@@glennraya no sorry, it works for a while then im getting the same issue. I made a simple chat application using reverb and echo yesterday through a tutorial and docs. I used private channel to send messages. And sometimes it works flawlessly but when i logout and login again from second user the dispatched event is not being listened by client side for the first user or vice versa. Cant seem to understand what the problem is i downgraded the echo version refreshed the page and it works fine until i close one of the sessions and then the issue comes again.
galing mo talaga kuya Glen!!!!
@@joshdevofficial Thanks po
Nakasubscribe na sir ako yung nagcomment sa UDEMY nyo po sir ganda nito bagong pagtutuonan na naman
Thank you! I'll be posting more regularly, maybe next is deploying Reverb to production.
@@glennraya Thankyou sir pagpatuloy mo lang to sir mga ganitong content
Can I integrate it with flutter as well? I cant find any tutorials laravel reverb and flutter project.
Reverb will work with clients for as long as they can pull npm packages and support websocket protocols. To what I know Flutter doesn't support npm packages. So it may not work.
@glennraya ok, what do you recommend to use with flutter then?
@@abduhalim05 I'm not a Flutter dev. Sorry. I can't recommend anything. Maybe flutter has a native way of dealing with real-time features.
Would it be possible to do a tutorial with vue3 as separate frontend and how to accomplish the same thing as this nextjs tutorial?
Using Vue3 or Nuxt instead of NextJS likely only requires little change here, since most are simply endpoint requests. For example, instead of useEffect, you would use onMounted using Vue instead.
I have error in hook nextjs, on "window.Pusher = Pusher"
I also encountered that and I think I made some updates to the repo, I remembered I just move that line somewhere in Echo, but regardless it would still work.
what about React Native, I couldn't find correct way to achieve this integration :(
I remember some of the guys commented on this thread that they were able to integrate this in React Native.
Hello and Good Day. I tried reverb for the first time, and I noticed that everytime I had some changes. I am getting an error, web socket connection failed. Then I tried going back to where I started, where the reverb was working fine, I am still getting that error. How should I fix this? I looked at the documentation, it said to run reverb:restart command to reflect changes, but it seems to not work for me.
Are you on macOS or Windows? I heard issues with Windows if you have local SSL certificate, if you have, try to run your project without local SSL.
Why can’t sender be just $request->user()->id because we’re using laravel sanctum?
Yes, it can be just $request->user()->id or ->user(), either way is fine. And take note this is just a demonstration and actually not a production app of course and you can improve some implementations as you see fit. 👍
How do I turn the nextjs app to typescript
In the example I used Laravel's NextJS scaffolding which is in regular JS, if you want to use typescript, you need to install a brand new nextjs via npx then configure it to use typescript, you can refer to nextjs docs for that.
hello can we use different domain for frontend and backend if yes then guide me please because I m facing this issue last 2 days.and its on deployed
Yes you can, you can configure domains in your sanctum.php config file. You can specify the frontend domain there.
Hello and Good day.
I tried reverb for the first time, and I noticed that everytime I made some changes on my code, I am getting a "Websocket Connection Failed" in my browser console. Now when I tried going back to where I started, where everything was working fine, I am still getting the said error.
I checked the documentation, and it said to run reverb:restart to reflect the changes, but it seems to not work for me.
Hello, if you're on Windows and using local SSL, you might encounter that error, try it again without SSL.
can we use reverb broadcasting with react js separate project ?
Yes, absolutely. The implementation should be the same in a React project, the same is true with other frameworks.
I m facing problem since 2 days last night I found your video on TH-cam.
this is my code snippet
if you can help me
this is my front-end side code
useEffect(() => {
if (echo) {
echo.private(`order`)
.listen('orderEvent', (e: any) => {
console.log('Real time event', e);
});
}
}, [])
event trigger from back-end code
broadcast(new OrderEvent($order->toArray()))->toOthers();
but I dont get response in my console
@@warisrazaarain1544 First, you should ensure that you are accepting the event payload in the __construct() method of your OrderEvent class. And also, since this is a private channel, you should accept the "id" of the currently authenticated user in your channels.php route, ex. 'order.{id}'... That is discussed in my first Reverb video: th-cam.com/video/jMcIE1hnaYw/w-d-xo.html
I receive data in my browse`s network message after adding new record but not in the console these are the screenshots screenshot
@@warisrazaarain1544 If it doesn't print on the console, it's likely there's an issue on your Echo event listener on the frontend, check your syntax and in your code example ( echo.private(`order`)), you didn't specify the id of the currently authenticated user or the id of the one who should receive the event: "echo.private(`order{id}`)"
what about with a frontend like vue?
@@ObedGakpa most of the topics discussed can be applied to Vue as well, not much will change, you only need to use Vue’s way of handling state management and the onMounted hook instead of the useEffect in React.
very good! thanks....do you know if the configurations for React Native as a client should be applied at the same way?
I haven't tried it in React Native, but if you can pull npm packages in React Native and if it supports protocols for websockets, I think it would work.
@@glennraya yes, we can do this, I´ll try to implement using laravel as "websocket-backend"
@@glennraya bro, I'm trying to do this, the connection is working, it's just not subscribing to any channels, are the "Authorizing Private Broadcast Channels" steps in "SPA Authentication" mandatory for "Mobile App Authentication"? what do you think?
@@misterjs023 Yes, I think you should implement the authorization of private channels as well in mobile apps, additionally, I got some "update" notes in the video description, in your Laravel backend, in the authentication part, you can just return your tokens as "JSON response" instead of cookie, you might get an issue logging in (but should still work).
@@misterjs023 In your Echo events, it should accept an "id" of the currently authenticated user or the id of the user who can listen to an event, for private channels that is required.
How about when token expires what should we do sir?
Hi, in the description of the video, I mentioned an update there regarding returning the response of the auth token as cookies, but you can instead return it as json, return response()->json(['token' => $token]); It will ensure that the token won't have an expiration by default.
I am getting an error stating that the connection to the port I put failed, how to fix it please?
There's a couple of ports involved here, first the frontend port (3000), backend port (8000). Kindly clarify your issues, someone here might encounter the same error and have successfully fixed it and maybe able to help you.
@@glennraya I mean that, when I try to connect to the reverb websocket, I am getting the error, connection to ws://domain failed, I am using laravel 10, and nextjs14
@@joebadawi3258 Usually this error occurs when your REVERB_HOST env value doesn't match your local domain, or if you are using Windows and have local SSL, Windows is known to have issues with local SSL.
How did you integrate Laravel and NextJS?
Hi, in the video I specifically discussed integrating Reverb with NextJS. I used the NextJS scaffolding for Laravel made by the Laravel team themselves, and it's mentioned/discussed in the video at the beginning.
Must I use echo?? I wanted to integrate with flutter
@@josephkamande4502 I think you can’t integrate it with Flutter, you need to pull in js packages to make it run.
I connected to a private channel in flutter but didn't receive any events.
Public channel works well
@@mohdsajidshaikh4291 For the private channel, please make sure you passed the "id" of the user who will receive the events.
@@glennraya yes passed
Successfully subscribe to channel but not receiving events from it
great video, straight to the point
Thank you!
Hi, great video. Using this nextjs and laravel setup, how can i protect the frontend routes? I want only authenticated users to be able to use the chatting app.
Thank you! You can easily protect the routes by putting them in the "auth" middleware group. You can also choose which user to interact with by just passing their ID as the receiver in the Echo part.
@glennraya thank you for your response. I don't understand what you mean by Middleware group. When I look at other nextjs projects, I see a separete Middleware file plus an authProvider context file that wraps the children of a layout, but after some research I think that Middleware file runs on the serverside and therefore doesn't accept the useAuth hook. Looking at your code I only see Middleware as a string variable.. with no components to protect children pages... so I am confused.
@@harrisonamaghu3956 I'm not sure how knowledgeable you are in Laravel, but the auth middleware group I mentioned is on the Laravel side (backend), that's where you'll configure the routes, including the authenticated routes that only authenticated users can access.
@glennraya oh I was asking about the frontend nextjs. I already setup the backend Middleware. But since we're using a different framework for frontend I don't know if I need another Middleware on the frontend to prevent access to certain pages in nextjs
@@harrisonamaghu3956 I use NextJS for this example, I didn't need to use a different middleware on the frontend since Laravel's suffice.
do you have a vuejs version of this? would love to watch it
I also use Vue, but right now I don't have an example of this using Vue, however, it's not very hard to transfer the concept here in Vue, you only have to listen to the channels inside the onMounted() hook in Vue, since this is React, of course, it's inside of the useEffect(). That's all the major difference when it comes to the implementation.
@@glennraya yung problem ko po kasi dun sa ginawa ko is di ko mapagana yung chat notification sound at yung sa group chat na instead of yung members lang makakatanggap ng message, lahat ng users ang nakaka tanggap haha.
pero okay lang po sir, will wait kung meron ka man bago tutorials
@@gamesandlofimucic sa notif sound, search ka na lang ng similar implementation sa vue, if lahat ng users nakakatanggap, need mo lang ipasa yung ID ng user na gusto mo padalhan dun sa broadcast event class, para yun lang ang makaka listen ng events.
@@gamesandlofimucic Yung pinaka latest kong video about Reverb: th-cam.com/video/C39uG7PaeDI/w-d-xo.htmlsi=iYipIPdQVCwbY77Z - one on one chat na yan, kaso React pa din, makak receive lang ng message is yung intended user, hindi lahat. Check mo lang yung event class saka yung Echo listeners ko sa code, available sa description.
thank you it's was really good video,
but i can not connect from live server, my react or laravel project are hosted with diffrent project, do you have any solution for this please,
can you post a live server deploy video please
Thanks, if your front end and back end are hosted on different servers, make sure you setup your CORS properly, or authentication tokens, and also make sure you are using valid SSL and able to communicate to the back end's web socket server. I believe this setup can be read from the Laravel docs.
@glennraya
I also try like that but i still getting error,
Locally it’s working perfectly, but when i host, in live server it’s will not connect
@@সীমাহীনভালবাসা-গ২র Some people who have the same setup as yours was able to set it up. Of course, different systems have different configs. Many of the problem has something to do with SSL and some CORS config. It would be helpful if you can tell the exact error. You can also open an issue on the GitHub repo linked in the description so you can post a screenshot, etc.
@@সীমাহীনভালবাসা-গ২র You can just open up a GitHub issue with the repo linked in the description.
you are amazing. Thank you
Thank you! 🙏
Amazing content keep it up 👍
Thank you! 🙏🏼
Here before you blow on YT
Salamat boss, medyo na guluhan ung sa first step pero nagets ko naman. hinahanap ko tong tutorial kung pano gamtiin reverb pero for RESTApi , decoupled arch ung lagi kong gamit sa web dev,
@@sprowt2266 welcome po! Pakibasa na lang po pala yung "update" sa description. Thanks
Please add timestamps for the specific steps
Sure, I'll spend some time to add the timestamps.
Wouldn’t the auth be confusing since next has its own auth framework
If you are going to pair Laravel API/Reverb in this case with NextJS, your auth provider would now be Laravel itself since it's your backend provider.
NextAuth.js is third party, and will be renaming to Auth.js. I would not call it its "own auth framework" since it's not included in NextJS
Keep it up, please make more tutorial
Thanks, I will post regularly. ☺️
very clear tutorial
Thank you! 🙏🏼
Hey brother pretty newb here.. what is the password for the databse seeders? or should I register a new account?
I typically set the default password for the the seeders as 'password'.
thank you so much
i was here before this channel gets viral!
@@b3rking Thank you
Great video . Thank you
Can make simple short video how connect to private channel in flutter
@@eslamelbadry6383 Reverb needs Echo which is an npm package. I'm not sure if Flutter supports it.
Sir! Hello, Good Day po. meron po kayong full tutorial on how to start a very simple project using laravel and nextjs po? interested po kasi akong matuto nito. kahit basic CRUD operations lang po. Thank you and God bless♥
@@paullodicakes5996 Hi, wala pa akong video nun eh. Pero nasa plan ko din yun. Medyo na busy lang ako sa work kaya medyo na hinto sa pagupload.
Great video!
Thank you!
Good Jop 🔥🔥🔥
🔥🔥
so so so good
🔥
Thank
no wss
Since this is in a local development environment, it doesn't need to.
@@glennraya are there any additions required for wss, assuming an ssl certificate and https are already implemented
@@darck5240 Yes, if you're using wss, you need to specify the actual domain name in your .env file for the REVERB_HOST, and the REVERB_SCHEME should be 'https' instead of 'http'
@@glennraya Thank you for your help and time. however something still seems to be missing since postman is only connecting on ws and not wss. i'll come back here and comment if i ever find the solution, great tutorial though keep it up ✌
@@darck5240 There's a guide for using SSL with Reverb on Laravel's docs.
Hello.. I made it work in React-Native.. what i did is just use my own auth middleware instead of "auth:sanctum"
->withBroadcasting(
__DIR__.'/../routes/channels.php',
['prefix' => 'api', 'middleware' => ['api', 'auth:api']],
)
Superb! 😎
Can we use reverb broadcasting with vuejs separate project ?
Hi, absolutely you can. If you watched this video the implementation in vuejs should be similar. The only difference would be for example, you would place the Echo event listeners inside of the onMounted() hook in Vue, instead of inside the useEffect in React of course. You can use Reverb in any front-end framework (React, Vue, Svelte, Gatsby, Next, Angular, etc.).
@@glennraya Thanks man. I appreciate it.
@@glennrayaBrother, I am using vue 3 with vite and typescript. How can I make these configurations in typescript?
@@TM-ss8ch what specific configuration?
@@glennraya I mean how can I subscribe to my channels in vuejs with laravel echo, and listen for events. The laravel echo has a file in echo.js. I can't use that because I am already using typescript. So I have to adapt it as a ts in my main.ts file I think. And then listen to channels for events. But I cant find the correct ts syntax. My vue app is separated from laravel.