Build a Multi-room Realtime Chat with Livewire and Reverb
Playing
01. Introduction

Episodes

0%
Your progress
  • Total: 1h 23m
  • Played: 0m
  • Remaining: 1h 23m
Join or sign in to track your progress

Transcript

00:00
Let's use Laravel Reverb to build out multi-room real-time chat functionality with LiveWire.
00:05
Now, Laravel Reverb is a WebSocket server for Laravel that allows us to just get this installed, boot up a server, do a couple of configuration, and then broadcast messages from our Laravel applications and pick these up on the client side with Laravel Echo, which we'll also be looking at. You can use this in pure JavaScript, or you can really nicely hook this into LiveWire,
00:27
which is obviously what we're going to be doing in this course. OK, let's take a look at how this works so we know what we're going to build, and then we'll go through step by step of how to build this up. So I'm currently in this water cooler room. We can create as many rooms as we want.
00:39
We just create a record in the database, and any of your users can just head straight over to them. You can see that currently I am online within this users list, and there are no messages here just yet. If we go over to another account here and we go over to the same room, notice that this list of users updates in real time. If Mabel were to leave this room, she would be removed from the
01:00
list. OK, so let's go ahead and just start to send a message. I'll do this over here just so we can see this working, and the first thing that you'll notice when I start typing on one of these users accounts, we get a little icon here to show that the user's typing. You can customize that. You can customize the duration that this hangs around from, but we will be adding in showing who is
01:22
typing within this room. OK, let's go ahead and send that message out and hit enter, and as you can see in all of the clients or the users that are connected to this particular room, this will go ahead and show the message. Pretty straightforward stuff. We know what a chat room looks like, but this is what we're building. OK, so obviously we can do the same over here as well, and just
01:44
type something out, and that will be reflected over in here as well. So this might look pretty simple, but there are a few things that we need to take into consideration when we're building out a chat room. The first thing is the text area. We need to be able to hit enter on this when the user has typed something and not go down to the next line. That's a really important part of chat. We
02:05
want this to work as nicely as possible, so we're going to be using AlpineJS as well to control how this chat works. For example, we can do multi-line messages if we hit the shift key, and then we can hit enter to send this as well. And of course there are a couple of other things that we need to cover, like pushing messages to this stack in the most efficient way possible, so we're not running
02:26
too many queries or not rendering too much within Livewire. And obviously we're covering whispering, which means that we can send client to client messages only without hitting the back end to show stuff like this typing indicator. OK, now we've had a look at what this looks like. Let's get started and set up Laravel Reverb in the next episode.

Episode summary

In this episode, we're kicking things off by introducing what we'll be building throughout the course: a real-time, multi-room chat application using Laravel Reverb and Livewire.

We start by checking out the main features of the finished chat app. You’ll see how easy it is to create different chat rooms, and users can move between them freely. The users list updates live as people join or leave a room, so everyone always knows who's hanging out. We also look at the cool typing indicator that pops up when someone is typing, and you'll learn how customizable it is.

Messages show up instantly across all connected users in a room, so everyone stays in sync. While it looks pretty straightforward, there are important details—like properly handling the chat input so hitting Enter sends a message (and not just a new line), or how to support multi-line messages with Shift+Enter. We'll use AlpineJS for those little touches that make typing feel great.

Under the hood, you'll find out how we can efficiently update the chat without overloading Livewire or making too many database queries. Plus, we cover "whispering"—direct client-to-client messages for features like showing when someone is typing, without constantly pinging the backend.

So if you’re curious how all this fits together, stick around! In the next episode, we’ll jump right into setting up Laravel Reverb and start building.

Episode discussion

No comments, yet. Be the first!