Chatty Chat: Part 9 - Establishing a Socket Connection Between the Client & Server

API JavaScript
Transcript

English (Auto-generated)

now remember that socket communication is bidirectional. So let's verify the connection at the client and silver side. And we're going to be working inside of this socket dot Js file, which has already been made and it's reference has been provided in the room dot html. File out here. So let's go ahead and work inside this file. And what we'll do is we will declare a variable called leg room I. D. Is equal to window dot location um dot fax name. So socket dot io allows you to name space your your sockets. This means assigning different endpoints or paths for connections. Then declare a variable called led socket is equal to io dot connect and this is the path. Okay. So we've declared variable socket whose value is io connect and then the default path. So a new socket instance is returned from the name space which is specified by the path name in the U r l defaulting to this forward slash. So for us it's going to be http and then local host colon, 3000 forward slash. Whatever is the room I. D. And upon a successful connection we want to log a message and the socket object has methods and properties that you can access and use. So we're going to use one of these now. So socket dot on. Right. So sock this method, socket dot on It takes an event name and callback function as parameters. So the event is a connect and then we also have a callback function passed as the second argument to the socket dot on method. So here we're saying that upon a socket connection executes a callback function which just logs to the console a message for now. So client side connection made right now let's go ahead and control s to save and we're going to a room and check the console. So what I'm going to do out here is go to my browser and make a room and then I'll see join. And then let's check this out in the console. So out here you can see that the client aside connection has been made. Now we're we will have to work on making a socket a silver connection, which is going to happen in the index dot Js file where we have our silver code. Right? So we're going to use the on event handler which handles connections, um disconnection events and so on. Using the socket object. So out here I'm going to say I o which basically references refers to this variable. Right. So I Oh, on so on a connection. Right, we're going to execute a callback function which takes a socket as an argument. And out here I'm just going to consul a dot log new connection made. Right. And when this particular socket disconnect we can also um, you know, console dot log another message. So socket dot on the disconnect event. And out here I'm going to console dot log another message. And this message is just going to say console dot blog disconnected. So control s to save. And what I'm going to do here is basically close this chat room. Right. And now let's try this out again. And this time we want to be keeping a lookout in the console and you can already see we saw this disconnected message when I closed that chat window. So create and out here, let's keep a lookout. So create and that's the room I. D. Right. And let's join. So when we join, we have a new connection made console dot log message, which is great. And then we also have this client aside uh console dot log message. And then I'm going to close the room and when I close the room I should see um disconnected out here in the terminal. So I'm going to disconnect by simply closing the browser window and in the terminal you'll see the disconnected message right now. If you notice when we made, when we join in your room, we can't really chat, nothing is happening here. So we're now going to be working on socket dot io events which allow two or more users which are in the same room to chat with each other. So let's go ahead and work on that next
155 Views 0 Likes 0 Comments

let's establish a connection so that the client and server can communicate with each other via a socket connection.

Comment
Leave a comment (supports markdown format)