The code of the completed demo is available on : https://github.com/jaouadballat/chatapp
first we need an authentication system, that we can simply created by running an artisan command in our terminal:
Before we register our first user we need to set up our database
Then run migration in our terminal :
Message Model and Migration:
Create message model, migration and conroller in just one line of code by running :
Add a new rows in our message table:
and set ‘message ’and ‘user_id’ as protected fillable in Message Model, then run migration:
User can send many messages, so the relationship is ‘one to many’
Next we need the inverse relationship:
The homepage will display all messages and an simple input field to send a new message for that we define our app routes as:
Because we need just authenticated user can see and send messages we must add ‘auth’ middleware in ‘MesageController’:
Notice that fetch function will simply return all messages with there users stored in database, and the sentMessage function will store all caming messages.
Create a new file as ‘chat.blade.php’ :
As we can see we have set some custome tags: the
message component will display our chat messages and the
sent-message will provide an input field and a button to send the messages.
Next, we need to register our component in the root Vue instance. Open the
resources/assets/js/app.js and update with code below:
Once the Vue instance is ready, using Axios, we make a GET request to the ‘messages’ route and fetch all the messages then pass it to the messages array that will be displayed on the Chat view. The ‘addMessage’ receives the message that was emitted from the ‘Sent’ component, pushes it to the messages array and makes a POST request to the ‘messages’ route with the message.
To add the realtime interactions to our chat app, we need to broadcast some kind of events . In our case, we’ll fire a MessageSentEvent when a user sends a message. First, we need to create an event, we’ll call it MessageSentEvent:
After that we must implement the ShouldBroadcast interface in our event. It ‘s should looks like:
Since our chat app is an authenticated-only app, we create a private channel called ‘chat’, which only authenticated users will be able to connect to.
So, we need a way to authorize that the currently authenticated user can actually listen on the channel. This can be done by in the ‘routes/channels.php’ file:
Setting up Pusher:
We need to tell Laravel that we are using the Pusher driver in the ’.env’ file:
config/app.php' and uncomment
App\Providers\BroadcastServiceProvider in the
we still need to install the Pusher PHP SDK. We can do this using composer:
composer require pusher/pusher-php-server
Create a free Pusher account at https://pusher.com then login to your dashboard and create an app.
If you open the
config/broadcasting.php, you’ll notice that Laravel is pulling some of Pusher credential from the
So let’s update the
.env file to contain our Pusher app credentials:
Also, remember to fill in the ‘cluster’ of your Pusher app and other additional options.
then you need to install all dependencies:
npm install --save laravel-echo pusher-js
Then we need to tell Laravel Echo to use Pusher. At the bottom of the
resources/assets/js/bootstrap.js file, Simply uncomment the Laravel Echo section and update the details with:
Listening For Event:
Once the MessageSentEvent event is broadcast, we need to listen for this event so we can update the chat messages with the newly sent message. We can do so by adding the code in
Our chat app is done, now wa can send and receive messages in realtime.