WebSockets (using Socket.io) Tutorial #5 - Broadcasting Messages

Paragon you're welcome to your fifth and final WebSocket tutorial and in this video we're going to talk about broadcasting messages okay so here is this picture again which you're probably getting sick of by now but I'm going to use it to demonstrate how we can broadcast messages and how that is completely different to what we've been doing so far when we've been sending messages out from the server so in the last tutorial we emitted a message from the client when we click the send button that message is sent some data to the server which in turn listened out for it then emitted a message back to every single clients including the original client which sent that message in the first place so that's what we did last time in this tutorial we needed broadcasting and the difference is if we were to emit a message from the client to the server the server listens to it if the server their broadcast a message then what it does is send the message down every WebSocket to every client except the original one the one that sent it the message in the first place so that's the difference between what we've been doing and broadcasting messages so if you remember back to the first tutorial when I showed you this chat in its full glory then if I added some kind of handle a let's say Luigi and if I started typing a message on the other chat windows what we'd see is Luigi is typing a message Luigi is typing a message but it wouldn't show on this one originally because we're broadcasting that message and it makes sense because if I'm typing a message in this window I don't need to see Luigi's typing a message only on every other single client does it need to show so that's broadcasting a message and that's what we're going to do in this tutorial so the first thing I want to do is head to the index dot HTML file and I want to add an area where this message is going to get output onto the screen so I'm going to give underneath output and this is going to have an ID equal to feedback instead okay so in this feed but Dave is where that little message Luigi is typing a message is going to go so the next thing we want to do is grab a hold of this thing okay in the chat yes so we can use it later when we're out putting that message so what I'm going to do is just come down here I'm going to delete that semicolon add a comma then I'm going to say feedback is equal to document dot get element by ID so this fourth option off it and then we want the ID feedback which is that D of which of just created okay so now we've got ahold of that we can output it later the next thing I want to do is attach an event listener to this thing right here this input field which is the message because the event that I want to listen for is when we're typing which is a key press event so we're going to listen for that key press event and when that event occurs then we're going to emit a message to the server which in turn can broadcast that message to the rest of the clients but not this one makes sense so we're going to listen for that key press event on this input field right here now that input field we already have a handle to it and if this message variable right here so what we can do is underneath this event listener add another one this time it's on the message field then we add event listener and the listener what we're listening for is a key press event okay then when that happens we can fire a callback function and inside this function we want to emit an event or a message to the server make sense so let us against a socket in mix just like we did up here before and the message we want to send this time is a typing message so it's into the server someone's tagging okay so we also want to send some data and the data we want to send this time is the name of the person typing or the handle because we're going to display that on the other chat windows luigi is type the message key type of the message etc so we can send the name by grabbing on to this handle right here and then sending the value of that input field okay so now we're sending this data up to the server so now we want to react to it in the server and we want to broadcast that message to the rest of the clients so let's go to the index file which is running on the server and inside this an action function right here what we're going to do is create another lift up so we're going to say socket dots on right so we're listening for a particular message and this time is the typing message which we just created in the front end and we're going to use a callback function which takes the data which in this case is the user name or the handle right okay so now what we want to do is not IO dot sake stream it but what we want to do is broadcast this message to every other single socket or clients right so how do we do that well we can say sockets so that refers to the individual socket the one that sent us the message right so we're saying socket dot broadcast right we're broadcasting a message and then emit so now we're emitting it all right so this is going to emit it to every other single client but not this original one makes sense so what we're going to with it we're going to emit the typing message and we're also going to send the data back right which is the user name or a handle so now we've emitted it or broadcasted it from the server on the front end in every other single client we want to handle that we want to listen out for that message and handle it so let's go into here where we say listen for events and we'll add it in so we'll say socket which is this one instance of the web socket in that particular client dot on and we're listening for the typing message okay and when we get that we're going to fire a callback function which is going to take the data the user handle bodies and then inside here we can do something we could output this user handle to the browser so remember before we created this thing right here this variable feedback which gave us a handle or hold of this div right here okay so we can say now down here feedback dots in a HTML and what we're going to do is set that equal to a message right so this could be a string and this is really a pit out then eeehm that's going to slant it for us oh by the way don't do this in capitals all right so in and then what we want to do is output the data which is the user name all the handles also plus data then tack on at the rest of the string which is going to be is typing a message dot alright then we'll close off the ear and we'll also close off the P tag so now what we're doing is outputting this HTML and we concatenate in this data which is the username all handle to that strings I hate mustering then we're setting it to the inner HTML of the feedback beer right so that's going to happen when we type in some data so let us now just quickly go to this thing over here in fact let's just minimize this completely and if i refresh in each one type in a name Luigi then type in a message now we can see in these other two we get that Luigi is typing your message woohoo we have successfully broadcasted a message okay now there's one more thing to want to do because if I complete this message and sick send then this thing right here still says Luigi is typing a message and really we want to sort that out okay so how do we sort that out well let's just look at this code now when we click send that's when we want that message to go Luigi type in a message because now we've typed the message and we've sent it so what we can do is when we're listening for this chats event that occurs after we've clicked send what we can do is then set the inner HTML of the feedback to equal an empty string or guys makes sense so that now is going to equal an empty string like so all right so if I save this now and if we view it in these browsers I'm just going to refresh over here and if we say Luigi is here and if we can spell it okay Luigi and then Muriel and then peach and in here I'll say hey Mario and then click send and we can see this Luigi is typing a message then Mario says hey Luigi and by the way you can see Mario is typing a message in both of these and dot dot however you've seen peach and then peach is the reply and say bars I'm right here okay cool so now we see peachy type in the message click send and voila so there we go guys we now have our fully functioning chat application using a WebSockets so like I said you can do many more things with WebSockets not just create chat rooms so I implore you to dive deeper so there we go WebSockets 101 I hope this has been of some use to you if you do enjoy the videos please like share and subscribe and I'm going to see you in the very next series

Channel: Net Ninja

Views: 120,129

Keywords: websockets, web sockets, websockets 2.0, websockets tutorial, web sockets tutorial, socket.io, socket.io tutorial, what are web sockets, web sockets introduction, web socket chat, web sockets chat, chat, chat room, chat tutorial, node web sockets, web sockets node.js, node.js websockets tutorial, node websockets, websockets broadcasting, broadcast vs emit, websockets broadcast, websockets broadcast tutorials, broadcasting vs emitting

Id: FvArk8-qgCk

Length: 9min 18sec (558 seconds)

Published: Mon Jun 05 2017