I built a CHAT application in 5 MINUTES using Laravel and Pusher!

Поділитися
Вставка
  • Опубліковано 4 гру 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

КОМЕНТАРІ • 122

  • @codeWithRoss
    @codeWithRoss  8 місяців тому +10

    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

  • @programmingmindset
    @programmingmindset Рік тому +36

    Nice tutorial. No unnessary talks, just straightforward

  • @rodrigo-tj1gf
    @rodrigo-tj1gf 3 місяці тому

    finally a tutorial where you don't expend 2 hours into making all of the front end, straight to the point

  • @GavinKimpson
    @GavinKimpson Місяць тому +2

    Would be awesome to see this for Laravel 11 & Reverb :) Great content by the way

  • @tobiaslarsen6689
    @tobiaslarsen6689 9 місяців тому

    Clean, straight to the point. Amazing! Great job Ross! 😁

  • @codeWithRoss
    @codeWithRoss  Рік тому +9

    Hey everyone, hope you like my video! Let me know in the comments what your think!

    • @sunetcomedy3463
      @sunetcomedy3463 Рік тому

      Hello please kindly help with your face handle let chat you privet

  • @mahadihassanbabu9646
    @mahadihassanbabu9646 6 місяців тому

    Vdo 5 mints but understanding 100%,, great bro ❤

  • @niageo876
    @niageo876 11 місяців тому +3

    my messages only show up in the window that they are sent in.

  • @gideonbasco1619
    @gideonbasco1619 7 місяців тому

    Straight to the point, Thank you ..

  • @gabe9074
    @gabe9074 9 місяців тому +1

    awesome video thank you!

  • @saramashaal4591
    @saramashaal4591 8 місяців тому +1

    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?

  • @pollob460
    @pollob460 Рік тому +1

    Thanks for sharing your experience. Thanks man!

  • @RonitZinzuvadiya
    @RonitZinzuvadiya 4 місяці тому

    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?

  • @Wawazi
    @Wawazi Рік тому +2

    Well that was amazing

  • @humantruecolors
    @humantruecolors Рік тому +1

    great tutorial, i'm subscribing now

  • @bobbybonillapayday
    @bobbybonillapayday Рік тому +1

    You can use promoted constructor properties in the PusherBroadcast class

    • @codeWithRoss
      @codeWithRoss  Рік тому

      Interesting! Thank you!
      stitcher.io/blog/constructor-promotion-in-php-8

  • @congucinh724
    @congucinh724 9 місяців тому +1

    Thanks! What font do you use for your editor?

    • @codeWithRoss
      @codeWithRoss  9 місяців тому

      I'm using the default font from PhpStorm.
      www.jetbrains.com/phpstorm/

  • @Tuto1902
    @Tuto1902 Рік тому +3

    Great content. Keep it going 👍🏻

  • @SiddharthDivetiya
    @SiddharthDivetiya 5 місяців тому

    Awesome, Could you please share anything for one to one chat with online and typing indicators?

  • @oxoss9401
    @oxoss9401 Рік тому

    thank you man it helped me a lot !

  • @patitorodri
    @patitorodri 9 місяців тому

    awesome tutorial

  • @stefanstanescu7816
    @stefanstanescu7816 8 місяців тому

    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?

  • @alnahian2003
    @alnahian2003 Рік тому +1

    This is insane!

  • @soyelghosh662
    @soyelghosh662 16 днів тому

    Thanks

  • @jaycamanianbayron6523
    @jaycamanianbayron6523 10 місяців тому

    thank you sir.

  • @shubhod9569
    @shubhod9569 Рік тому +1

    I'm doing everything as you did but I'm getting "Cannot use positional argument after named argument" error, what does this mean?

    • @codeWithRoss
      @codeWithRoss  Рік тому

      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

  • @BewwyOranda
    @BewwyOranda Рік тому

    Nice tutorial + 1 sub!

  • @ivannicolas2573
    @ivannicolas2573 Рік тому +1

    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?

    • @ivannicolas2573
      @ivannicolas2573 Рік тому +1

      everytime I click the submit button, the internal error kept showing

    • @codeWithRoss
      @codeWithRoss  Рік тому

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

  • @dinzaim1255
    @dinzaim1255 Рік тому +1

    May i ask, how do you run tow locals at the same time??

    • @codeWithRoss
      @codeWithRoss  Рік тому

      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.

  • @agrasenmaharaj2718
    @agrasenmaharaj2718 Рік тому +2

    Hello, can you make a video like this using the authentication of pushers for private and group chats?

    • @codeWithRoss
      @codeWithRoss  Рік тому

      Hey!
      Here is some documentation on Pushers Website regarding private channels - pusher.com/docs/channels/using_channels/private-channels/

  • @hamzabashir2598
    @hamzabashir2598 Рік тому +1

    where chat is it being saved?can i see old chats?

    • @codeWithRoss
      @codeWithRoss  Рік тому +1

      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.

  • @minhloi735
    @minhloi735 5 місяців тому

    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

  • @VishalKashyap-w2u
    @VishalKashyap-w2u 11 місяців тому

    hello sir, i have two different models ,i want to create chat between them, i am not using "users" table

  • @iceballchannel8808
    @iceballchannel8808 8 місяців тому +1

    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 😂

    • @codeWithRoss
      @codeWithRoss  8 місяців тому

      Did you populate the .env variables?

    • @iceballchannel8808
      @iceballchannel8808 8 місяців тому

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

    • @iceballchannel8808
      @iceballchannel8808 8 місяців тому

      pusher.connection.socket_id ->where can i get socket_id, i dont have it

  • @SufeeWizard
    @SufeeWizard Рік тому

    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 ?

  • @faheemahmad3957
    @faheemahmad3957 6 місяців тому

    can you so this using Flutter laravel pusher and using GetX if needed.

  • @AndresRamirez-cz5pd
    @AndresRamirez-cz5pd 8 місяців тому

    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

  • @nguyenvanquangfplhn2009
    @nguyenvanquangfplhn2009 Рік тому

    Can it be deployed as a user to message the admin?

  • @christiancolewan
    @christiancolewan 9 місяців тому

    CAn you create a version of this tutorial for Laravel 10 and VUE Js SPA

  • @Icodestuff
    @Icodestuff Рік тому

    well done!

  • @tim.bogdanov
    @tim.bogdanov 7 місяців тому

    how do you bind this to an actual user in your database?

  • @samuelnjau8086
    @samuelnjau8086 4 місяці тому

    Amazing

  • @imhamz23
    @imhamz23 7 місяців тому

    Bagaimana cara menghubungkan dengan database?

  • @ALQAWSI
    @ALQAWSI Рік тому

    the first look when i saw the message text box shifted down when sent a message i knew this is a great tutorial😂😂😂

  • @bogdancostin7388
    @bogdancostin7388 Рік тому +1

    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.

    • @codeWithRoss
      @codeWithRoss  Рік тому +3

      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/

    • @rahulchaurasia6347
      @rahulchaurasia6347 Рік тому

      Please explain,

    • @codeWithRoss
      @codeWithRoss  Рік тому

      @@rahulchaurasia6347
      If you need further help.. You can always contact me! www.codewithross.com/contact

  • @Eurynomosek
    @Eurynomosek Рік тому

    good content 👍

  • @suhailsaeedusmani
    @suhailsaeedusmani 8 місяців тому

    Can anyone tell me the extension name which tells the name like url and action in the routes ? ❤

  • @EmailPuna
    @EmailPuna Рік тому +1

    how do you make a private channel to show the notification to only a specific user

    • @codeWithRoss
      @codeWithRoss  Рік тому +1

      Hey!
      Here is some documentation on Pushers Website regarding private channels - pusher.com/docs/channels/using_channels/private-channels/

    • @EmailPuna
      @EmailPuna Рік тому +1

      @@codeWithRoss thank you it worked

    • @codeWithRoss
      @codeWithRoss  Рік тому

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

  • @mohamedelkhalil1288
    @mohamedelkhalil1288 Рік тому +1

    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?

    • @codeWithRoss
      @codeWithRoss  Рік тому

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

  • @junwei1414
    @junwei1414 Рік тому

    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

    • @codeWithRoss
      @codeWithRoss  Рік тому

      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

  • @forahtv8901
    @forahtv8901 Рік тому +1

    I do everything u did but mine still not working. 😢

    • @codeWithRoss
      @codeWithRoss  Рік тому

      Hey!
      You can see my code here - github.com/rossedlin/chat-laravel-pusher/tree/youtube
      Hopefully this can help you. :)

  • @MdMasudulKabir
    @MdMasudulKabir 11 місяців тому

    Thanks

  • @salmanmanzoor1377
    @salmanmanzoor1377 Рік тому +1

    i have a problem message send but not recieving

    • @codeWithRoss
      @codeWithRoss  Рік тому

      It's possible your listeners aren't picking it up. Are you sure it's definitely sending?

  • @oketafred
    @oketafred Рік тому +1

    Nice content

  • @AzeemKhan-dm3fu
    @AzeemKhan-dm3fu Рік тому

    Its working...
    but can we save the message histroy and chat with other users.

    • @codeWithRoss
      @codeWithRoss  Рік тому

      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. 😉

  • @ivikiiii3169
    @ivikiiii3169 9 місяців тому

    Nice

  • @devsubha
    @devsubha 10 місяців тому

    Hello sir I want to create a livestreaming software with live chat how to do that please tell me

  • @SyedMohtashim-j9q
    @SyedMohtashim-j9q 10 місяців тому

    i download yor source code .. with my pusher keys but the message is not sending..

    • @codeWithRoss
      @codeWithRoss  10 місяців тому

      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

  • @yandinov
    @yandinov Рік тому +1

    nice

  • @programming4fun110
    @programming4fun110 Рік тому +1

    Hey, Great work! but I'm not able to receive messages, I can only send the messages, can you please guide ?

    • @codeWithRoss
      @codeWithRoss  Рік тому +1

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

  • @thehonestabe
    @thehonestabe Рік тому +1

    Why JQuery? I don’t think you need jQuery for pusher

    • @codeWithRoss
      @codeWithRoss  Рік тому +1

      Interesting! I just did some more reading and you might be right! I'll have to experiment for future videos!

  • @h-ash1757
    @h-ash1757 Рік тому +1

    I dont know why. My messages is sending after 2 seconds

    • @codeWithRoss
      @codeWithRoss  Рік тому

      Hey,
      It might be you have a slower connection?

    • @h-ash1757
      @h-ash1757 Рік тому +1

      I just uploaded my code on server. now it is fast ;D

    • @codeWithRoss
      @codeWithRoss  Рік тому

      @@h-ash1757 Amazing!

  • @TrikNgonlen
    @TrikNgonlen Рік тому +3

    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?

    • @codeWithRoss
      @codeWithRoss  Рік тому +1

      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.

    • @TrikNgonlen
      @TrikNgonlen Рік тому +2

      @@codeWithRoss awesome...I can't wait for the tutorial...

    • @codeWithRoss
      @codeWithRoss  Рік тому

      @@TrikNgonlen Which POS system are you using?

    • @TrikNgonlen
      @TrikNgonlen Рік тому +1

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

  • @jeromecruz9595
    @jeromecruz9595 8 місяців тому +1

    its not working

    • @codeWithRoss
      @codeWithRoss  8 місяців тому

      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

  • @FatimaZehra-b1b
    @FatimaZehra-b1b 11 місяців тому

    anyone tried group chat???

  • @RuturajPatki
    @RuturajPatki 9 місяців тому

    Too fast for me to follow. 😢

    • @codeWithRoss
      @codeWithRoss  9 місяців тому +1

      Sorry to hear that.
      Have you tried playing the video the video at 0.5 playback speed?
      That might help. :)

  • @adindasc
    @adindasc 10 місяців тому

    can u make a private chat please