Hi everyone. So let's now work on handling the form submission. Which means when someone types in the chat message in the input box and then click on send, we need to handle that event. So we already have a reference to a form element up here. So let's listen out for the submit event and and attach an event listener to a form. And for that we will do form dot add event listener and we will listen out for a submit event and in response to the submit event we will execute a callback function. Okay now let's get the string value of the input element that is whatever someone types into the input box. So if we go to room dot html we will see that this is the input element with type is equal to text and the name is equal to message. So let's get a reference to that element with let message is equal to document dot get elements by class name. And the class out here is a message dash input. And let's just confirm, well it doesn't have the class here so I guess we can give it a class so we can say class is equal to message dash input. Um Same brad come back here and we're getting the first element. So at the index zero dot value we could have given given it an I. D. But let's just continue with class subtle. Now if someone clicks on the sand button without typing anything and what I mean is if we go here and let's make a chat room and join. So if someone clicks on sent without typing in anything we want to cancel the submit event. And we will do that with this. So if not a message right then um oops it's not the at sign it's uh what's happening here. Let me just do it again. So if not message and then we're just going to return. Right? So now moving on let's make an object called payload which will have a message room I. D. And current time keys and their values. And if you backtrack, remember I mentioned in this function we actually did as a placeholder for some object. So out here we will um just make a variable called payload which is an object and we have room I. D. Ah key. Then we have the message key. So mean content of the message. And then we have basically the kind of kind of kind that the message is sent. Okay. And after that so this is the payload. We will be transmitting to the client and to the insert message function. So we are now going to be sending this off to the server. Right. And the way we do this is so we're emitting the payload with a message event so we'll say socket got a minute and the event is called message. We'll just call it message and we are sending along the payload. Okay now let's also call the insert message function whose job is to display the messages on the web page. And out here we don't really need to send the room I. D. Because that's not what the user is concerned with. They're just concerned with getting basically the text message. So we'll say insert message of function and then pass along um these values so payload dot uh message and also sending along the time. So payload dot time. Right now once someone sends a message we will clear the input field with once again we can just do document dot get Elements by class name. And it's a message that input at the Index zero which means the first element and we'll just set its value. And one thing I noticed out here it's not node value it's actually just value. Let me correct that because that would have been a silly mistake. And out here the value is equal to an empty string. So basically we're just resetting the input text field once the message has been a cent. Okay now if I control s here and make sure that my server is running you will see that basically we can't really send a message as yet either. Right that's because we have to receive the emitted message event from the client and send it to all users in the chat room. So let's work on that now and now what we're going to do is we're going to receive this uh limited message event from the client. And in response we'll send it to all the connected users in the chat room and we'll use the on event handler which basically says on message event uh execute a callback function which takes the payload as an argument. So let's work on this. And for this, we work here inside of index dot Js and we're still working on within the io dot on connection event handler. So out here, well say, well, socket dot on. So on the message event, we want to execute a callback function and remember that this call back function is going to take here as um an argument. The payload, which is going to be the room I. D. It'll be the message and the time. Okay, now next we'll use the socket 0.2 event handler which takes the room I. D. As an argument. So room I. D. And basically what it's going to do is it will emit the received message and kind that the message was sent by a a message all event. So out here we're going to say well, message all and um and out here it's going to send a message and time. Okay? So now that we have received an emitted event from a chat room user, let's say user. A and we've also sent it across to all the other users in the chat room with this outer socket dot to remember that we also have to re receive it on the other end. So let's head back two socket.gs. Ah And out here we have to now receive this and we'll say well socket dot on message all event. And out here. I am going to execute a callback function which it takes some message data as an argument. And in turn um will call the insert message of function which is going to take a message data as an argument. Okay so once we receive the message all event, a callback function is executed which receives message data which refers to the message and time values. And then um calls the insert message function which in turn takes message data, you know as an argument. So let's go ahead and try this out and now if you'll see that everything is working fine here in my server. So let's go ahead and basically I'll just make a new track room join and then also joined from another browser tab. So I have to browser tabs open here so let's say hi and out here we see something a funky is going on. So basically when I type in high it is just disappearing but it's on the other client. So let's debug that let me type in by and out here. I will see by. Okay so something is happening here and it lets me know that it is, it probably has to do um with my form event handler. That's what I think. Okay so get um message input. So get elements. Uh So let me actually console dot log message here, so the value of the message variable, let's see what's going on here and control shift I and let's say hello, okay, so it is refreshing when that is happening. Um name is equal to the class is equal to message input. Oh I have two classes. I already had a class here that should not be happening. Oops, let's see what's going on here. Hi, if not a message, let's see maybe it is a syntax error somewhere. Message uh form, add event listener prevent. Oh, so we have to prevent the default loading reloading of this web page and the way we do that is uh event dot current default. So that's what that is what was happening. It was basically just reloading upon form submission. So we want to prevent the stage from reloading. And that comes down here on line 28 under on the first line of the event add event listener method. So now if we go back and let's try this out, let me close this. And I think it should work now. So hello? So we have hello and we have hello and then the next person, the other person says hi and hi. So I'm just switching how are you? I'm just switching between browser cats, but you can see that basically we have the text content of the message and we also have the time stamp. I'm good and now if I go back here and someone else joins the chat room at the same link, they won't see the previous messages. But if I send something now it will be omitted across to all the clients. So hey all hey all and basically that type in some number. Um, there you go. So that's all for this part. We've worked on basically receiving the emitted message event from the client and then we've sent it across to all the users in the chat room. And in the next cast we'll be working on adding a video feature to our chat.