Real-Time Data Updates using Socket.io | JavaScript and Node.js Tutorial

hello everyone and welcome to this tutorial so today what I'm going to be showing you is how you can get real-time data updates and I'll be showing you how to do that by establishing a websocket between the front end and the server side so to do this I'm going to be using the socket.io library on the front end and on the back end in node.js and by the end of this tutorial you'll see this light counter incrementing in real time so if a user separately connects to the site and clicks on the like button it will update live or all users so first for the front end I'm going to import socket.io into my project so you could install this via npm but get started quickly I'm going to import it via a CDN link so when the back end is set up this is going to allow us to establish a websocket so you can do that by simply calling the i o object that importing the library makes available to you if you don't pass a URL into it then it will attempt to establish a websocket on the URL that the page is being served from so in this case it would be while I'm testing it locally localhost Port 5500 but because you might be interested in establishing an independent server that's independent from the serving of the current page I'll set up the node.js server to run on Port 3000 on localhost so this IP is what localhost results to and once the socket has been established the server it sends a connect event to the front end and on that I'm just going to log to the console connect it now across websockets you can not only listen out or events that are generated by the server but also generate events that are sent to the server now when I'm coding the server side I'm going to generate an event that I'm going to listen out for in the client called like update so this event is going to be triggered on the server side each time a light count should be updated and each time that it should I'm going to set the text content of the likes element to the new count and the new count I'll be passing it in to the like update event when it's triggered on the server side so for the server side code I'm working in a different project folder and I've already cd'd into this directory from the terminal now to run the next series of commands you need to make sure that node is already installed on your system so you can do that by running node flag B if this doesn't return a version number then you need to install node before continuing with this tutorial so you can get it for free from the official node.js website now before installing socket.io in Project folder I'm going to create a new node project so npm init double flag y will create a new node project accepting all the default settings and now I'll install socket.io so easiest way to create a websocket on the back end using socket.io is to use it as an independent package separate from a HTTP server created natively or using Express now from this package we want one of its named Imports which is server which is going to allow us to create a server just using socket.io so you can do that by creating a new server instance by using the new keyword before the import and optionally you can pass in some options here so in this case because the request is not coming from the same origin as the server is listening on I'm setting all Origins to be accepted to prevent a course error now I'm going to store a reference to that server and I can use that to specify that when a request comes in to establish a websocket and that's connected what I'm going to do in terms of sending events or responding to events from that request and you can do that via a reference to the website socket that's been created that's passed into this callback function so on a new connection I'll send an event from the server to the client and already listening out for that on the front end the like update event and using the likes count that's passed into it to update the likes count on the page now I'll set the value or flights to be zero when the server Starts Now to respond to a user clicking on the like button on the front end which sends a light event from the front end to the back end I need to listen out for that event and when it occurs in a callback function I can respond to it though the first thing that I want to do is increment the global likes counter by one and then I want to omit the like update event again passing into it the likes which is going to be the updated count now doing this it will only emit the event or the current websocket connection so only for the user who clicked the like button to trigger the event or all other websocket connections you call Omit again but this time on broadcast so when the light to Bent is sent from the client to the server because the user clicks on the like button we're updating the likes count and updating that value live or the current user and also all other users by omitting the like update event that we're listening out for on the front end now the final thing that I need to do in the code to get this server up and running is to call listen on the server that I created and I set it to listen on Port 3000 because that's the port that I'm trying to listen to on the front end now I can start the server and let's test it so I click on the button and it is updating if I refresh then it updates to three and I have the front end open in a different browser simulating to separate connections like it would be for two different users and as you can see when I click on one window it updates the count in the other window so the data is being updated live as clicks happen now the event that's being omitted on the server side it doesn't have to be in response to an event that's submitted from the client it could be entirely generated on the server side so I'm going to set up likes to increase by one every two seconds independent or any websocket connection now to trigger a websocket event every time this occurs I'm going to create an event in node.js using the native events module and start using it to Omit events you want to create a new instance of an event emitter buy at that package and I can use the event emitter to Omit an event each time the set interval callback function runs and then inside the websocket connection I can listen out for that event so it's new data then we want to broadcast via all websockets that are currently connected the new number of likes in this case so our restart server and now if we take a look at the likes they are increasing by one every two seconds so this is an entirely server-side generated event now the final thing that I want to show you is what if you want to combine a socket.io connection with a regular web server so to do that you first of all create your web server if you're using Express you need to pass your app into the HTTP create server method if you're not using Express then you can just call the create server method without passing anything into it and you pass the server that you created as a first argument into the new server instance that you create using the server import from the socket.io library and now instead of listening via the socket.io object you listen via the server and now the server it can support websocket connections as well as accept regular requests so I'll just send something back just to check that this endpoint is working now before restarting the server I need to install Express as a dependency now start the app again and you can see that was still getting the live data updates and if I check localhost Port 3000 we're getting the expected response from the end point okay so that's it for this tutorial on getting real-time data updates via a websocket using socket.io I hope you found it useful if you did please consider hitting the like button down below this video it helps us with the algorithm and others to find this video and if you'd like to see more content like this from us in the future don't forget you can subscribe to the channel

Channel: OpenJavaScript

Views: 19,050

Keywords:

Id: MbStdet9aVk

Length: 11min 9sec (669 seconds)

Published: Tue May 09 2023