I built a CHAT application in 5 MINUTES using Laravel and Pusher!
Вставка
- Опубліковано 6 вер 2024
- 👇 Learn with me 👇
www.codewithro...
In this video, I'm going to share with you guys how I built a fully working chat application in 5 minutes using Laravel, PHP, Pusher, and jQuery.
Laravel is a popular PHP framework that you can use to build really cool applications like a chat app using Pusher as the mechanism to communicate, pusher is a real-time messaging system that can easily be integrated with Laravel
Join me as I share with you guys how to integrate your own Stripe Payment Gateway built with Laravel as the framework and PHP as the primary language!
Let me know your thoughts in the comments!
Source Code - github.com/ros...
Demo - chat.laravel.p...
Style CSS - chat.laravel.p...
WHO AM I?
I'm Ross. I'm a freelance senior web developer, a content creator, and someone who is passionate about creating things. I make videos that will aid your life in terms of working as a freelance web developer and give you all the necessary skills, tips, and tricks to live, survive, and strive in the competitive industry of programming, web development, and other related fields.
I've had a huge passion for technology ever since I was a kid, yes, I was pulling apart computers at 14 years old.
FEEL FREE TO CHECK ME OUT
LinkedIn ➡️ edlin.xyz/link...
Github ➡️ edlin.xyz/github
Website ➡️ www.codewithro...
Subscribe To My Channel HERE!
➡️ edlin.xyz/subs...
#RossEdlin #FreelanceProgramming #WebDeveloping
UPDATE - This only works with Laravel 10.
Since the release of Laravel 11, the exact steps in this tutorial don't quite match up so please ensure you install Laravel 10.
See the command below!
composer create-project laravel/laravel=10.* chat-laravel-pusher
Okayyy
Do you have chat with user to user with mysql?
Nice tutorial. No unnessary talks, just straightforward
Glad you like it!
finally a tutorial where you don't expend 2 hours into making all of the front end, straight to the point
Hey everyone, hope you like my video! Let me know in the comments what your think!
Hello please kindly help with your face handle let chat you privet
Clean, straight to the point. Amazing! Great job Ross! 😁
my messages only show up in the window that they are sent in.
Vdo 5 mints but understanding 100%,, great bro ❤
Nice Tutorial! love the way you teach straightforword. can you please tell how to live this and share with friend to use app for personal chat?
I clone your code but event receive in client : channel.bind not work, msg send but receive not run. I don't know where is error 😂
Did you populate the .env variables?
@@codeWithRoss I did all step which you guide. Did I uncomment boarcardprovider in config/app and use route/channel.php ? I don't see you use them in video
pusher.connection.socket_id ->where can i get socket_id, i dont have it
Straight to the point, Thank you ..
awesome video thank you!
Thanks for sharing your experience. Thanks man!
Glad you like it!
Awesome, Could you please share anything for one to one chat with online and typing indicators?
You can use promoted constructor properties in the PusherBroadcast class
Interesting! Thank you!
stitcher.io/blog/constructor-promotion-in-php-8
Great content. Keep it going 👍🏻
Thank you! Will do!
Amazing
Well that was amazing
Glad you liked it!
Thanks for the tutorial sir! I just have a question, what should I do to make it run on laravel11? I have been trying running this with the same steps it did not work at the end (no errors , just didnt work with two tabs connection), so what should i do?
I did the same as you and it worked, thank you so much because simple, and useful. But in the deploy environment, Route::post('/receive', [PusherController::class, 'receive']); not worked
great tutorial, i'm subscribing now
Thanks for the sub!
Hello, can you make a video like this using the authentication of pushers for private and group chats?
Hey!
Here is some documentation on Pushers Website regarding private channels - pusher.com/docs/channels/using_channels/private-channels/
Hi ! A very good video! Is there a special method to add the messages to the database, because I added an action to the form, but it doesn't work like that?
the first look when i saw the message text box shifted down when sent a message i knew this is a great tutorial😂😂😂
Glad you like it!
I'm doing everything as you did but I'm getting "Cannot use positional argument after named argument" error, what does this mean?
Hey!
I'd need to look at your source code to know more.
If you want to send me it I can take a look for you! :)
You can find my email on my contact page.
www.codewithross.com/contact
Thanks! What font do you use for your editor?
I'm using the default font from PhpStorm.
www.jetbrains.com/phpstorm/
thank you man it helped me a lot !
Glad to hear it!
This is insane!
Glad you like it!
awesome tutorial
Thanks for the video and I appreciate your hard work. I've followed you so far but I got "SSL certificate problem: unable to get local issuer certificate" in my Laravel Logs, how to remove/bypass it?
Hey!
I'd love to help you!
I recommend you get in touch with me personally via email and I can help you out!
See - www.codewithross.com/contact
Look forward to hearing from you. :)
hello sir, i have two different models ,i want to create chat between them, i am not using "users" table
one extra question, how to filter. Ex: I want to send only to a user not all users. But all users are receiving the message.
Hey there!
Glad you like my video!
You have several ways you can approach it.
You can use the channels which is specific to a user.
I used a public channel which everyone subscribes to but you can have individual users subscribe to a channel and then broadcast out to that specific channel.
You could pass a user_id with the message which the other end filters out, although this is not the best method.
For some extra reading - pusher.com/docs/channels/server_api/authorizing-users/
Please explain,
@@rahulchaurasia6347
If you need further help.. You can always contact me! www.codewithross.com/contact
can you so this using Flutter laravel pusher and using GetX if needed.
hi, can I ask something because I'm having an internal error. What changes or addition I need to make if there is a login/authetication(admin and users) process in my website?
everytime I click the submit button, the internal error kept showing
Hey,
I would need to take a look at your code, seems a bit more complicated.
Happy to do it.
Send it to hey@codewithross.com and I'll take a look. :)
where chat is it being saved?can i see old chats?
Hey there!
Unfortunately in this example, the chat is not being saved anywhere.
But it could easily be added by adding a Model which when you send / recieve messages, it logs them in the database. :)
I have another video coming out in a few weeks which deals with Laravel CRUD and is all about creating data in a database.
CAn you create a version of this tutorial for Laravel 10 and VUE Js SPA
Hola, si su codigo envia los mensajes pero no los recive, en mi caso, lo solucione verificando los campos de const pusher = new Pusher('{{config('broadcasting.connections.pusher.key')}}', {cluster: 'us2'}); En mi caso Pusher me pone us2, así que tengo que remplazar los servidores
Nice tutorial + 1 sub!
Thanks for the sub!
May i ask, how do you run tow locals at the same time??
Hey! I simply just opened two tabs of the same virtual machine. Because the code was not session based running two tabs even in the same browser would act like to completely different users.
Can anyone tell me the extension name which tells the name like url and action in the routes ? ❤
well done!
Thanks!
how do you bind this to an actual user in your database?
Nice content
Glad you like it!
how do you make a private channel to show the notification to only a specific user
Hey!
Here is some documentation on Pushers Website regarding private channels - pusher.com/docs/channels/using_channels/private-channels/
@@codeWithRoss thank you it worked
@@user-dn2fc2dk1o Glad I can help!
Btw, I'm currently offering a FREE 1-2-1 with me, I'm trying to get to know my audience better and how I can best help you.
You can ask me anything.
If you're interested, you can signup here.
www.codewithross.com/free-1-2-1
thank you sir.
Most welcome
i have a problem message send but not recieving
It's possible your listeners aren't picking it up. Are you sure it's definitely sending?
I do everything u did but mine still not working. 😢
Hey!
You can see my code here - github.com/rossedlin/chat-laravel-pusher/tree/youtube
Hopefully this can help you. :)
Bagaimana cara menghubungkan dengan database?
Sir, it is the css is the key word to make the livechat work? Because i place the css under the css folder, it had many errors, even i embedded the css code on top of the blade file still got the errors, then i used my own css. However, the livechat cannot function, so i confused on this
Hey!
Yes the CSS is important - chat.laravel.pusher.edlin.app/style.css
Also you will need to include the JavaScript Libraries too.
js.pusher.com/7.2/pusher.min.js
ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js
Nice
good content 👍
Thank you 👍
nice
Glad you like it!
Its working...
but can we save the message histroy and chat with other users.
In this demo it does not save the messages. But I'm releasing a new video soon which is all about saving data to a database. 😉
Can it be deployed as a user to message the admin?
Why JQuery? I don’t think you need jQuery for pusher
Interesting! I just did some more reading and you might be right! I'll have to experiment for future videos!
Hey, Great work! but I'm not able to receive messages, I can only send the messages, can you please guide ?
Hey there!
Glad you like it.
You can see my source code here - github.com/rossedlin/chat-laravel-pusher/tree/youtube
This is an exact copy of what you see in the video. :)
Hello sir I want to create a livestreaming software with live chat how to do that please tell me
Thanks
No problem
i download yor source code .. with my pusher keys but the message is not sending..
Hey!
Have a look at the README file I always include, it has all the steps I follow when building.
github.com/rossedlin/chat-laravel-pusher/blob/master/README.md#env
Let's say we have a POS app using Laravel.
And, your boss wants you to make a real-time report page for every transactions occur.
The boss expected to see data like [product name, total price, transaction time, sales name] of each transaction on that real-time report page.
How do you deal with that? Would you make a demo?
Yes!
I've previously worked with multiple POS providers like NCR doing exactly what you have requested.
I can certainly look at putting together something like this.
@@codeWithRoss awesome...I can't wait for the tutorial...
@@TrikNgonlen Which POS system are you using?
@@codeWithRoss Currently I don't use any POS system. I'm looking for great tutorial--like yours--to build great POS system using Laravel from scratch which has a feature like I mentioned in my previous comment.
I dont know why. My messages is sending after 2 seconds
Hey,
It might be you have a slower connection?
I just uploaded my code on server. now it is fast ;D
@@h-ash1757 Amazing!
its not working
Hey,
Just to confirm, this tutorial only works using Laravel 10.
Use this command to ensure you install 10, no the newer version 11.
composer create-project laravel/laravel=10.* chat-laravel-pusher
how to develop multiple pusher ? and every pusher should called on different conditions on one view screens how can do it ? I'll thanks full to you if you can sort it out this problem thanks ?
wait a minute,, you did not include how to configure users, in order to chat with someone, they should register their name to start off a chat session, this is not a real life app, you just put an html username, this is not useful at all.
I'll make the next one better!
anyone tried group chat???
Too fast for me to follow. 😢
Sorry to hear that.
Have you tried playing the video the video at 0.5 playback speed?
That might help. :)
can u make a private chat please