Realtime Chat with Laravel-Livewire: Tall App from Scratch

  Command

  php artisan livewire:make chat.index

• Create layout for chat Index

• Add route in web

• Copy boiler  template from resources

  Command

  php artisan livewire:make chat.chat-list

• create layout for chatbox - with responsive feature

• Include chat-list component in chat Index

• Or Copy boiler  template from resources

  Command

  php artisan livewire:make chat.chat

• Add route in web

• Create layout for chatbox - with responsive feature

• Copy boiler  template from resources

  Command

  php artisan livewire:make chat.chat-box

• Include chat-box component in chat

• Design Conversation Header, Main and Footer

• OR Copy boiler  template from resources

        <header   class="w-full  sticky inset-x-0 flex pb-[5px] pt-[5px] top-0 z-10 bg-white dark:bg-gray-800  border-b dark:border-gray-600">

            <div class="  flex  w-full items-center   px-2   lg:px-4 gap-2 md:gap-5 ">

                {{-- Return --}}

                <a href="#" class=" shrink-0 lg:hidden  dark:text-white" id="chatReturn">

                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"

                        stroke="currentColor" class="w-6 h-6">

                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />

                    </svg>

                </a>

                {{--Avatar --}}

                <div class=" shrink-0 ">

                        <x-avatar  class="h-9 w-9 lg:w-11 lg:h-11 " />

                </div>

                <h6 class="font-bold truncate"> {{fake()->name()}} </h6>

            </div>

        </header>

  Command

  php artisan make:model Conversation -m

• Add the fields in the table

  Command

  php artisan make:model Message -m

• Uncomment the user factory in DatabaseSeeder and run php artisan migrate:fresh --seed

• Add users route

• Create component and  simple design to show users

• For image use: https://source.unsplash.com/500x500/?face

• Create message method and redirect

Add wire:click to message button

Create message() Method in Users

inside method check if auth already has conversation with user

if exist then redirect to chat with query parameter

else create new conversation and then redirect

add auth middleware to route

Text by clicking

• load selectedConversation find::() in main chat

• Pass selectedConversation  to Chatlist and Chatbox, also pass $query to chatlist component

• Add public property selectedConversation in Chatlist and chatbox

• Load conversations and pass to Chatlist view

• Create the getReceiver() method in Conversation Model

• Make Chatlist dynamic (names , created_at etc)

• reduce size of avatar

• make name darker

• Add unsplash images in avatar

• Add link to redirect to clicked chat in chatlist

• Mark selectedConversation in Chatlist change css background

• Add conversation-{id} attribute in  chatlist item <li>

• Scroll to selected chat , first pass query from MainChat to Chatlist component  & add function in init

  
  

  
  

• Fix Chat index by making selectedConversations nullable

• Add link to redirect to clicked chat in chatlist

• Make chatbox dynamic

  
  

• Validate message in <form>

• Create sendMessage Method()

• Save message ()

• reset $body

• dd($createdMessage);

• Create $LoadedMessages Variable

• Create LoadMessages() method

• Add LoadMessages() in mount()

• Create loop in blade

• show message

Scroll to bottom when message is sent

Scroll to bottom when chat is loaded

• Login to other browser to show how it avatar before hiding

• Add previous message outside foreach

• Inside foreach keep track of previous message owner

• Hide avatar based on ownership of previous message

So that we can sort the conversations by the one with the latest message

Emit ('refresh') event to chatlist when new message is sent

Mark message as read in Chatbox after messages are loaded in the mount()