WebSockets with NodeJS (Express) and WebSocket API

hello everyone welcome to I'll show you how to create a WebSocket server and a WebSocket client for the server we'll be using a JavaScript nodejs Express and the HTTP module for node and to the HTTP module we'll be passing the Express app as the request listener for the front end we will be using the web socket API that is built into every browser so starting off we'll start off with the back end with the server obviously we'll be using the ws module which is a module for creating WebSocket servers for no jests it's fast it's it's lightweight and it's quite popular as you can see so let's install it this is the base code it's a simple Express hello world application and yeah so you can read the docs here you can learn a lot about WebSockets and how they work with node and everything I'll just show you how to set it a how to add the WebSocket server to our Express service so they listen on the same port and it's easy to connect it right so we'll be stealing a bit of the code from this example first we need to import WebSockets obviously then we need to create a WebSocket server that's why it's called WSS WebSocket server and then when you create a WebSocket server you need to pass to it some options you can pass a port you can pass a server which it will listen on as well we will be passing the server in this case because you're really happy we already have a Express application running so this way they're both running on the same port and it's easy to connect to both and there's no conflicts because the WebSockets use a WebSocket protocol and not the HTTP protocol and then we can go P this bit of the code right here so what is bit of the code does is this bit of the code gets triggered whenever a new connection is made to the server and then we can if we like to do that we can console log a new client connected connected whatever a new client connects and then this bit right here this ws send is gonna send a response message is gonna send the message to the client that just connected so we can the message to this client of welcome new client right if we want to do that so this bit of the code will always get triggered whenever a new connection whenever a new client connects to our server now this bit of the code right here gets triggered whenever the server receives a message from any client in currently it's set up to just console.log received and then the message it received in there we could add to it it's some sort of like logic so it's a bit more responsive so we could say WS send so it could send back a message when it receives one and then we could say got your message it's a message right so whenever a screaming what our back-end does right whenever a user connects its console logs and new client connected it sends a message to this person that just connected welcome new client and then whenever a message is sent to the server its console logs received message and then to the client and says got your message it's and then it sends the message as well so this is what our back-end Curly does it's very simple it will accept connections or respond to messages and that's really it you can add obviously a lot of logic here but this is the most basic thing so I'm moving on I have these two HTML files right here I remember I'm one inclined to will just add some basic vanilla JavaScript in here and then open the files and we'll connect to the web socket okay so starting off let's go look at the websocket api the links to all three of these will be in the description so you can read more about that there's a lot of info here but what we want to look at is this example and copy it because it does a lot of this stuff we want to do for us which is you know it takes time so right here we define a new socket connection with to it you say WS as the protocol then used to say the IP or the address of the server and then the port in our case it's going to be 3000 whenever a new connection is open this sends a message we don't actually want to send a message so we'll just consult that log connected to WebSocket server and then whenever a message is received from this WebSocket server it currently just constructs the message which is fine besides the message and open event listeners there's a few other ones you can read more about here there is a closed one there's an error one and there's a few other properties you can check and change so you can check the what's the URL you can check what's the current is it ready state is the connection open is there is it closing etc etc okay also you can open and close the connection using the close method okay so our client looks fun it sort of works it won't really send me messages though it will just connect to the server so let's create a function send a message and then this this function will take the socket and then send so to the socket it will send a message hello from client one right because this is client one right right here it's client one and this is a client ooh so we'll send a message from client one hello from Klein want to our web socket so now we can NPM start our API which is this and then we can also open our index.html and we can see in here so here we have listening on port 3000 and no client connected that happened whenever we open the page and then it says connected to WS server message from server welcome new client so if we click this did I define a send message oh yeah I need to add the set message to the on click of the button so on click send message like that so if we refresh this you can see another a new client connected because this one disconnected right just one disconnected because we are reopen the page if we send a message we get message from server got your message it's hello from client 1 that's correct and here we can see it received a message hello from client 1 so currently we have a client ooh ok so currently we have a client that can connect to a WebSocket a lesson when the connection opens do things when it opens or listen for messages and also send messages and we have a server that receives messages sends a message when a client connects and also responds with just the echo of the message whenever a message is received the thing about this though is so if we copy most of this code to our other client to client 2 and just change this to hello from client to the client to won't receive the message from client 1 right that's that's a bit of an issue because we want these two clients to communicate so right now as a new client connected so we can send the message here got your message hello from client 2 so these two can send the message to the server the client 1 and client two can both send messages to the server and receive messages from the server but they don't they can't communicate with each other for that we need to broadcast messages to the entire to all connections currently on the server and we can do that right here there is an example how to do it right here so this example shows you how to broadcasters to all the connected web sockets including the one that sent it and this one shows you how to broadcast messages to every connected web socket with besides the one that sends it which is what we want because you don't want to send messages to yourself you want to send messages to everyone else but yourself so we'll copy this bit of the code go to the server go to this bit right here we can remove this well we can respond we can we can respond to the the client that sent got you that send the message got your message and then we can down here respond with the message like this so currently we can actually remove this so currently what this is what this bit of the code right here is going to do is that it will take the WebSocket server it will go through every client that is connected to this WebSocket server for each of that for each client connected it will take the client it will check if the client is the one that sent the message which in our case there's going to be two so one of them is going to be doing this at the message and if it is gonna check if the connection is currently open if the connection is open and the client that is connected is not the one that sent the message it will send the message so what this will do is so if we start our back-end what this will do is when we send the message from here we will receive it here hello from client one if we send a message from client two will receive it in client one if we had ten more other clients all of all of the other ones besides the one sending the message will receive the message so that we have a sort of giant chat room where everyone listening will receive the message it's it's like it's like we'll have a group chat basically what we created right now is a group chat now this is just the most basic structure you get all you should if you're making a chat app or anything obviously integrate this a lot better and you should you know maybe have like an array of people connected maybe have of authentication instead of just sending a message you would maybe send objects which will contain like the room name the message etc etc but that's for your own application that's a very you know varies from app to app this is just the most basic setup for a web socket which has multiple uses and the main one the main used one is a chat application hopefully now you understand WebSockets to some degree all the links will be in the description thank you for watching and go

Channel: Vuka

Views: 99,729

Keywords: vuka, vuka951, ws, websocket, websocket api, websockets, node, nodejs, js, javascript, express, expressjs, http, tutorial, how to, basics, server, websocket server, websocket client, client, connection, routes, message, events, eventlistener

Id: wV-fDdHhGqs

Length: 11min 2sec (662 seconds)

Published: Thu May 14 2020