Playing
01. Introduction

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.
14 episodes1 hr 23 mins

Course overview

Join a room and start chatting! This course covers building a multi-room text chat app with Livewire using Laravel Reverb for real-time updates.

Using presence channels and client-to-client whispering, we’ll also show who’s online, and who’s currently typing.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.