Socket.io v4 or websockets in 2023 - which should you use? - socket.io #1
Summary
TLDRIn 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
🌞 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.
📚 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.
🔍 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.
Mindmap
Keywords
💡Socket.IO
💡WebSockets
💡HTTP Polling
💡Automatic Reconnection
💡Packet Buffering
💡Acknowledgments
💡Broadcasting
💡Multiplexing
💡Real-time Communication
💡Event-based Communication
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
関連動画をさらに表示
Polling vs WebSockets vs Socket.IO (Simple Explanation) - Chat App Part11
In 5 minutes Unlock the API powers REST gRPC GraphQL Websocket SOAP #api #restapi #graphql #soap
What is WebSocket? Why is it used & how is it different from HTTP?
How The Web Works - The Big Picture
What are WebSockets? How is it different from HTTP?
How Web Sockets work | Deep Dive
5.0 / 5 (0 votes)