Socket.io v4 or websockets in 2023 - which should you use? - socket.io #1

Summary

In this video, the instructor discusses the significance of Socket.IO and WebSockets within the context of a programming course, particularly focusing on the rationale behind emphasizing Socket.IO over WebSockets, even in 2023. The instructor introduces Socket.IO as a library that facilitates low latency, bi-directional, and event-based communication between clients and servers, contrasting it with the traditional HTTP request-response model. The discussion includes the benefits of Socket.IO, such as automatic reconnection, packet buffering, and multiplexing, which are not inherently supported by WebSockets. The instructor concludes by affirming Socket.IO's continued relevance and efficiency in implementing WebSockets, emphasizing its comprehensive features that still make it the preferable choice for real-time applications.

Takeaways

• 💻 The video introduces the concepts of Socket.IO and WebSockets, aiming to clarify their roles and significance in real-time web communication.
• 🔥 Socket.IO is emphasized as the primary focus of the course, even in 2023, highlighting its importance over native WebSockets for certain applications.
• ⏰ If it's not morning where viewers are, the narrator humorously notes it's morning somewhere, setting a light-hearted tone for learning about Socket.IO.
• 📰 Socket.IO facilitates low latency, bi-directional, and event-based communication between clients and servers, differing from traditional HTTP request-response cycles.
• ✍️ WebSockets provide a two-way communication channel that remains open for real-time updates, a capability also supported by Socket.IO but with additional features.
• 📊 Socket.IO builds upon WebSockets, offering solutions for real-world issues such as connection reliability and data packet management.
• ⚠️ The video explains the historical necessity of Socket.IO as a layer over WebSockets to handle inconsistencies and limitations in early WebSocket implementations.
• 📚 Through examples, the video demonstrates Socket.IO's additional features like automatic reconnection, event acknowledgments, and room-based broadcasting which are not natively supported by WebSockets.
• 🔍 Socket.IO's relevance in 2023 is justified by its abstraction layer, providing robust solutions to common WebSocket challenges without requiring developers to reinvent the wheel.
• ✅ The course promises to cover both Socket.IO and WebSockets, comparing them directly to showcase why Socket.IO remains the preferred choice for real-time web applications.

Q & A

What is the main purpose of this video?

The main purpose of this video is to explain the relationship between Socket.IO and WebSockets, and to justify why the course will primarily focus on Socket.IO over plain WebSockets.

What is the key difference between HTTP and Socket.IO/WebSockets?

HTTP is a request-response protocol where connections are terminated after each request, while Socket.IO and WebSockets establish a persistent, bi-directional connection between the client and server, enabling real-time communication without the need to re-establish connections.

Is the WebSocket API a native technology in JavaScript?

Yes, the WebSocket API is a native technology in JavaScript, meaning it is built into the language and does not require any additional libraries or frameworks to be used.

Why was Socket.IO created initially?

Socket.IO was created in 2010 to bring order and consistency to the chaos surrounding WebSockets at the time when browser support for WebSockets was in its infancy and often unreliable.

What are some key features that Socket.IO provides over plain WebSockets?

Some key features that Socket.IO provides over plain WebSockets include HTTP long-polling fallback, automatic reconnection, packet buffering, acknowledgments, broadcasting, and multiplexing.

Is Socket.IO still needed today, given the widespread support for WebSockets?

According to the video, Socket.IO is still considered the best way to implement WebSockets in 2023, as plain WebSockets may eventually require developers to build in many of the features that Socket.IO already provides out of the box.

What is the speaker's approach regarding Socket.IO and WebSockets?

The speaker's approach, even in 2023, is to focus primarily on Socket.IO as the best way to implement WebSockets, as it provides a more robust and feature-rich solution compared to implementing plain WebSockets directly.

What is the structure of the course mentioned in the video?

The course will start with some network talk, followed by a WebSocket implementation, a comparison between WebSockets and Socket.IO, and then dive into making projects using Socket.IO as the primary focus.

What is the purpose of the broadcasting feature in Socket.IO?

The broadcasting feature in Socket.IO allows you to send a message to all clients (WebSockets) connected to the server, or to a subset of clients, without having to write loops or additional code to handle this functionality.

What is the advantage of the multiplexing feature in Socket.IO?

The multiplexing feature in Socket.IO allows you to have a single connection for multiple purposes, similar to how a phone line can handle multiple calls simultaneously, without the need to establish separate WebSocket connections for each purpose.

Outlines

00:00

🌞 Introduction to Socket.IO and WebSocket in the Course Context

The opening paragraph sets the stage for a discussion about the significance of Socket.IO and WebSocket technologies in the course. It aims to clarify their roles and justify the focus on Socket.IO, emphasizing its relevance even in 2023. The instructor, acknowledging the possible eagerness of learners to dive into technical aspects, suggests that understanding the rationale behind the course's structure is beneficial. This introduction serves to prepare learners for what to expect, highlighting the decision to concentrate on Socket.IO due to its comprehensive features, despite also providing a brief overview of WebSocket for a foundational understanding.

05:02

📚 Exploring the Evolution and Comparison of WebSocket and Socket.IO

This segment delves into the historical context and technical nuances of WebSocket and Socket.IO, illustrating their evolution and current relevance. The instructor discusses how WebSocket, a native JavaScript API, offers basic real-time communication capabilities but lacks features like automatic reconnection and data packet management that Socket.IO, a library built on top of WebSocket, provides. The narrative explores the initial necessity of Socket.IO as a stabilizing layer over the inconsistent WebSocket implementations across browsers and its continued utility in addressing specific challenges not solved by WebSocket alone, such as compatibility issues, automatic reconnection, and enhanced communication features. The comparison subtly underscores Socket.IO's added value over plain WebSocket, especially in scenarios requiring robust, real-time, bi-directional communication.

10:04

🔍 Why Socket.IO Remains Relevant in 2023

The concluding paragraph reaffirms the enduring relevance of Socket.IO for implementing real-time web applications, even as WebSocket technology matures. It articulates the premise that while WebSocket now supports features once exclusive to Socket.IO, like binary data transmission, the comprehensive suite of functionalities that Socket.IO offers—ranging from fallback mechanisms for incompatible environments to features enhancing reliability and flexibility of communication—solidifies its superiority. The instructor posits that developers opting for raw WebSocket might eventually need to recreate Socket.IO's features, effectively reiterating the library's continued relevance and advocating for its use as a more pragmatic approach to real-time web communication in 2023.

Keywords

💡Socket.IO

Socket.IO is a JavaScript library that enables low-latency, bi-directional, and event-based communication between a client (typically a web browser) and a server. It was built on top of the WebSocket protocol and provides additional features like automatic reconnection, packet buffering, broadcasting, and multiplexing. In the video, Socket.IO is presented as the primary focus, with the narrator arguing that even in 2023, it remains the best way to implement WebSockets due to its enhanced capabilities.

💡WebSockets

WebSockets is a native JavaScript technology that allows for two-way, interactive communication sessions between a client and a server. Unlike traditional HTTP requests, which are terminated after the server's response, WebSockets establish a persistent connection, enabling real-time, event-driven communication without the need for constant polling or establishing new connections. The video compares WebSockets to Socket.IO, highlighting that while WebSockets is a native technology, Socket.IO provides additional features that may still be necessary in 2023.

💡HTTP Polling

HTTP Polling is a technique used in web applications to simulate real-time communication by periodically sending HTTP requests from the client to the server to check for updates or new data. It is a fallback mechanism used by Socket.IO when WebSockets are not supported or cannot be established, ensuring that the application can still function, albeit with higher latency and more overhead. The video mentions HTTP polling as one of the features provided by Socket.IO over plain WebSockets.

💡Automatic Reconnection

Automatic reconnection is a feature provided by Socket.IO that allows it to detect if a WebSocket connection has been lost and automatically attempt to re-establish the connection. This is beneficial as WebSockets themselves do not have a built-in mechanism for detecting disconnections, which can lead to clients displaying stale data. The video highlights automatic reconnection as one of the advantages of using Socket.IO over plain WebSockets.

💡Packet Buffering

Packet buffering is a feature of Socket.IO that ensures data packets are not lost during the reconnection process. When a connection is temporarily lost, Socket.IO will buffer any packets that need to be sent until the connection is re-established, at which point it will send those buffered packets. This prevents data loss and maintains the integrity of the communication. The video mentions packet buffering as another advantage of using Socket.IO over plain WebSockets.

💡Acknowledgments

Acknowledgments in Socket.IO allow for guaranteed delivery of messages between the client and server. When a message is sent, the sender can request an acknowledgment, which triggers a callback function on the receiving end to confirm that the message was received. This feature enables reliable communication and provides the ability to take action upon message delivery. The video presents acknowledgments as a valuable feature of Socket.IO that is not natively available in WebSockets.

💡Broadcasting

Broadcasting is a feature of Socket.IO that allows a message to be sent simultaneously to multiple connected clients or a subset of clients. This can be useful in scenarios like real-time updates, where the same information needs to be pushed to multiple recipients at once. The video highlights broadcasting as a capability that Socket.IO provides out-of-the-box, whereas implementing it with plain WebSockets would require additional code and complexity.

💡Multiplexing

Multiplexing in Socket.IO enables a single connection to be used for multiple purposes or channels of communication. This is analogous to a phone line carrying multiple phone calls simultaneously, rather than requiring a separate connection for each purpose. The video presents multiplexing as a feature that simplifies the management of multiple communication channels, whereas with plain WebSockets, separate connections would need to be established for different purposes.

💡Real-time Communication

Real-time communication refers to the ability to exchange data or messages instantly, without significant delays or the need for periodic polling. Both Socket.IO and WebSockets are designed to enable real-time communication between clients and servers, allowing for responsive, interactive applications. The video emphasizes the importance of real-time communication and positions Socket.IO and WebSockets as technologies that facilitate this capability.

💡Event-based Communication

Event-based communication is a paradigm where data is exchanged through the emission and handling of events. Both Socket.IO and WebSockets follow this approach, allowing clients and servers to send and receive messages based on specific events occurring. The video highlights event-based communication as a key characteristic of these technologies, enabling dynamic, reactive communication patterns in web applications.

Highlights

Socket IO is a library that enables low latency, bi-directional and event-based communication between a client and a server.

With socket IO and websockets, a connection is established between the client and server, allowing real-time communication without the need to establish a new connection for each message.

The websocket API is a native technology in JavaScript, while Socket IO is a library built on top of the WebSocket protocol.

Socket IO was created to bring order to the chaos when WebSockets had poor browser support and compatibility issues in the early days.

Socket IO uses WebSockets as the primary transport whenever possible but provides additional features like HTTP long polling fallback, automatic reconnection, packet buffering, acknowledgments, broadcasting, and multiplexing.

Although WebSockets now have better support, using plain WebSockets eventually leads to needing to build the additional features that Socket IO already provides.

The speaker's approach, even in 2023, is that Socket IO is still the best way to implement WebSockets due to its robust features and active development community.

The course will focus primarily on Socket IO after initially covering some network fundamentals and a WebSocket implementation for comparison.

HTTP is a request-response model where the connection is terminated after each response, like a text message conversation.

WebSockets were available in Chrome 4 (2009), but Socket IO was created in 2010 due to WebSockets' poor support and compatibility issues at the time.

Socket IO's HTTP long polling fallback feature allows it to work even when WebSockets are not supported or misconfigured.

Socket IO's automatic reconnection feature includes a heartbeat mechanism to detect disconnections and automatically reconnect with exponential back-off delay for packet buffering.

Socket IO's acknowledgments feature allows for guaranteed delivery and running code when events happen.

Socket IO's broadcasting feature enables sending messages to all connected clients or a subset of clients, which would require additional coding with plain WebSockets.

Socket IO's multiplexing feature allows for a single connection to be used for multiple purposes, unlike with plain WebSockets where separate connections would be needed.

Transcripts

good morning developers if it's not

morning where you are it is morning

somewhere and it is definitely a good

morning to learn some socket IO

the course has the word socket IO and

websocket in the title so the question

is where do they both belong with regard

to the course so the purpose of this

video is to try and answer that question

early rather than later there is a video

later on in the course that will go into

more detail but I want to want to put it

up front here so you know what to expect

and make my case for why the bulk of the

course will focus on socket IO even in

2023 we won't cover any technical or

implementation details in this video so

if you're itching to get started and hey

Rob I don't care about any of this just

teach me and I'll learn then you can

skip this video of course I put it in

the course for a reason so I think it's

worth having a listen to

so assuming you decided to stick around

if the course has version 4 in the title

then the main value here is going to be

again my case for why I'm going to focus

on socket IO and less on websockets if

there's version two you'll get that plus

you'll also just get an update on where

both Technologies are at in 2023 as

opposed to 2018 when the course was

originally released I'm on the socket IO

homepage here and you can see up top

we've got uh four X's out and again we

we started on 2X

if I click on documentation it takes us

to this introduction page and at the top

here if you don't have any idea what

either technology is we'll talk about it

here just real quick socket IO is a

library that enables low latency

bi-directional and event-based

communication between a client and a

server so they got this cool drawing

here HTTP which you're very used to

right the browser or maybe using axios

or the fetch API something like that

will send a request to the server the

server handles the request and sends a

response back and then the connection is

terminated that is the end of the that

HTTP request if you want more

information you need to make a new one

which is no big deal right send a new

request get a new response things are

done kind of like a text message where

you might be texting a vote or or some

message to a system where you send it

over the server sends it back and then

your connection or your Communications

over unless you send something new

that's the end of the conversation

with socket i o and then websockets they

are connected all the time so we

establish a connection here on the

client with the server and it's more

like a telephone call where if either

side has something to say they just say

there's no reason to to connect because

you're already connected there's no

reason for the client to have to say

something first the server can say

something first you get the idea okay

it's real-time communication if for any

reason you need real-time updates going

either way without having to establish a

connection that's what socket IO and web

sockets are for so low latency

bi-directional and event based I'm going

to hop over here to the websocket API

page I've got the mdn web docs up and

the websocket API is an advanced

technology we'll hit this later but you

should take a nice deep breath and

congratulate yourself you're using an

advanced technology

good stuff that makes it possible to

open a two-way

bi-directional

interactive communication session

between the user's browser and the

server with this API you can send

messages to a server and receive

event-driven responses

event based

without having to pull the server for a

reply this last one's a little bit weak

but pull the server for reply I'm going

to compare to low latency okay so web

sockets and socket IO are claiming to do

pretty much the same thing

of these two the websocket API is the

native technology to JavaScript so I've

got the console open here we can do

console.log web socket hit enter I have

an npm installed anything no script tags

anything this is native to the browser

right this is built into JavaScript if

you get JavaScript you've got websockets

I can't do the same thing with socket IO

that does not exist here okay we'll try

any rendition of it that you want

sockets are not part of JavaScript okay

so the reason this is important is

because for those of you like me I

prefer to use the thing that's closer to

the metal right the native thing if I

can for instance I prefer to use

JavaScript natively rather than using

jQuery if possible because jQuery is a

bigger library and it just takes up more

time more resources Etc okay

is it worth using the new thing or the

other thing as an add-on to the native

technology in this case that is Socket

IO

well for jQuery it definitely was in

2006 because the web was a total

disaster you had no idea what JavaScript

was going to do in a given browser but

jQuery standardized that

is jQuery still necessary in 2023 well I

hardly ever use it anymore because

JavaScript has come so far

it's still it's still on like 95 percent

of websites I think that use JavaScript

but I don't really use anymore because I

don't need it anymore is that the

relationship that we have between socket

IO and websockets as web sockets come

far enough to where we don't need socket

i o anymore and I'll show you quick on

the websocket page if we scroll down to

the bottom here under browser

compatibility

websockets were available in Chrome 4

Chrome 4. that goes back to 2009 I

believe if I check Google Chrome as of

the making of this video they're on 108

so we've hit Triple digits so this is a

long time ago socket IO came out the

next year in 2010 because web sockets

were like JavaScript in the mid-2000s

kind of a disaster it seemed like it

never worked like I was so excited to

try it but it almost never never seemed

to work soccer IO brought some order to

that chaos just like jQuery well has

socket IO been replaced in 2023 by

websockets well we're going a real quick

look at at the socket i o docs here

first things first up at the top here

socket eye was built on top of the

websocket protocol okay it does some

additional stuff and we scroll down a

little bit here to what sakanio is not

it says right here although socket i o

indeed uses websocket for transport

we'll talk about what transport is in

the next section whenever possible okay

so it will use websockets if it can

but sometimes it can so scroll down a

little bit further to features

here are the features provided by socket

IO over plain web sockets okay HTTP

polling long polling fallback we'll talk

about that later you don't don't need to

worry about what it is this was the main

reason that I wanted it and everybody

else wanted it back in 2010. it was very

common for websockets to not be

supported and right it says here the

browser support was in its infancy

we're past that right 97 of browsers now

support websockets

but this is still a good feature because

sometimes you get proxies that are

misconfigured or other weird things

where things just don't work and you

have no idea why and this will work when

websockets doesn't okay next thing

automatic reconnection this is something

a websocket doesn't do websockets

sometimes will disconnect and the server

and the client don't know that it's

disconnected and so the user's looking

at stale data okay if you need that to

never happen socket IO has a heartbeat

mechanism which will check to see if

we're connected or not and if we're

disconnected it will automatically

reconnect okay and it has this is just

extra awesome exponential back off delay

meaning it will slowly send the stuff

back in order once the connection is

re-established so this is an add-on you

get with socket IO that you don't get

with websockets go down a little farther

packet buffering this is good this has

to do with how the packets are sent up

after you're reconnected you can read

about it we're not going to spend time

on know

acknowledgments Sakurai will give you

the ability to guarantee that the other

side got it or you can take action so

the sender let's say it's the browser

says Hey server hello world and then the

server will run this hey I got it that

gives you the ability to run some code

when an event happens right via

acknowledgments

if we scroll down a little bit further

broadcasting this is something that I

use quite a bit

it allows you to send a message to every

websocket connected to the server or a

socket connected to the server you can

do this in websockets but right it's a

little bit messy writing Loops or

however you might try and solve it

you can also do it to a subset of

clients which socket IO will keep track

of for you and then lastly here in the

list is multiplexing this allows you to

have a single connection

for a bunch of purposes so you can think

about this like a phone line a phone

line might have a thousand phone calls

on it at any given moment you don't need

a thousand phone lines one for each one

for each call you do have to do that

with websockets you'd have to connect if

you wanted say like an admin section

you'd need a connection for that and

then you could communicate on that you'd

have to initiate a second websocket

connection for another room which is

maybe your main room

we scroll down a little bit further is

Sakurai still needed today well that's a

fair question since websockets are

supported in most browsers

but and I will wholeheartedly stand

behind this if you if you use plain

websockets for your application

eventually you're probably going to need

to make all of this stuff

which means you're making socket IO and

that's silly because there are some

awesome developers all over the world

working on socket IO so that you don't

have to do this stuff okay so that's the

short answer as of for instance like why

this question is even relevant it used

to be that websockets did not support

passing binary data it does now that was

a socket i o feature that has gone away

now maybe these will be replaced someday

as the websocket API gets stronger and

stronger but at the moment you can

Implement native websockets but you're

probably going to get to the point where

you have to build these in

and you're going to end up making a

lousy version of socket IO my Approach

even in 2023 is that Sakurai oh is still

the best way to implement websockets

okay so that's where I stand that's what

you can expect the bulk of the course is

going to focus on soccer IO after we get

through a little bit of network talk we

will go through websocket implementation

we'll compare it to Sakurai and then

we'll get into uh into making the

projects thanks for watching