Learn the fundamentals of WebSockets in 100 seconds, then build a simple group chat app with Socket.io. https://fireship.io

Sponsor me on Github for $1.00 https://github.com/codediodeio 

Source Code https://github.com/fireship-io/socketio-minimal-demo.git

- WebSockets https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
- socket.io  https://socket.io 

#webdev #js #100SecondsOfCode

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:00:52.906Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
49828b2a-14bd-4992-bb62-10fcb5365b7f
41ff1da12c5fda9e5578b73bae6d1cdac469fe2fcbbe4338e0c5fb6e86534c93
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
WebSockets.
Build real time features by establishing a two way connection between a client and a server.
Imagine an online multiplayer game where the leaderboard is constantly changing on the server.
Now what's the best way to show the player an updated leaderboard?
We could tell them to refresh their browser window every few minutes to send a new HTTP request, or we could use an interval that ticks every few seconds to pull the server for new data.
But these options aren't ideal for real time data and that's where WebSockets come in.
The first step is for the client to send an HTTP request to the server asking to open a connection.
If the server agrees, it will send a one zero one switching protocols response, at which point the handshake is complete.
The TCP IP option is left open, allowing bidirectional messages to pass between the 2 parties with very low latency.
The connection will stay open until one of the parties drops off, then the TCP resources can be unallocated.
It's often referred to as a full duplex connection, which is a telecommunications term that defines how a phone line works where both parties can send messages or talk at the same time.
Let's see this in action by creating a real time connection between a Node.
Js a server, and a web browser.
We'll start in our back end code by building a WebSocket server with Node.
Js.
Using the ws library, We can instantiate a new server on port 8080.
Everything is event based, and the first event we can expect to happen is a connection from the client.
When the connection is made, we'll have access to a WebSocket object in the callback.
With the initial handshake done, there are 2 things we might wanna do here.
We can listen to incoming messages, which would just be text in this case, and then handle them accordingly in the callback.
The second thing we might do is send a message back to the client, which we can do with the send method.
Now let's take a look at our client side code in the browser, which has a built in WebSocket a clasp.
It's instantiated with a URL that points to the server, but notice the w s protocol.
That will automatically trigger the Handshake, to open the connection, which we can listen to as an event.
Just like on the server, we can use the socket to both listen to and send messages.
And we now have a full duplex connection between a front end JavaScript app and a node back end.
This has been WebSockets in 100 seconds, but if you want to learn more, make sure to stay tuned.
Because today, we're going beyond 100 seconds to learn all about a library called Socket.
Io and look at a couple of APIs that might replace WebSockets in the future.
But first, make sure to like and subscribe.
And if you're into real time apps, check out my Firebase content on Fireship IO.
Now one of the issues that is not so obvious with our current implementation is that the server cannot broadcast a message out to multiple clients simultaneously.
Like, for example, a group chat room where you have multiple users passing messages back and forth.
It's definitely possible to build something like that from scratch with websockets, but there are libraries, like socket I o in this case, that can make features like that much easier to implement.
You can think of a web socket as a low level building block, where socket IO is a more practical library that solves common use cases and provides failovers to different protocols when needed.
If you're building something real time, there are many different options out there.
You might look into Firebase, Apollo GraphQL, or an API like Pusher.
Once you bring a database into the equation, real time features can become very complex, and using a paid service can be well worth the money in my opinion.
In any case, Let's go ahead and get started with our socket IO project.
At this point, you can open up Versus Code to follow along and access the source code on GitHub.
What we're going to build here is a bare minimum implementation of a group chat room.
When a user opens up the app, they can post a message, and anybody else on that same URL can view the message.
And, again, one of the big differences from the previous implementation is that the message will be broadcast to all of the connected clients.
As you can see in our code, we have a directory for server and app.
Server is the back end, app is the front end.
In the server directory, we'll initialize an npm project by running npm init y.
Then we only require one dependency, which is socket IO, and we can install it with npm.
Now in the index JS file, we need to create an HTTP server.
We can do that using the built in HTTP library in Node by importing it, then calling the create server method.
However, it is worth noting that you might want to use express here instead, which is a much more popular option for building an HTTP server.
The next step is to import socket IO, which is a function, and it will take our HTTP server object as an argument.
But in this demo, we'll be accessing the back end from a front end browser application.
But for security reasons, cross origin resource sharing, or cores, is disabled.
We we can pass an object as a second argument, and we'll set the core's origin to anything, allowing any URL to access our back end URL.
And now we can implement the logic for Socket.
Io.
Just like WebSockets, it's an event based system, and the first event you'll likely want to listen for is the connection of a client from the front end.
The callback will give us access to the socket object.
And on that socket, we can listen to any custom event we want.
But for simplicity, we'll just call it the message event.
When an event is emitted, we'll have access to the data, which might be a JavaScript object or a string, and we can handle it inside the callback here.
In this case, it'll be a string, which we can console log.
And because we have multiple clients listening to the message event, we can then re emit the message so it's broadcast out to everybody.
We can do that with the IO emit method, and then we'll pass message as the event name, and then whatever custom text or data we want to pass as the second argument, and that's basically all there is to it.
It's a very simple event based system.
The final piece of code we need here though is to tell our server to listen on port 8080.
Then you can open up the terminal and call node and point it to this file to run the script and start your Socket IO server.
And now we're ready to move on to the front end code in our app directory here.
If we open up the index HTML file, you'll notice I have a script tag here pointing to the socket I o CDN for version 3 point o.
It's very important to understand that socket I o is not a direct WebSocket implementation, which means you can't just use the built in WebSocket class in the browser.
Instead, you have to use the socket IO client library, which which we're doing here through the CDN, but you can also install it with NPM and bundle it into your project if you're using something like React or Angular.
After that, we have a script pointing to the app dotjs file, which is our custom source code, and I'm using the defer attribute to make sure it loads after the body content.
Then in the body itself, I have an unordered list, which is where our chat messages will appear.
And then below that, I have an input for the user to type a message and a button to send it, and now we can move over to our JavaScript file.
The IO object will now be globally available in the browser, which is the socket IO client library.
We can create the connection by pointing to the URL of our server, which is local host 8080.
And now we're ready to start listening to events.
By calling socket on, we can listen to the message event emitted by the server, and we can use some imperative browser APIs here to create a new list item element and then append that item to the unordered list in our HTML, and that's all it takes to create a feed of messages in the UI.
The only thing left to do is give the user the ability to send a message.
We can handle that by listening to the click event on a button.
When clicked, we'll grab the text or the value from the input element, and then we'll call socket emit with the message event and the text.
Congratulations.
You just built a real time chat app with socket.
Io.
Obviously, there's a lot more to building real time features in the real world.
Events get emitted, and then you listen to events and handle them accordingly with functions.
Now before we finish up, there's one last thing I wanna talk about, and that's the relationship between WebSockets and other APIs like WebRTC and a new experimental API called WebTransport.
1st, let's talk about WebRTC, which stands for real time communication.
It's also a tool for building real time experiences.
However, it's geared towards browser to browser communication, primarily for video and voice.
If you're building a video chat app like Zoom, you probably want WebRTC and not WebSockets.
And another new API that people have started talking about is WebTransport.
And without getting into the details, it's basically a better version of WebSockets.
Faster handshake, better reliability, and stuff like that.
Its proposal is still being stabilized, so nothing you need to know today, but just something to have on the radar for the future.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
Consider sponsoring me on GitHub or becoming a pro member at FireShip IO.
Thanks for watching, and I will see you in the next one.

Speaker 0: WebSockets. Build real time features by establishing a two way connection between a client and a server. Imagine an online multiplayer game where the leaderboard is constantly changing on the server. Now what's the best way to show the player an updated leaderboard? We could tell them to refresh their browser window every few minutes to send a new HTTP request, or we could use an interval that ticks every few seconds to pull the server for new data.

But these options aren't ideal for real time data and that's where WebSockets come in. The first step is for the client to send an HTTP request to the server asking to open a connection. If the server agrees, it will send a one zero one switching protocols response, at which point the handshake is complete. The TCP IP option is left open, allowing bidirectional messages to pass between the 2 parties with very low latency. The connection will stay open until one of the parties drops off, then the TCP resources can be unallocated.

It's often referred to as a full duplex connection, which is a telecommunications term that defines how a phone line works where both parties can send messages or talk at the same time. Let's see this in action by creating a real time connection between a Node. Js a server, and a web browser. We'll start in our back end code by building a WebSocket server with Node. Js.

Using the ws library, We can instantiate a new server on port 8080. Everything is event based, and the first event we can expect to happen is a connection from the client. When the connection is made, we'll have access to a WebSocket object in the callback. With the initial handshake done, there are 2 things we might wanna do here. We can listen to incoming messages, which would just be text in this case, and then handle them accordingly in the callback.

The second thing we might do is send a message back to the client, which we can do with the send method. Now let's take a look at our client side code in the browser, which has a built in WebSocket a clasp. It's instantiated with a URL that points to the server, but notice the w s protocol. That will automatically trigger the Handshake, to open the connection, which we can listen to as an event. Just like on the server, we can use the socket to both listen to and send messages.

And we now have a full duplex connection between a front end JavaScript app and a node back end. This has been WebSockets in 100 seconds, but if you want to learn more, make sure to stay tuned. Because today, we're going beyond 100 seconds to learn all about a library called Socket. Io and look at a couple of APIs that might replace WebSockets in the future. But first, make sure to like and subscribe.

And if you're into real time apps, check out my Firebase content on Fireship IO. Now one of the issues that is not so obvious with our current implementation is that the server cannot broadcast a message out to multiple clients simultaneously. Like, for example, a group chat room where you have multiple users passing messages back and forth. It's definitely possible to build something like that from scratch with websockets, but there are libraries, like socket I o in this case, that can make features like that much easier to implement. You can think of a web socket as a low level building block, where socket IO is a more practical library that solves common use cases and provides failovers to different protocols when needed.

If you're building something real time, there are many different options out there. You might look into Firebase, Apollo GraphQL, or an API like Pusher. Once you bring a database into the equation, real time features can become very complex, and using a paid service can be well worth the money in my opinion. In any case, Let's go ahead and get started with our socket IO project. At this point, you can open up Versus Code to follow along and access the source code on GitHub.

What we're going to build here is a bare minimum implementation of a group chat room. When a user opens up the app, they can post a message, and anybody else on that same URL can view the message. And, again, one of the big differences from the previous implementation is that the message will be broadcast to all of the connected clients. As you can see in our code, we have a directory for server and app. Server is the back end, app is the front end.

In the server directory, we'll initialize an npm project by running npm init y. Then we only require one dependency, which is socket IO, and we can install it with npm. Now in the index JS file, we need to create an HTTP server. We can do that using the built in HTTP library in Node by importing it, then calling the create server method. However, it is worth noting that you might want to use express here instead, which is a much more popular option for building an HTTP server.

The next step is to import socket IO, which is a function, and it will take our HTTP server object as an argument. But in this demo, we'll be accessing the back end from a front end browser application. But for security reasons, cross origin resource sharing, or cores, is disabled. We we can pass an object as a second argument, and we'll set the core's origin to anything, allowing any URL to access our back end URL. And now we can implement the logic for Socket.

Io. Just like WebSockets, it's an event based system, and the first event you'll likely want to listen for is the connection of a client from the front end. The callback will give us access to the socket object. And on that socket, we can listen to any custom event we want. But for simplicity, we'll just call it the message event.

When an event is emitted, we'll have access to the data, which might be a JavaScript object or a string, and we can handle it inside the callback here. In this case, it'll be a string, which we can console log. And because we have multiple clients listening to the message event, we can then re emit the message so it's broadcast out to everybody. We can do that with the IO emit method, and then we'll pass message as the event name, and then whatever custom text or data we want to pass as the second argument, and that's basically all there is to it. It's a very simple event based system.

The final piece of code we need here though is to tell our server to listen on port 8080. Then you can open up the terminal and call node and point it to this file to run the script and start your Socket IO server. And now we're ready to move on to the front end code in our app directory here. If we open up the index HTML file, you'll notice I have a script tag here pointing to the socket I o CDN for version 3 point o. It's very important to understand that socket I o is not a direct WebSocket implementation, which means you can't just use the built in WebSocket class in the browser.

Instead, you have to use the socket IO client library, which which we're doing here through the CDN, but you can also install it with NPM and bundle it into your project if you're using something like React or Angular. After that, we have a script pointing to the app dotjs file, which is our custom source code, and I'm using the defer attribute to make sure it loads after the body content. Then in the body itself, I have an unordered list, which is where our chat messages will appear. And then below that, I have an input for the user to type a message and a button to send it, and now we can move over to our JavaScript file. The IO object will now be globally available in the browser, which is the socket IO client library.

We can create the connection by pointing to the URL of our server, which is local host 8080. And now we're ready to start listening to events. By calling socket on, we can listen to the message event emitted by the server, and we can use some imperative browser APIs here to create a new list item element and then append that item to the unordered list in our HTML, and that's all it takes to create a feed of messages in the UI. The only thing left to do is give the user the ability to send a message. We can handle that by listening to the click event on a button.

When clicked, we'll grab the text or the value from the input element, and then we'll call socket emit with the message event and the text. Congratulations. You just built a real time chat app with socket. Io. Obviously, there's a lot more to building real time features in the real world.

Events get emitted, and then you listen to events and handle them accordingly with functions. Now before we finish up, there's one last thing I wanna talk about, and that's the relationship between WebSockets and other APIs like WebRTC and a new experimental API called WebTransport. 1st, let's talk about WebRTC, which stands for real time communication. It's also a tool for building real time experiences. However, it's geared towards browser to browser communication, primarily for video and voice.

If you're building a video chat app like Zoom, you probably want WebRTC and not WebSockets. And another new API that people have started talking about is WebTransport. And without getting into the details, it's basically a better version of WebSockets. Faster handshake, better reliability, and stuff like that. Its proposal is still being stabilized, so nothing you need to know today, but just something to have on the radar for the future.

I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. Consider sponsoring me on GitHub or becoming a pro member at FireShip IO. Thanks for watching, and I will see you in the next one.
WebSockets. Build real time features by establishing a two way connection between a client and a server. Imagine an online multiplayer game where the leaderboard is constantly changing on the server. Now what's the best way to show the player an updated leaderboard? We could tell them to refresh their browser window every few minutes to send a new HTTP request, or we could use an interval that ticks every few seconds to pull the server for new data.
But these options aren't ideal for real time data and that's where WebSockets come in. The first step is for the client to send an HTTP request to the server asking to open a connection. If the server agrees, it will send a one zero one switching protocols response, at which point the handshake is complete. The TCP IP option is left open, allowing bidirectional messages to pass between the 2 parties with very low latency. The connection will stay open until one of the parties drops off, then the TCP resources can be unallocated. It's often referred to as a full duplex connection, which is a telecommunications term that defines how a phone line works where both parties can send messages or talk at the same time. Let's see this in action by creating a real time connection between a Node. Js a server, and a web browser. We'll start in our back end code by building a WebSocket server with Node. Js. Using the ws library, We can instantiate a new server on port 8080. Everything is event based, and the first event we can expect to happen is a connection from the client. When the connection is made, we'll have access to a WebSocket object in the callback. With the initial handshake done, there are 2 things we might wanna do here. We can listen to incoming messages, which would just be text in this case, and then handle them accordingly in the callback.
telecommunications
internet
networking
The second thing we might do is send a message back to the client, which we can do with the send method. Now let's take a look at our client side code in the browser, which has a built in WebSocket a clasp. It's instantiated with a URL that points to the server, but notice the w s protocol.
That will automatically trigger the Handshake, to open the connection, which we can listen to as an event. Just like on the server, we can use the socket to both listen to and send messages. And we now have a full duplex connection between a front end JavaScript app and a node back end.
networking
This has been WebSockets in 100 seconds, but if you want to learn more, make sure to stay tuned.
Because today, we're going beyond 100 seconds to learn all about a library called Socket. Io and look at a couple of APIs that might replace WebSockets in the future. But first, make sure to like and subscribe. And if you're into real time apps, check out my Firebase content on Fireship IO.
internet
Now one of the issues that is not so obvious with our current implementation is that the server cannot broadcast a message out to multiple clients simultaneously.
Like, for example, a group chat room where you have multiple users passing messages back and forth. It's definitely possible to build something like that from scratch with websockets, but there are libraries, like socket I o in this case, that can make features like that much easier to implement.
networking
You can think of a web socket as a low level building block, where socket IO is a more practical library that solves common use cases and provides failovers to different protocols when needed. If you're building something real time, there are many different options out there. You might look into Firebase, Apollo GraphQL, or an API like Pusher.
Once you bring a database into the equation, real time features can become very complex, and using a paid service can be well worth the money in my opinion. In any case, Let's go ahead and get started with our socket IO project. At this point, you can open up Versus Code to follow along and access the source code on GitHub. What we're going to build here is a bare minimum implementation of a group chat room. When a user opens up the app, they can post a message, and anybody else on that same URL can view the message. And, again, one of the big differences from the previous implementation is that the message will be broadcast to all of the connected clients. As you can see in our code, we have a directory for server and app. Server is the back end, app is the front end. In the server directory, we'll initialize an npm project by running npm init y.
databases
networking
software development
Then we only require one dependency, which is socket IO, and we can install it with npm. Now in the index JS file, we need to create an HTTP server. We can do that using the built in HTTP library in Node by importing it, then calling the create server method.
However, it is worth noting that you might want to use express here instead, which is a much more popular option for building an HTTP server. The next step is to import socket IO, which is a function, and it will take our HTTP server object as an argument. But in this demo, we'll be accessing the back end from a front end browser application. But for security reasons, cross origin resource sharing, or cores, is disabled. We we can pass an object as a second argument, and we'll set the core's origin to anything, allowing any URL to access our back end URL. And now we can implement the logic for Socket. Io. Just like WebSockets, it's an event based system, and the first event you'll likely want to listen for is the connection of a client from the front end. The callback will give us access to the socket object. And on that socket, we can listen to any custom event we want.
networking
internet
But for simplicity, we'll just call it the message event. When an event is emitted, we'll have access to the data, which might be a JavaScript object or a string, and we can handle it inside the callback here. In this case, it'll be a string, which we can console log. And because we have multiple clients listening to the message event, we can then re emit the message so it's broadcast out to everybody.
We can do that with the IO emit method, and then we'll pass message as the event name, and then whatever custom text or data we want to pass as the second argument, and that's basically all there is to it. It's a very simple event based system. The final piece of code we need here though is to tell our server to listen on port 8080.
internet
Then you can open up the terminal and call node and point it to this file to run the script and start your Socket IO server. And now we're ready to move on to the front end code in our app directory here. If we open up the index HTML file, you'll notice I have a script tag here pointing to the socket I o CDN for version 3 point o.
It's very important to understand that socket I o is not a direct WebSocket implementation, which means you can't just use the built in WebSocket class in the browser. Instead, you have to use the socket IO client library, which which we're doing here through the CDN, but you can also install it with NPM and bundle it into your project if you're using something like React or Angular.
networking
After that, we have a script pointing to the app dotjs file, which is our custom source code, and I'm using the defer attribute to make sure it loads after the body content. Then in the body itself, I have an unordered list, which is where our chat messages will appear. And then below that, I have an input for the user to type a message and a button to send it, and now we can move over to our JavaScript file.
The IO object will now be globally available in the browser, which is the socket IO client library. We can create the connection by pointing to the URL of our server, which is local host 8080. And now we're ready to start listening to events. By calling socket on, we
networking
internet
can listen to the message event emitted by the server, and we can use some imperative browser APIs here to create a new list item element and then append that item to the unordered list in our HTML, and that's all it takes to create a feed of messages in the UI. The only thing left to do is give the user the ability to send a message. We can handle that by listening to the click event on a button. When clicked, we'll grab the text or the value from the input element, and then we'll call socket emit with the message event and the text.
Congratulations. You just built a real time chat app with socket. Io. Obviously, there's a lot more to building real time features in the real world. Events get emitted, and then you listen to events and handle them accordingly with functions. Now before we finish up, there's one last thing I wanna talk about, and that's the relationship between WebSockets and other APIs like WebRTC and a new experimental API called WebTransport. 1st, let's talk about WebRTC, which stands for real time communication. It's also a tool for building real time experiences. However, it's geared towards browser to browser communication, primarily for video and voice. If you're building a video chat app like Zoom, you probably want WebRTC and not WebSockets. And another new API that people have started talking about is WebTransport. And without getting into the details, it's basically a better version of WebSockets. Faster handshake, better reliability, and stuff like that. Its proposal is still being stabilized, so nothing you need to know today, but just something to have on the radar for the future.
networking
internet
multimedia
telecommunications
I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. Consider sponsoring me on GitHub or becoming a pro member at FireShip IO. Thanks for watching, and I will see you in the next one.
youtube
social media
media
streaming
WebSockets. Build real time features by establishing a two way connection between a client and a server. Imagine an online multiplayer game where the leaderboard is constantly changing on the server. Now what's the best way to show the player an updated leaderboard? We could tell them to refresh their browser window every few minutes to send a new HTTP request, or we could use an interval that ticks every few seconds to pull the server for new data. But these options aren't ideal for real time data and that's where WebSockets come in. The first step is for the client to send an HTTP request to the server asking to open a connection. If the server agrees, it will send a one zero one switching protocols response, at which point the handshake is complete. The TCP IP option is left open, allowing bidirectional messages to pass between the 2 parties with very low latency. The connection will stay open until one of the parties drops off, then the TCP resources can be unallocated. It's often referred to as a full duplex connection, which is a telecommunications term that defines how a phone line works where both parties can send messages or talk at the same time. Let's see this in action by creating a real time connection between a Node. Js a server, and a web browser. We'll start in our back end code by building a WebSocket server with Node. Js. Using the ws library, We can instantiate a new server on port 8080. Everything is event based, and the first event we can expect to happen is a connection from the client. When the connection is made, we'll have access to a WebSocket object in the callback. With the initial handshake done, there are 2 things we might wanna do here. We can listen to incoming messages, which would just be text in this case, and then handle them accordingly in the callback. The second thing we might do is send a message back to the client, which we can do with the send method. Now let's take a look at our client side code in the browser, which has a built in WebSocket a clasp. It's instantiated with a URL that points to the server, but notice the w s protocol. That will automatically trigger the Handshake, to open the connection, which we can listen to as an event. Just like on the server, we can use the socket to both listen to and send messages. And we now have a full duplex connection between a front end JavaScript app and a node back end. This has been WebSockets in 100 seconds, but if you want to learn more, make sure to stay tuned. Because today, we're going beyond 100 seconds to learn all about a library called Socket. Io and look at a couple of APIs that might replace WebSockets in the future. But first, make sure to like and subscribe. And if you're into real time apps, check out my Firebase content on Fireship IO. Now one of the issues that is not so obvious with our current implementation is that the server cannot broadcast a message out to multiple clients simultaneously. Like, for example, a group chat room where you have multiple users passing messages back and forth. It's definitely possible to build something like that from scratch with websockets, but there are libraries, like socket I o in this case, that can make features like that much easier to implement. You can think of a web socket as a low level building block, where socket IO is a more practical library that solves common use cases and provides failovers to different protocols when needed. If you're building something real time, there are many different options out there. You might look into Firebase, Apollo GraphQL, or an API like Pusher. Once you bring a database into the equation, real time features can become very complex, and using a paid service can be well worth the money in my opinion. In any case, Let's go ahead and get started with our socket IO project. At this point, you can open up Versus Code to follow along and access the source code on GitHub. What we're going to build here is a bare minimum implementation of a group chat room. When a user opens up the app, they can post a message, and anybody else on that same URL can view the message. And, again, one of the big differences from the previous implementation is that the message will be broadcast to all of the connected clients. As you can see in our code, we have a directory for server and app. Server is the back end, app is the front end. In the server directory, we'll initialize an npm project by running npm init y. Then we only require one dependency, which is socket IO, and we can install it with npm. Now in the index JS file, we need to create an HTTP server. We can do that using the built in HTTP library in Node by importing it, then calling the create server method. However, it is worth noting that you might want to use express here instead, which is a much more popular option for building an HTTP server. The next step is to import socket IO, which is a function, and it will take our HTTP server object as an argument. But in this demo, we'll be accessing the back end from a front end browser application. But for security reasons, cross origin resource sharing, or cores, is disabled. We we can pass an object as a second argument, and we'll set the core's origin to anything, allowing any URL to access our back end URL. And now we can implement the logic for Socket. Io. Just like WebSockets, it's an event based system, and the first event you'll likely want to listen for is the connection of a client from the front end. The callback will give us access to the socket object. And on that socket, we can listen to any custom event we want. But for simplicity, we'll just call it the message event. When an event is emitted, we'll have access to the data, which might be a JavaScript object or a string, and we can handle it inside the callback here. In this case, it'll be a string, which we can console log. And because we have multiple clients listening to the message event, we can then re emit the message so it's broadcast out to everybody. We can do that with the IO emit method, and then we'll pass message as the event name, and then whatever custom text or data we want to pass as the second argument, and that's basically all there is to it. It's a very simple event based system. The final piece of code we need here though is to tell our server to listen on port 8080. Then you can open up the terminal and call node and point it to this file to run the script and start your Socket IO server. And now we're ready to move on to the front end code in our app directory here. If we open up the index HTML file, you'll notice I have a script tag here pointing to the socket I o CDN for version 3 point o. It's very important to understand that socket I o is not a direct WebSocket implementation, which means you can't just use the built in WebSocket class in the browser. Instead, you have to use the socket IO client library, which which we're doing here through the CDN, but you can also install it with NPM and bundle it into your project if you're using something like React or Angular. After that, we have a script pointing to the app dotjs file, which is our custom source code, and I'm using the defer attribute to make sure it loads after the body content. Then in the body itself, I have an unordered list, which is where our chat messages will appear. And then below that, I have an input for the user to type a message and a button to send it, and now we can move over to our JavaScript file. The IO object will now be globally available in the browser, which is the socket IO client library. We can create the connection by pointing to the URL of our server, which is local host 8080. And now we're ready to start listening to events. By calling socket on, we can listen to the message event emitted by the server, and we can use some imperative browser APIs here to create a new list item element and then append that item to the unordered list in our HTML, and that's all it takes to create a feed of messages in the UI. The only thing left to do is give the user the ability to send a message. We can handle that by listening to the click event on a button. When clicked, we'll grab the text or the value from the input element, and then we'll call socket emit with the message event and the text. Congratulations. You just built a real time chat app with socket. Io. Obviously, there's a lot more to building real time features in the real world. Events get emitted, and then you listen to events and handle them accordingly with functions. Now before we finish up, there's one last thing I wanna talk about, and that's the relationship between WebSockets and other APIs like WebRTC and a new experimental API called WebTransport. 1st, let's talk about WebRTC, which stands for real time communication. It's also a tool for building real time experiences. However, it's geared towards browser to browser communication, primarily for video and voice. If you're building a video chat app like Zoom, you probably want WebRTC and not WebSockets. And another new API that people have started talking about is WebTransport. And without getting into the details, it's basically a better version of WebSockets. Faster handshake, better reliability, and stuff like that. Its proposal is still being stabilized, so nothing you need to know today, but just something to have on the radar for the future. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. Consider sponsoring me on GitHub or becoming a pro member at FireShip IO. Thanks for watching, and I will see you in the next one.
WebSockets.
websockets
Build
build
real
real
time
time
features
features
by
by
establishing
establishing
a
a
two
two
way
way
connection
connection
between
between
a
a
client
client
and
and
a
a
server.
server
Imagine
imagine
an
an
online
online
multiplayer
multiplayer
game
game
where
where
the
the
leaderboard
leaderboard
is
is
constantly
constantly
changing
changing
on
on
the
the
server.
server
Now
now
what's
what's
the
the
best
best
way
way
to
to
show
show
the
the
player
player
an
an
updated
updated
leaderboard?
leaderboard
We
we
could
could
tell
tell
them
them
to
to
refresh
refresh
their
their
browser
browser
window
window
every
every
few
few
minutes
minutes
to
to
send
send
a
a
new
new
HTTP
http
request,
request
or
or
we
we
could
could
use
use
an
an
interval
interval
that
that
ticks
ticks
every
every
few
few
seconds
seconds
to
to
pull
pull
the
the
server
server
for
for
new
new
data.
data
But
but
these
these
options
options
aren't
aren't
ideal
ideal
for
for
real
real
time
time
data
data
and
and
that's
that's
where
where
WebSockets
websockets
come
come
in.
in
The
the
first
first
step
step
is
is
for
for
the
the
client
client
to
to
send
send
an
an
HTTP
http
request
request
to
to
the
the
server
server
asking
asking
to
to
open
open
a
a
connection.
connection
If
if
the
the
server
server
agrees,
agrees
it
it
will
will
send
send
a
a
one
one
zero
zero
one
one
switching
switching
protocols
protocols
response,
response
at
at
which
which
point
point
the
the
handshake
handshake
is
is
complete.
complete
The
the
TCP
tcp
IP
ip
option
option
is
is
left
left
open,
open
allowing
allowing
bidirectional
bidirectional
messages
messages
to
to
pass
pass
between
between
the
the
2
2
parties
parties
with
with
very
very
low
low
latency.
latency
The
the
connection
connection
will
will
stay
stay
open
open
until
until
one
one
of
of
the
the
parties
parties
drops
drops
off,
off
then
then
the
the
TCP
tcp
resources
resources
can
can
be
be
unallocated.
unallocated
It's
it's
often
often
referred
referred
to
to
as
as
a
a
full
full
duplex
duplex
connection,
connection
which
which
is
is
a
a
telecommunications
telecommunications
term
term
that
that
defines
defines
how
how
a
a
phone
phone
line
line
works
works
where
where
both
both
parties
parties
can
can
send
send
messages
messages
or
or
talk
talk
at
at
the
the
same
same
time.
time
Let's
let's
see
see
this
this
in
in
action
action
by
by
creating
creating
a
a
real
real
time
time
connection
connection
between
between
a
a
Node.
node
Js
js
a
a
server,
server
and
and
a
a
web
web
browser.
browser
We'll
we'll
start
start
in
in
our
our
back
back
end
end
code
code
by
by
building
building
a
a
WebSocket
websocket
server
server
with
with
Node.
node
Js.
js
Using
using
the
the
ws
ws
library,
library
We
we
can
can
instantiate
instantiate
a
a
new
new
server
server
on
on
port
port
8080.
8080
Everything
everything
is
is
event
event
based,
based
and
and
the
the
first
first
event
event
we
we
can
can
expect
expect
to
to
happen
happen
is
is
a
a
connection
connection
from
from
the
the
client.
client
When
when
the
the
connection
connection
is
is
made,
made
we'll
we'll
have
have
access
access
to
to
a
a
WebSocket
websocket
object
object
in
in
the
the
callback.
callback
With
with
the
the
initial
initial
handshake
handshake
done,
done
there
there
are
are
2
2
things
things
we
we
might
might
wanna
wanna
do
do
here.
here
We
we
can
can
listen
listen
to
to
incoming
incoming
messages,
messages
which
which
would
would
just
just
be
be
text
text
in
in
this
this
case,
case
and
and
then
then
handle
handle
them
them
accordingly
accordingly
in
in
the
the
callback.
callback
The
the
second
second
thing
thing
we
we
might
might
do
do
is
is
send
send
a
a
message
message
back
back
to
to
the
the
client,
client
which
which
we
we
can
can
do
do
with
with
the
the
send
send
method.
method
Now
now
let's
let's
take
take
a
a
look
look
at
at
our
our
client
client
side
side
code
code
in
in
the
the
browser,
browser
which
which
has
has
a
a
built
built
in
in
WebSocket
websocket
a
a
clasp.
clasp
It's
it's
instantiated
instantiated
with
with
a
a
URL
url
that
that
points
points
to
to
the
the
server,
server
but
but
notice
notice
the
the
w
w
s
s
protocol.
protocol
That
that
will
will
automatically
automatically
trigger
trigger
the
the
Handshake,
handshake
to
to
open
open
the
the
connection,
connection
which
which
we
we
can
can
listen
listen
to
to
as
as
an
an
event.
event
Just
just
like
like
on
on
the
the
server,
server
we
we
can
can
use
use
the
the
socket
socket
to
to
both
both
listen
listen
to
to
and
and
send
send
messages.
messages
And
and
we
we
now
now
have
have
a
a
full
full
duplex
duplex
connection
connection
between
between
a
a
front
front
end
end
JavaScript
javascript
app
app
and
and
a
a
node
node
back
back
end.
end
This
this
has
has
been
been
WebSockets
websockets
in
in
100
100
seconds,
seconds
but
but
if
if
you
you
want
want
to
to
learn
learn
more,
more
make
make
sure
sure
to
to
stay
stay
tuned.
tuned
Because
because
today,
today
we're
we're
going
going
beyond
beyond
100
100
seconds
seconds
to
to
learn
learn
all
all
about
about
a
a
library
library
called
called
Socket.
socket
Io
io
and
and
look
look
at
at
a
a
couple
couple
of
of
APIs
apis
that
that
might
might
replace
replace
WebSockets
websockets
in
in
the
the
future.
future
But
but
first,
first
make
make
sure
sure
to
to
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
into
into
real
real
time
time
apps,
apps
check
check
out
out
my
my
Firebase
firebase
content
content
on
on
Fireship
fireship
IO.
io
Now
now
one
one
of
of
the
the
issues
issues
that
that
is
is
not
not
so
so
obvious
obvious
with
with
our
our
current
current
implementation
implementation
is
is
that
that
the
the
server
server
cannot
cannot
broadcast
broadcast
a
a
message
message
out
out
to
to
multiple
multiple
clients
clients
simultaneously.
simultaneously
Like,
like
for
for
example,
example
a
a
group
group
chat
chat
room
room
where
where
you
you
have
have
multiple
multiple
users
users
passing
passing
messages
messages
back
back
and
and
forth.
forth
It's
it's
definitely
definitely
possible
possible
to
to
build
build
something
something
like
like
that
that
from
from
scratch
scratch
with
with
websockets,
websockets
but
but
there
there
are
are
libraries,
libraries
like
like
socket
socket
I
i
o
o
in
in
this
this
case,
case
that
that
can
can
make
make
features
features
like
like
that
that
much
much
easier
easier
to
to
implement.
implement
You
you
can
can
think
think
of
of
a
a
web
web
socket
socket
as
as
a
a
low
low
level
level
building
building
block,
block
where
where
socket
socket
IO
io
is
is
a
a
more
more
practical
practical
library
library
that
that
solves
solves
common
common
use
use
cases
cases
and
and
provides
provides
failovers
failovers
to
to
different
different
protocols
protocols
when
when
needed.
needed
If
if
you're
you're
building
building
something
something
real
real
time,
time
there
there
are
are
many
many
different
different
options
options
out
out
there.
there
You
you
might
might
look
look
into
into
Firebase,
firebase
Apollo
apollo
GraphQL,
graphql
or
or
an
an
API
api
like
like
Pusher.
pusher
Once
once
you
you
bring
bring
a
a
database
database
into
into
the
the
equation,
equation
real
real
time
time
features
features
can
can
become
become
very
very
complex,
complex
and
and
using
using
a
a
paid
paid
service
service
can
can
be
be
well
well
worth
worth
the
the
money
money
in
in
my
my
opinion.
opinion
In
in
any
any
case,
case
Let's
let's
go
go
ahead
ahead
and
and
get
get
started
started
with
with
our
our
socket
socket
IO
io
project.
project
At
at
this
this
point,
point
you
you
can
can
open
open
up
up
Versus
versus
Code
code
to
to
follow
follow
along
along
and
and
access
access
the
the
source
source
code
code
on
on
GitHub.
github
What
what
we're
we're
going
going
to
to
build
build
here
here
is
is
a
a
bare
bare
minimum
minimum
implementation
implementation
of
of
a
a
group
group
chat
chat
room.
room
When
when
a
a
user
user
opens
opens
up
up
the
the
app,
app
they
they
can
can
post
post
a
a
message,
message
and
and
anybody
anybody
else
else
on
on
that
that
same
same
URL
url
can
can
view
view
the
the
message.
message
And,
and
again,
again
one
one
of
of
the
the
big
big
differences
differences
from
from
the
the
previous
previous
implementation
implementation
is
is
that
that
the
the
message
message
will
will
be
be
broadcast
broadcast
to
to
all
all
of
of
the
the
connected
connected
clients.
clients
As
as
you
you
can
can
see
see
in
in
our
our
code,
code
we
we
have
have
a
a
directory
directory
for
for
server
server
and
and
app.
app
Server
server
is
is
the
the
back
back
end,
end
app
app
is
is
the
the
front
front
end.
end
In
in
the
the
server
server
directory,
directory
we'll
we'll
initialize
initialize
an
an
npm
npm
project
project
by
by
running
running
npm
npm
init
init
y.
y
Then
then
we
we
only
only
require
require
one
one
dependency,
dependency
which
which
is
is
socket
socket
IO,
io
and
and
we
we
can
can
install
install
it
it
with
with
npm.
npm
Now
now
in
in
the
the
index
index
JS
js
file,
file
we
we
need
need
to
to
create
create
an
an
HTTP
http
server.
server
We
we
can
can
do
do
that
that
using
using
the
the
built
built
in
in
HTTP
http
library
library
in
in
Node
node
by
by
importing
importing
it,
it
then
then
calling
calling
the
the
create
create
server
server
method.
method
However,
however
it
it
is
is
worth
worth
noting
noting
that
that
you
you
might
might
want
want
to
to
use
use
express
express
here
here
instead,
instead
which
which
is
is
a
a
much
much
more
more
popular
popular
option
option
for
for
building
building
an
an
HTTP
http
server.
server
The
the
next
next
step
step
is
is
to
to
import
import
socket
socket
IO,
io
which
which
is
is
a
a
function,
function
and
and
it
it
will
will
take
take
our
our
HTTP
http
server
server
object
object
as
as
an
an
argument.
argument
But
but
in
in
this
this
demo,
demo
we'll
we'll
be
be
accessing
accessing
the
the
back
back
end
end
from
from
a
a
front
front
end
end
browser
browser
application.
application
But
but
for
for
security
security
reasons,
reasons
cross
cross
origin
origin
resource
resource
sharing,
sharing
or
or
cores,
cores
is
is
disabled.
disabled
We
we
we
we
can
can
pass
pass
an
an
object
object
as
as
a
a
second
second
argument,
argument
and
and
we'll
we'll
set
set
the
the
core's
core's
origin
origin
to
to
anything,
anything
allowing
allowing
any
any
URL
url
to
to
access
access
our
our
back
back
end
end
URL.
url
And
and
now
now
we
we
can
can
implement
implement
the
the
logic
logic
for
for
Socket.
socket
Io.
io
Just
just
like
like
WebSockets,
websockets
it's
it's
an
an
event
event
based
based
system,
system
and
and
the
the
first
first
event
event
you'll
you'll
likely
likely
want
want
to
to
listen
listen
for
for
is
is
the
the
connection
connection
of
of
a
a
client
client
from
from
the
the
front
front
end.
end
The
the
callback
callback
will
will
give
give
us
us
access
access
to
to
the
the
socket
socket
object.
object
And
and
on
on
that
that
socket,
socket
we
we
can
can
listen
listen
to
to
any
any
custom
custom
event
event
we
we
want.
want
But
but
for
for
simplicity,
simplicity
we'll
we'll
just
just
call
call
it
it
the
the
message
message
event.
event
When
when
an
an
event
event
is
is
emitted,
emitted
we'll
we'll
have
have
access
access
to
to
the
the
data,
data
which
which
might
might
be
be
a
a
JavaScript
javascript
object
object
or
or
a
a
string,
string
and
and
we
we
can
can
handle
handle
it
it
inside
inside
the
the
callback
callback
here.
here
In
in
this
this
case,
case
it'll
it'll
be
be
a
a
string,
string
which
which
we
we
can
can
console
console
log.
log
And
and
because
because
we
we
have
have
multiple
multiple
clients
clients
listening
listening
to
to
the
the
message
message
event,
event
we
we
can
can
then
then
re
re
emit
emit
the
the
message
message
so
so
it's
it's
broadcast
broadcast
out
out
to
to
everybody.
everybody
We
we
can
can
do
do
that
that
with
with
the
the
IO
io
emit
emit
method,
method
and
and
then
then
we'll
we'll
pass
pass
message
message
as
as
the
the
event
event
name,
name
and
and
then
then
whatever
whatever
custom
custom
text
text
or
or
data
data
we
we
want
want
to
to
pass
pass
as
as
the
the
second
second
argument,
argument
and
and
that's
that's
basically
basically
all
all
there
there
is
is
to
to
it.
it
It's
it's
a
a
very
very
simple
simple
event
event
based
based
system.
system
The
the
final
final
piece
piece
of
of
code
code
we
we
need
need
here
here
though
though
is
is
to
to
tell
tell
our
our
server
server
to
to
listen
listen
on
on
port
port
8080.
8080
Then
then
you
you
can
can
open
open
up
up
the
the
terminal
terminal
and
and
call
call
node
node
and
and
point
point
it
it
to
to
this
this
file
file
to
to
run
run
the
the
script
script
and
and
start
start
your
your
Socket
socket
IO
io
server.
server
And
and
now
now
we're
we're
ready
ready
to
to
move
move
on
on
to
to
the
the
front
front
end
end
code
code
in
in
our
our
app
app
directory
directory
here.
here
If
if
we
we
open
open
up
up
the
the
index
index
HTML
html
file,
file
you'll
you'll
notice
notice
I
i
have
have
a
a
script
script
tag
tag
here
here
pointing
pointing
to
to
the
the
socket
socket
I
i
o
o
CDN
cdn
for
for
version
version
3
3
point
point
o.
o
It's
it's
very
very
important
important
to
to
understand
understand
that
that
socket
socket
I
i
o
o
is
is
not
not
a
a
direct
direct
WebSocket
websocket
implementation,
implementation
which
which
means
means
you
you
can't
can't
just
just
use
use
the
the
built
built
in
in
WebSocket
websocket
class
class
in
in
the
the
browser.
browser
Instead,
instead
you
you
have
have
to
to
use
use
the
the
socket
socket
IO
io
client
client
library,
library
which
which
which
which
we're
we're
doing
doing
here
here
through
through
the
the
CDN,
cdn
but
but
you
you
can
can
also
also
install
install
it
it
with
with
NPM
npm
and
and
bundle
bundle
it
it
into
into
your
your
project
project
if
if
you're
you're
using
using
something
something
like
like
React
react
or
or
Angular.
angular
After
after
that,
that
we
we
have
have
a
a
script
script
pointing
pointing
to
to
the
the
app
app
dotjs
dotjs
file,
file
which
which
is
is
our
our
custom
custom
source
source
code,
code
and
and
I'm
i'm
using
using
the
the
defer
defer
attribute
attribute
to
to
make
make
sure
sure
it
it
loads
loads
after
after
the
the
body
body
content.
content
Then
then
in
in
the
the
body
body
itself,
itself
I
i
have
have
an
an
unordered
unordered
list,
list
which
which
is
is
where
where
our
our
chat
chat
messages
messages
will
will
appear.
appear
And
and
then
then
below
below
that,
that
I
i
have
have
an
an
input
input
for
for
the
the
user
user
to
to
type
type
a
a
message
message
and
and
a
a
button
button
to
to
send
send
it,
it
and
and
now
now
we
we
can
can
move
move
over
over
to
to
our
our
JavaScript
javascript
file.
file
The
the
IO
io
object
object
will
will
now
now
be
be
globally
globally
available
available
in
in
the
the
browser,
browser
which
which
is
is
the
the
socket
socket
IO
io
client
client
library.
library
We
we
can
can
create
create
the
the
connection
connection
by
by
pointing
pointing
to
to
the
the
URL
url
of
of
our
our
server,
server
which
which
is
is
local
local
host
host
8080.
8080
And
and
now
now
we're
we're
ready
ready
to
to
start
start
listening
listening
to
to
events.
events
By
by
calling
calling
socket
socket
on,
on
we
we
can
can
listen
listen
to
to
the
the
message
message
event
event
emitted
emitted
by
by
the
the
server,
server
and
and
we
we
can
can
use
use
some
some
imperative
imperative
browser
browser
APIs
apis
here
here
to
to
create
create
a
a
new
new
list
list
item
item
element
element
and
and
then
then
append
append
that
that
item
item
to
to
the
the
unordered
unordered
list
list
in
in
our
our
HTML,
html
and
and
that's
that's
all
all
it
it
takes
takes
to
to
create
create
a
a
feed
feed
of
of
messages
messages
in
in
the
the
UI.
ui
The
the
only
only
thing
thing
left
left
to
to
do
do
is
is
give
give
the
the
user
user
the
the
ability
ability
to
to
send
send
a
a
message.
message
We
we
can
can
handle
handle
that
that
by
by
listening
listening
to
to
the
the
click
click
event
event
on
on
a
a
button.
button
When
when
clicked,
clicked
we'll
we'll
grab
grab
the
the
text
text
or
or
the
the
value
value
from
from
the
the
input
input
element,
element
and
and
then
then
we'll
we'll
call
call
socket
socket
emit
emit
with
with
the
the
message
message
event
event
and
and
the
the
text.
text
Congratulations.
congratulations
You
you
just
just
built
built
a
a
real
real
time
time
chat
chat
app
app
with
with
socket.
socket
Io.
io
Obviously,
obviously
there's
there's
a
a
lot
lot
more
more
to
to
building
building
real
real
time
time
features
features
in
in
the
the
real
real
world.
world
Events
events
get
get
emitted,
emitted
and
and
then
then
you
you
listen
listen
to
to
events
events
and
and
handle
handle
them
them
accordingly
accordingly
with
with
functions.
functions
Now
now
before
before
we
we
finish
finish
up,
up
there's
there's
one
one
last
last
thing
thing
I
i
wanna
wanna
talk
talk
about,
about
and
and
that's
that's
the
the
relationship
relationship
between
between
WebSockets
websockets
and
and
other
other
APIs
apis
like
like
WebRTC
webrtc
and
and
a
a
new
new
experimental
experimental
API
api
called
called
WebTransport.
webtransport
1st,
1st
let's
let's
talk
talk
about
about
WebRTC,
webrtc
which
which
stands
stands
for
for
real
real
time
time
communication.
communication
It's
it's
also
also
a
a
tool
tool
for
for
building
building
real
real
time
time
experiences.
experiences
However,
however
it's
it's
geared
geared
towards
towards
browser
browser
to
to
browser
browser
communication,
communication
primarily
primarily
for
for
video
video
and
and
voice.
voice
If
if
you're
you're
building
building
a
a
video
video
chat
chat
app
app
like
like
Zoom,
zoom
you
you
probably
probably
want
want
WebRTC
webrtc
and
and
not
not
WebSockets.
websockets
And
and
another
another
new
new
API
api
that
that
people
people
have
have
started
started
talking
talking
about
about
is
is
WebTransport.
webtransport
And
and
without
without
getting
getting
into
into
the
the
details,
details
it's
it's
basically
basically
a
a
better
better
version
version
of
of
WebSockets.
websockets
Faster
faster
handshake,
handshake
better
better
reliability,
reliability
and
and
stuff
stuff
like
like
that.
that
Its
its
proposal
proposal
is
is
still
still
being
being
stabilized,
stabilized
so
so
nothing
nothing
you
you
need
need
to
to
know
know
today,
today
but
but
just
just
something
something
to
to
have
have
on
on
the
the
radar
radar
for
for
the
the
future.
future
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
Consider
consider
sponsoring
sponsoring
me
me
on
on
GitHub
github
or
or
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip
fireship
IO.
io
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss the use of WebSockets and the implementation of a low latency, multi-channel communication system for real-time data. They also discuss the use of a web browser and APIs, including a full duplex connection between a client and a server. The process of building a front end code for a web app, including importting socket IO and setting the core's origin to anything, is discussed, along with the benefits of using WebRTC and the use of Web Ramirez for building real time experiences. They also mention a new API called Web Ramirez and its use for building real time experiences.
WebSockets in 100 Seconds & Beyond with Socket.io
WebSockets. Build real time features by establishing a two way connection between a client and a server. Imagine an online multiplayer game where the leaderboard is constantly changing on the server. Now what's the best way to show the player an updated leaderboard? We could tell them to refresh their browser window every few minutes to send a new HTTP request, or we could use an interval that ticks every few seconds to pull the server for new data. But these options aren't ideal for real time data and that's where WebSockets come in. The first step is for the client to send an HTTP request to the server asking to open a connection. If the server agrees, it will send a one zero one switching protocols response, at which point the handshake is complete. The TCP IP option is left open, allowing bidirectional messages to pass between the 2 parties with very low latency. The connection will stay open until one of the parties drops off, then the TCP resources can be unallocated. It's often referred to as a full duplex connection, which is a telecommunications term that defines how a phone line works where both parties can send messages or talk at the same time. Let's see this in action by creating a real time connection between a Node. Js a server, and a web browser. We'll start in our back end code by building a WebSocket server with Node. Js. Using the ws library, We can instantiate a new server on port 8080. Everything is event based, and the first event we can expect to happen is a connection from the client. When the connection is made, we'll have access to a WebSocket object in the callback. With the initial handshake done, there are 2 things we might wanna do here. We can listen to incoming messages, which would just be text in this case, and then handle them accordingly in the callback. The second thing we might do is send a message back to the client, which we can do with the send method. Now let's take a look at our client side code in the browser, which has a built in WebSocket a clasp. It's instantiated with a URL that points to the server, but notice the w s protocol. That will automatically trigger the Handshake, to open the connection, which we can listen to as an event. Just like on the server, we can use the socket to both listen to and send messages. And we now have a full duplex connection between a front end JavaScript app and a node back end. This has been WebSockets in 100 seconds, but if you want to learn more, make sure to stay tuned. Because today, we're going beyond 100 seconds to learn all about a library called Socket. Io and look at a couple of APIs that might replace WebSockets in the future. But first, make sure to like and subscribe. And if you're into real time apps, check out my Firebase content on Fireship IO. Now one of the issues that is not so obvious with our current implementation is that the server cannot broadcast a message out to multiple clients simultaneously. Like, for example, a group chat room where you have multiple users passing messages back and forth. It's definitely possible to build something like that from scratch with websockets, but there are libraries, like socket I o in this case, that can make features like that much easier to implement. You can think of a web socket as a low level building block, where socket IO is a more practical library that solves common use cases and provides failovers to different protocols when needed. If you're building something real time, there are many different options out there. You might look into Firebase, Apollo GraphQL, or an API like Pusher. Once you bring a database into the equation, real time features can become very complex, and using a paid service can be well worth the money in my opinion. In any case, Let's go ahead and get started with our socket IO project. At this point, you can open up Versus Code to follow along and access the source code on GitHub. What we're going to build here is a bare minimum implementation of a group chat room. When a user opens up the app, they can post a message, and anybody else on that same URL can view the message. And, again, one of the big differences from the previous implementation is that the message will be broadcast to all of the connected clients. As you can see in our code, we have a directory for server and app. Server is the back end, app is the front end. In the server directory, we'll initialize an npm project by running npm init y. Then we only require one dependency, which is socket IO, and we can install it with npm. Now in the index JS file, we need to create an HTTP server. We can do that using the built in HTTP library in Node by importing it, then calling the create server method. However, it is worth noting that you might want to use express here instead, which is a much more popular option for building an HTTP server. The next step is to import socket IO, which is a function, and it will take our HTTP server object as an argument. But in this demo, we'll be accessing the back end from a front end browser application. But for security reasons, cross origin resource sharing, or cores, is disabled. We we can pass an object as a second argument, and we'll set the core's origin to anything, allowing any URL to access our back end URL. And now we can implement the logic for Socket. Io. Just like WebSockets, it's an event based system, and the first event you'll likely want to listen for is the connection of a client from the front end. The callback will give us access to the socket object. And on that socket, we can listen to any custom event we want. But for simplicity, we'll just call it the message event. When an event is emitted, we'll have access to the data, which might be a JavaScript object or a string, and we can handle it inside the callback here. In this case, it'll be a string, which we can console log. And because we have multiple clients listening to the message event, we can then re emit the message so it's broadcast out to everybody. We can do that with the IO emit method, and then we'll pass message as the event name, and then whatever custom text or data we want to pass as the second argument, and that's basically all there is to it. It's a very simple event based system. The final piece of code we need here though is to tell our server to listen on port 8080. Then you can open up the terminal and call node and point it to this file to run the script and start your Socket IO server. And now we're ready to move on to the front end code in our app directory here. If we open up the index HTML file, you'll notice I have a script tag here pointing to the socket I o CDN for version 3 point o. It's very important to understand that socket I o is not a direct WebSocket implementation, which means you can't just use the built in WebSocket class in the browser. Instead, you have to use the socket IO client library, which which we're doing here through the CDN, but you can also install it with NPM and bundle it into your project if you're using something like React or Angular. After that, we have a script pointing to the app dotjs file, which is our custom source code, and I'm using the defer attribute to make sure it loads after the body content. Then in the body itself, I have an unordered list, which is where our chat messages will appear. And then below that, I have an input for the user to type a message and a button to send it, and now we can move over to our JavaScript file. The IO object will now be globally available in the browser, which is the socket IO client library. We can create the connection by pointing to the URL of our server, which is local host 8080. And now we're ready to start listening to events. By calling socket on, we can listen to the message event emitted by the server, and we can use some imperative browser APIs here to create a new list item element and then append that item to the unordered list in our HTML, and that's all it takes to create a feed of messages in the UI. The only thing left to do is give the user the ability to send a message. We can handle that by listening to the click event on a button. When clicked, we'll grab the text or the value from the input element, and then we'll call socket emit with the message event and the text. Congratulations. You just built a real time chat app with socket. Io. Obviously, there's a lot more to building real time features in the real world. Events get emitted, and then you listen to events and handle them accordingly with functions. Now before we finish up, there's one last thing I wanna talk about, and that's the relationship between WebSockets and other APIs like WebRTC and a new experimental API called WebTransport. 1st, let's talk about WebRTC, which stands for real time communication. It's also a tool for building real time experiences. However, it's geared towards browser to browser communication, primarily for video and voice. If you're building a video chat app like Zoom, you probably want WebRTC and not WebSockets. And another new API that people have started talking about is WebTransport. And without getting into the details, it's basically a better version of WebSockets. Faster handshake, better reliability, and stuff like that. Its proposal is still being stabilized, so nothing you need to know today, but just something to have on the radar for the future. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. Consider sponsoring me on GitHub or becoming a pro member at FireShip IO. Thanks for watching, and I will see you in the next one.
The speakers discuss the use of WebSockets and the implementation of a low latency, multi-channel communication system for real-time data. They also discuss the use of a web browser and APIs, including a full duplex connection between a client and a server. The process of building a front end code for a web app, including importting socket IO and setting the core's origin to anything, is discussed, along with the benefits of using WebRTC and the use of Web Ramirez for building real time experiences. They also mention a new API called Web Ramirez and its use for building real time experiences.