Build a Realtime Chat App

Speaker 0: Hi. Brian here for Directus. In this video tutorial, we are going to build a multi user chat application together in under 10 minutes. So stay tuned. So before we touch any code in this project, you need to have a Directus instance running, whether that's on Directus Cloud or using the self hosted version of Directus.

So the next thing we're gonna do is create a new collection. We're just gonna call this messages. For the primary key field, I'm gonna choose the type of generated UUID, and we'll add 2 of the system fields, date created and user created. Now we're going to add one more field to this, a text field for the text of the message. Surprise, surprise.

So we'll save that. And with that, our data model for this app is done. Next, we're gonna move into our roles and permissions. We're gonna create a new role for our users of the chat application. And in this case, I'm gonna disable app access because it's not really needed.

Now once we've created our role, the first thing we're gonna do is add create and read permissions to the messages collection, so that our users will be able to send messages and receive messages. Pretty simple. The last thing that we're gonna do inside this role is create read access for Directus users collection. So this is a system collection sitting underneath the drop down, and then we will move on to adding a couple of users. So let's just quickly add a couple of users here, Kevin the Great and Matt the Awesome.

And with that, we should be ready to dive into some actual code. Let's switch over to our editor. Alright. So as you could probably already see, I've just got some boilerplate set up for us. I've got a form for the login.

We just take an email address, a password, and a submit button. Then we have an ordered list for our actual messages. And below that we have a new message submission form, so just the text. And then in our script tag, we have a URL to connect to our WebSocket and just a connection variable that we are initializing. So let's talk about the steps that we're gonna go through here.

The first things first, we're gonna establish the connection. Next, we'll authenticate. We'll subscribe to our messages, and then we wanna add new message functionality, and then display those messages as well as historical messages. So that's the plan. Let's dive into action.

Alright. So let's start with steps 12, establish a connection and authenticate. So we only want to authenticate and connect whenever we actually log in. So we're gonna add this event listener here on the submit button of the login form, and we're gonna prevent the default action so that we don't get a redirect or reload on submit, and then we are going to actually work with our form. So we're gonna get the email and password from our form elements, And then the next thing, we'll actually open that WebSocket connection.

So now we've got everything we need to authenticate. Let's add an event listener whenever that connection is opened to actually send that authentication request. Alright. So let's recap where we're at. We're preventing the default action on the form.

We're getting the email and password. We're connecting to the Directus real time via WebSocket, and then we are sending authentication request whenever that connection is opened. So as far as our list, 1 and 2 here, if I can actually stop messing with the mouse, 1 and 2 are done. Great. Let's move on to the next thing.

Alright. So our next step is just actually getting the messages functionality into our app. So we're gonna subscribe to those messages. But how do we do that? So the first thing that we're gonna do is add an event listener for those messages.

So whenever we receive that message from the, WebSocket connection, we are going to run a function called receive message. Next, let's go in and add that function. The function, we'll just call it receive message. It is going to receive the message. Love the jokes here, but for now let's just console.

Log this and we'll test this out in the browser. We'll just save this as real time chat and fire this up inside the browser. I still struggle with Arc a little bit, so bear with me. And I can immediately see that I've got a little gotcha here because we're requiring email and password to log in, but I forgot to create emails for Matt and Kevin. So let me do that really quick, and then we'll test this out.

Alright. So let's log in, and I'm also gonna open up our console just so we can see those messages as they are logged. So we'll do kevin@example, real secure password here of password. And once I submit, we can see the message being logged here. It is the type auth, the status is okay.

So that means we've got some connections actually working here. So let's move on and subscribe to that messages collection. Alright. Because the data that's being sent back and forth is JSON, inside our receive message function, I'm gonna go in and actually parse that JSON message that we're receiving. My next step is gonna be subscribing to the messages collection, but we only wanna do that if we're actually authenticated.

The big question is, how do we do that? Well, let's look at it and let's break it down. So if the message type that we receive is off and the status is okay, then we are going to send a subscription request which has the type of subscribe, a collection of messages, and then we have a query for the different fields and sort order that we want. Let's add one more condition to catch whenever that subscription is initialized, and we'll just log this output to the console, subscription started. So I'll log in as Kevin one more time.

We'll click submit, and we should see subscription started in the console. And boom, right there it is, subscription started, plain as day. So step number 3, subscribe to messages. Done. Piece of cake.

Let's move on. So we're going to add an event listener to our new message form. Whenever that form is submitted, we are going to prevent the default action. We're gonna get the text from that form, and then we are going to create that message by using the connection dot send function, and we will make sure that we use type of items, collection messages, and action create. Our data is simply gonna be the text that we're passing.

So as I log in, we can see the subscription has started. Let's hit test message and click submit. And the big finale here, nothing. Right? But if I go inside Directus, I can see that that message is being created.

It's just up to us to update the front end whenever that message is actually submitted to Directus. So back inside our code, step number 4 is done. We've added new messages. Next, we are going to display those messages. So let's add a new function, addMessageToList, That just creates a new list item and appends it to our ordered list that we have inside our HTML.

Tools like React and Vue make this a little easier to update on the front end, but, hey, vanilla JavaScript is also great. Alright. So now inside our receive message function, let's add a new condition if the type is subscription and the event is create. We're going to add that message to our list. That way, it actually shows up on the front end.

And then inside our previous condition, we want to display historical messages whenever that subscription is initialized. So instead of just simply console logging subscription started, we are actually going to do a quick little for loop of all the previous messages and add those to the list as well. So that's all we need. We are going to save, log in, and let's have a chat conversation. So, if I go into the network tab, I can see this WebSocket connection and I'll just send a simple message.

Boom. I can see our messages updated there in real time. Let's add another one. Great. These are all being logged.

I could see all the messages being sent via WebSockets, but this is a multi user chat application. So let's spin up 2 copies of this that are different users. So I'll log in as Matt and let's have a quick little back and forth with Kevin. So I could see those historical messages. Now I'm going to fire one back at Kevin.

Hey, Kevin. How are you? And now I could see that those messages are being updated in both browsers, different clients, different users logged in totally real time. And we have reached the end of this tutorial on creating a multi user chat application with Directus Real Time. I hope this serves as, inspiration for you, a helpful tutorial on how to use WebSockets in Directus Real Time and share what you're building with our team.

Hop inside our Discord community. We can't wait to see what you build with this. And don't forget to subscribe to our YouTube channel for more goodness on Directus Real Time and other great features coming your way. Thanks for watching.