Laravel-Livewire Chat-Message app (Realtime) from scratch

Name: Laravel-Livewire Chat-Message app (Realtime) from scratch
Rating: 4.0 (30 reviews)

Build a realtime chat-message application for your Laravel website( beginner to Advanced) with step by step

Created byNamu Makwembo

Last updated 5/2026

English

English [Auto],

What you'll learn

Create a realtime app chat with Laravel- Livewire
Deliver our messages to other users in realtime without the need for them to refresh their own page using Laravel Broadcasting
Send feedback when a message is has been read
Show unread messages Count
display ticks for our messages
Transmit private messages and events in realtime

Course content

6 sections • 36 lectures • 4h 2m total length

Create a new Laravel application2:17
install Breeze auth system1:27
install sqlite DB browser2:42
Install and set up the sqlite db browser, create a new database, and configure it in the project to prepare for migrations, models, and table creation.
Creating models & migrate4:48
Create messages and conversations models and migrations in a Laravel app, link sender and receiver to users via foreign keys, and include body, type, and timestamps, then migrate and verify.
Create relationships3:15
Define model relationships for a realtime chat app: a user has many messages, a conversation has many messages, and each message belongs to a user and a conversation.

install Livewire and make components4:42
Install Livewire and create six Livewire components for a real-time chat app, wire routes and views, and troubleshoot the undefined variable error.
setup a structure for Livewire blade2:37
Structure livewire blade components for a real-time chat app by separating chat list, chat box, and send message to prevent interference, with three components nested in the main.

Design Chat container7:28
I will walk you though all the steps of designing our chat component so it can look pretty on all devices
Download the complete SASS resource below
Design Chatlist part 18:55
Design Chatlist part 211:45
Design Chatbox Header7:56
Design the chatbox header by composing an image container, the user name, and an info section, and enhance it with icons and a responsive flex layout using bootstrap classes.
Design Chatbox Message body12:12
Design Send Message Component8:33
import Add Breakpoints to SASS10:16

Show Users5:21
Create New Conversation9:56
Create a new conversation between the logged-in user and a receiver by building the conversation model, validate IDs, and add the first message; test the flow in the browser.
Show all conversations11:46
Select a conversation3:29
Load messages12:26
learn to load messages in a Laravel Livewire chat app by selecting a user, emitting events to the chat box, and implementing responsive behavior for mobile displays.
Lets update our Avatars3:47
Send & save message to database9:09
Push message & scroll chat to Bottom6:20
Load more messages13:51
Learn to load more messages in a Livewire chat app by paginating ten items, auto-scrolling bottom on new messages, and preserving scroll position when new messages arrive.
Final lets Chat between two users2:56
Build a real-time two-user chat in a Laravel Livewire app from scratch, test messaging across two browsers, and implement broadcasting and events to sync messages.

Introduction to Broadcasting , events , Laravel Echo and Pusher6:26
Learn how broadcasting uses web sockets to push real-time updates via events and channels. See how Laravel Echo and Pusher deliver notifications to logged-in devices, with Livewire listening.
Set up Pusher4:53
install laravel Echo2:28
Create MessageSent Event and broadcasting our message12:37
Broadcasts a new chat message using a MessageSent event, configuring private channels and listeners to deliver messages in real time to the recipient.
Receive broadcasted message through Laravel Echo4:55
Push our broadcasted message7:44
Push broadcasted messages in a real-time laravel-livewire chat app to the correct user, update read status, and avoid polling for instant delivery.
Reset our chat component when we exit chat5:32
Show blue ticks3:39
Implement blue and single tick indicators for chat messages in a Laravel Livewire app, showing read status based on message owner, and dispatching read event when a chat is opened.
Mark message as read13:28
Unread Count5:33
Build a dynamic unread count for a Laravel Livewire chat app by refreshing the database, recreating users, and implementing real-time unread message badges that reflect the correct receiver id.

Requirements

Student should have knowledge in PHP , Laravel , Livewire , CSS , HTML, JQuery, Javascript
it would help if student also had knowledge in sass

Description

Create a realtime 'one to one' responsive chat application that you can add to your Laravel-Livewire website , unlike other chat applications which use 'polling' , in this course we are going to use realtime broadcasting with Laravel so we deliver our messages in realtime to other users without the need for them to refresh their own page .

You will also learn how to send feedback/notification when a user receives a message. All this in real time :)

In this course you will learn how to :

Setup the Database structure of our Chat system
Create/start a new conversation with any user
Implement 'read & unread' messages count
Add ticks on our messages
Use the CSS super power SASS to design our chat component :)
Make our chat responsive on all devices ; Mobile ,Tablet ,desktop
Share data between Livewire components
Reduce server requests by updating only a few parts of our Chat Component using Livewire features

Who Should Take This Course?

both beginners and experienced Laravel web developers will benefit from this step by step set of tutorials. We will also be using some basic , JavaScript, and jQuery.
Students taking this course are required to have some basic knowledge in Laravel Livewire as it will be the core concept of our realtime front end architecture

Who this course is for:

This course is for those who already have basic knowledge in Laravel and Livewire, you can increase your knowledge and move a step further in your programming career by learning how to use realtime features in your web applications

Laravel-Livewire Chat-Message app (Realtime) from scratch

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 14min

Install livewire2 lectures • 7min

CSS /javascript downloads2 lectures • 8min

Design our chat Component7 lectures • 1hr 7min

Lets make Chat dynamic10 lectures • 1hr 19min

Broadcasting messages, notifications ,unread messages & realtime Feedback10 lectures • 1hr 7min

Requirements

Description

Who this course is for: