WebSockets Crash Course - Handshake, Use-cases, Pros & Cons and more

WebSockets technology is a bidirectional, full-duplex protocol for communication between client and server over the web. It has been standardized in 2011 and its fully compatible with HTTP. This protocol enables realtime applications such as chatting, notifications, live feed , multiplayer gaming and otheruse cases.
In this video we will explain what WebSockets are and why it was invented. we will then build a server and client using WebSockets. We will also talk about the pros and cons of WebSockets, and discuss some alternatives to this technology
Chapters
0:00 Intro
2:00 HTTP
5:40 WebSockets
8:00 WebSockets Handshake
11:20 WebSockets Usecases
14:30 WebSockets Example Code
36:40 WebSockets Pros and Cons
42:10 Do you have to use webSockets?
Source Code in the video for WebSockets
github.com/hnasr/javascript_p...
HTTP
* talk about request-response show a slide. Client initiate request all the time. Imagine building a chatting app?
WebSockets
- Slide showing bidrectional full duplex standard web
-
How WebSockets Work?
- WebSockets handshake
- Initial request is always HTTP which we all know creates a tcp connection, that request then http upgrade tells the server to use it as bidirectional.
- Once done switches to binary protocol.
- Ws:// wss:// protocol
WebSocket use cases
- Chatting
- Live feeds
- Multiplayer gaming
- Progress bar/ logging/ uploading..
- WebSockets example (Server/Client)
- WebServers Pros and Cons
Pros
1. Full-duplex no need for constant polling
2. compatible with HTTP, so proxies know to deal with it
3. Firewalls won’t block it doesn’t use a special port
Cons
1. Proxying is tricky, lots of proxies and transparent proxies don’t support it yet
2. Layer 7 load balancing is tricky, timeouts on the load balancer.
3. More complicated to implement (simple telnet use HTTP)
4. Not ideal for all use cases - (microservices)
- Do you have to use Web Sockets ? ( alternatives )
It is important to note that WebSockets is not the only HTTP realtime based solution, there are other ways to achieve real time such as eventsource, and long polling.
- Load Balancing with WebSockets (bonus)
- layer 4
- Layer 7 (tunnel)
Longpolling
Eventsource
WebSockets
Sources:
developer.mozilla.org/en-US/d...
www.ably.io/concepts/websockets
/ ljssosnw6y
blog.stanko.io/do-you-really-...
Cards
HTTP Crash Course • Hyper Text Transfer Pr...
TLS • Transport Layer Securi...
What is a Web Servers • What are web servers a...
Layer 4 vs Layer 7 Load Balancing • Load balancing in Laye...
Support my work on PayPal
bit.ly/33ENps4
Become a Member on KZbin
/ @hnasr
🧑‍🏫 Courses I Teach
husseinnasser.com/courses
🏭 Backend Engineering Videos in Order
backend.husseinnasser.com
💾 Database Engineering Videos
• Database Engineering
🎙️Listen to the Backend Engineering Podcast
husseinnasser.com/podcast
Gears and tools used on the Channel (affiliates)
🖼️ Slides and Thumbnail Design
Canva
partner.canva.com/c/2766475/6...
🎙️ Mic Gear
Shure SM7B Cardioid Dynamic Microphone
amzn.to/3o1NiBi
Cloudlifter
amzn.to/2RAeyLo
XLR cables
amzn.to/3tvMJRu
Focusrite Audio Interface
amzn.to/3f2vjGY
📷 Camera Gear
Canon M50 Mark II
amzn.to/3o2ed0c
Micro HDMI to HDMI
amzn.to/3uwCxK3
Video capture card
amzn.to/3f34pyD
AC Wall for constant power
amzn.to/3eueoxP
Stay Awesome,
Hussein

[@hnasr]

Guys Jump codes for your convenience, HTTP 2:00 WebSockets 5:40 WebSockets Handshake 8:00 WebSockets Usecases 11:20 WebSockets Example Code 14:30 WebSockets Pros and Cons 36:40 Do you have to use webSockets? 42:10 Stay awesome!

[@josepetoshi8135]

Greate course mate!

[@thanasisathanasi4965]

Man, every part of your video is really for us. Very well documented and comprehensive! The best I could find./

[@TheDroiDGch]

The best channel about computer science!! thank you so much for these wonderful and helpful videos!

[@reinohaider4239]

I need your help.. I need project for MSc computer network guys can any one help me!

[@computeering]

Can you please make a comprehensive video about keeping track of clients using Websockets?

[@truphenalwanga9829]

I always like it when a channel has the perfect balance of comedy and education. Subscribed! Great stuff!

[@hnasr]

Truphena Lwanga thanks ! Yeah hard to keep the balance. Do tell me if it gets little much. Any feedback helps. Enjoy the content. Cheers

[@langsonchibili1329]

THE FIRST 5 MINUTES INTO YOUR VIDEO MADE ME UNDERSTAND OVER 3 YEARS WORTH OF INFORMATION, U ARE A BLESSING Hussein Nasser

[@TheDesvendador]

I cant believe i found this channel, this kinda of content is gold, please keep it up, also gonna watch that one about nodejs and webservers

[@hnasr]

Thanks! Very happy your enjoying the content

[@parmvirsidhu7563]

I loved the way you start with WHY? then reasoning, when to use and when not to use, very practical approach to all the concepts. That helps in real life implementation decisions of the technology. Many Thanks for wonderful videos!

[@Gringo0517]

Love the conversational tone. Great video!

[@pragmaticsoftwareengineer7965]

excellent stuff mate. so glad I stumbled upon your channel.

[@marcosvalderrey5063]

Not every day I find great content that is also as engaging and entertaining as yours. Amazing job, Hussein!

[@tech3425]

I was on another channel watching some web sockets stuff. It's amazing how simple and easy you make stuff sound.

[@MrDeeb00]

The most passionate instructor I have ever seen. Thank you for this awesome video!

[@Akonitx]

Bro, your videos with so passion and emotions is really something unbelievable comparing to other plain content in inet. Thanks for your existing!

[@shahinbayat]

That was an amazing video, I didn't imagine to understand websockets this much comprehensive and with so much fun! keep going mate 👍

[@hnasr]

Appreciate you Sir! Thanks 😊 glad you enjoyed the content!

[@shahinbayat]

@@hnasr I can't stop enjoying the content you have created with such a great energy and giving them for free! That's amazing! I am suggesting your channel to everyone who is interested to learn about network with a simple language! 🙏

[@sajithtm4864]

You're such an amazing guy who brings out toughest concepts too simple. Keep doing Bro..👌

[@GoldenBeholden]

I love these very bare-bones tutorials; after all, once you understand the essence of an API, using it to build an application is just a matter of applying whatever programming experience you may already have.

[@hnasr]

👍👍

[@gnack420]

I gotta say, I love the way you present. It's very casual while still including a lot of information. Great video!

[@hnasr]

Nick Coad thanks! Glad you enjoy the content 😊

[@annyni6640]

Love your videos! Have never found anyone else who can teach better

[@molangdogma796]

I HAVE NEVER KNOWN A GUY AS INTELLIGENT AT EXPLAINING STUFF LIKE Hussein Nasser, MUCH THANKS TO YOU SIR.

[@hnasr]

Molang dogma Thank you for watching you humbled me ❤️

[@sumedh1771]

This is so awesome

[@connordelaney2536]

Thank you for taking the time to make this. :)

[@gussipp3]

if my career somehow took off it would be mostly because of you man, keep up the great content

[@shubhamkala5514]

for me it's really difficult to watch such a long videos but your way of explaining things is so good that no one can resist it.Do make a video on EventSource.

[@hnasr]

Thanks ! I really appreciate your feedback. It is hard to explain complex topic in short video that is why my lectures are long. i try to include time codes of table of contents.. EventSource is on the list! 👍 Thanks!

[@tech3425]

I love how you always show the tech in the browser(the webRTC video also comes to mind), making it seem so simple that you can type it out in the console. No need for so much tooling. This is literally the only channel I've seen that does it like this.

[@hnasr]

i find it easier for simple things plus everyone has a browser and can quickly do it. not to say editors are not useful of course.

[@tech3425]

@@hnasr knowingly or not, it greatly reduces the cognitive overhead for viewers when learning a new tech

[@TheMathematicalMan]

Thanks for the step-by-step guide!

[@chintukarthi1781]

thank you so much for the explanation. Really appreciate all your effort in making this video.

[@newtonsarr1234]

Your tutorials are just amazing. I love it.

[@youee1234]

Everything you publish is so pro! thanks for making our lives easier to grasp!

[@hnasr]

Thanks 😊 enjoy the content and let me know what you want to see next! Cheers and love

[@metinagaoglu4332]

Simple and very understandable.Thank you from Turkey, Hussein. I'm gonna watch your all videos.

[@hnasr]

Thank you Metin!!

[@naimurhasanrwd]

Clicked the video, and this guy started explaining with the topic right from 0.00000 seconds! No channel intro, no personal intro.

[@akashmocha4846]

Never felt learning was this "ENTERTAINING" before. More power to you❤️

[@hnasr]

❤️❤️❤️

[@thanasisathanasi4965]

This definitely gets a like and saved in my favorite videos. Best tutorial on the subject !!!!

[@hnasr]

Thanks!! Enjoy the content ☺️☺️

[@moneeshkumar1838]

Great Explanation Subscribed Keep posting

[@sailendrapavan3475]

I think Its better to search any topic in this channel first rather than wasting time in searching docs !!! Thanks Hussein Nasser 🤟

[@fuckthesystem4444]

Dude, ¡your content is AMAZING!

[@coolvjh]

Love your content. Keep them coming!

[@SachinKumar-js8yd]

Liked, subscribed. Your content is GOLD.

[@ajayraja1998]

the only video which explains very well thanks a lot brother

[@voxhominem]

damn that was actually helpful. I swear I've read 4 tutorials before now that couldn't have been harder to understand if they'd tried. you earned yourself a new subscriber my dude

[@hnasr]

Thank you Vox for watching and I am glad I earned your trust. Hopefully I deliver the content you enjoy cheers! thanks ..

[@shrestha0144]

I just love your teaching style

[@edwinroman30]

New subscriber. Awesome content and great explanation. I'm speechless many thanks for all and the recommended sources.

[@seems-legit]

You beautiful man, All other tutorials ive found have tried to make websockets seem like this dark mystic old gods tech that you haver to handle handshakes manually and send control frames. you got a subscriber

[@azazel-oss]

Love your content man, so full of information everytime I re-watch any of your long videos I always learn something new. Appreciate your work

[@AhmedAli-go7wx]

thanks, Nasser for this great content ...

[@kaloyangeorgiev6824]

Thank you very much, amazing explanation!

[@Mfbzai]

Apple need this guy, the speaking way is awesome.

[@mhh263]

Everyone thiinks Client-Server model is dead, but hey Hussein comes to rescue. Great stuff man 👍

[@zolika154]

literally had me laughing out loud like 3 times

[@JoaoRodrigues-yw3bh]

Amazing and timeless!!

[@alitariq7726]

Love your work. 👍👍👍

[@raffayhussain6717]

The great John Danaher says learning should be playful. When I see you, it reminds me of him.

[@briandines]

Excellent tutorial. You're funny which made this a little bit easier.

[@coutinhotiago]

Concerning the 2 TCP connections necessary to have redis pub/sub + req/rep: I believe that since redis RESP3 protocol (redis >=6) it possible to share both in the same TCP connection. BTW, it would be great to see you do a video on redis 6. Stay awesome 😎

[@massimoaristide8879]

Really easy and entertaining introduction.

[@jeppechristensen5707]

Thanks alot. You made me reconsider the EventSource API 🙂

[@jitpackjoyride]

This is such great content, thank you.

[@iyxan2340]

I just love this channel!

[@AvnishKumar-zf9km]

great explained everything. thank a lot bro.

[@stevemcguigan8359]

Been waiting for an ah-ha moment on this for a while and this was it. Subbed.

[@sourabhkumar6194]

Your tutorial really helped me, thanks

[@Beny123]

Brilliant job! thanks

[@taulantus]

i usually don't comment, but i have to give you the props for this amazing video. good job

[@hnasr]

Thanks for taking the time to comment! Appreciate it , glad I could help. have a beautiful day. 😊

[@kjahirhussain]

Love the explanation!

[@okage_]

pretty good video, i learnt alot! thank you

[@ayanSaha13291]

Thanks for the video. It helps.

[@Pablo-np2ny]

fantastic explanation, thanks!

[@rshaikh05]

jazakAllahu khair. keep up the good work.

[@richardmaduka4747]

I'm glad I found your channel, you are great at explaining concepts.

[@hnasr]

Thank you! I am glad too that the content is useful 🙏😊

[@ishdx9374]

Thanks for this video, I found it really easy interesting, since I'm working on a web game right now.

[@hnasr]

Amazing! Keep us up to date with the progress of your game. Cheers!

[@tech3425]

Dude your accent is perfect. Fuck everybody making fun of it. I literally enjoy the way you pronounce stuff differently

[@rodeschorpioen]

Cool and comprehensive video. thx and keep up the good work!

[@hnasr]

Thank you Wouter! 🙏

[@reemachourey9462]

Came here from your Spotify Podcast! Happy to find awesome content.

[@hnasr]

Thanks Reema!!! Welcome to the channel. Enjoy the content 😊😊

[@paulstaley4245]

I'm 11 minutes into this video and I love how professional this video is. Well done with the structuring! I can't believe this only has 4k views.

[@hnasr]

Thanks Paul! I appreciate your comment glad the content is of high value to you. Let me know what software engineering content would you like me to make. Cheers

[@webrevolution.]

19:15 Right there man. Right there you got my subscription. LOL.

[@kidjr.9520]

Very clear and the illustrations made it easier to visualize! Very Efficient video on web sockets!

[@lonewolf2547]

A M A Z I N G.....!!!!! awesome explanation dude

[@marianbieda]

Dziękujemy.

[@dennislarsen5744]

Thanks for this awesome video.

[@shaukat9823]

Amazing stuff Hussein , Thanks a ton

[@hnasr]

Thank you dear

[@SohailKhan-cb9ls]

Thank you brother, you just solved a system design problem for me. You have a great and unique teaching technique, don't change it. I would really appreciate if you also cover cloud system designs. Thanks again 👍

[@hnasr]

🙏🙏🙏

[@dhanalakshmi_narala]

Thank you.. Great explanation

[@madanmohanpachouly6135]

Real cool explanation.

[@andrescastillo2863]

thank you for defining the levels of cool Hussein!

[@hnasr]

Andres Castillo 😂 your welcome! Someone made it to the end I see

[@andrescastillo2863]

@@hnasr yeah but i listened interupted between commute to work and home......I need to sit down and listen to this and watch this soon as well.

[@ebukaume]

Another nice one from you, thanks 🙌. How does websocket compare to the protocols used by services like Redis or postgreSQL?

[@yadude101]

This is a great video. I like how you explain stuff 😀. It would be great if you could build a live web streaming build, a one to many webrtc, like twitch or youtube live streaming... thnx👍🏻

[@HM_Milan]

What a amazing video, awesome how you dilever

[@dabbopabblo]

Everything I make is with websockets. Maybe that's for the better or maybe its for the worst. I just loooove the bidirectional communication soo much, it allows me to monitor absolutely every little thing about the clients connected to my website in real time and provide them with live updates for the pages they are on

[@kefahissa]

I love your comprehensive coverage and depth. Keep it up! 💚

[@hnasr]

So glad! thanks Kefah

[@Twerqt]

Wonderful explanation. Can you explain the etymology of the term "socket" ... it is widely used in various places, from OS inter-process communication to TCP sockets and stuff ...

[@section9999]

Your accent if fine my dude. We can totally understand what you're saying perfectly. Case in point, I also speak Spanish but no way in hell can I explain backend engineering topics of this level of technical detail in Spanish (or English) as clearly as you can in English. What matters more is the quality of your content, and you sir have some A grade quality content! After watching this I would subscribe, but problem is, I'm already subscribed!

[@hnasr]

Thank you Norberto 😍😍

[@pallanti_techtalk]

Great explanation

[@jervex-e3514]

such as a treasure thanks!!

[@vishg28]

Great explanation. thanks. BTW, it could also help if there is some clarification on difference between Winsock API (WSA) and WebSockets. Like are these two parallel protocols or one can be built on top of another (like Websockets built using WSA) ?

[@exoticcoder5365]

Great one !

[@ashishmaikhuri3950]

Nice work Hussain. I am finally able to understand websocket

[@hnasr]

🙏

[@bardhan.abhirup]

Hey Hussein, thanks a ton for the videos. Just discovered them. The content seems great! I hope you don't mind me saying that you volume levels need adjusting. At times it sounds like you're whispering into the mic and it's not audible, other times it's super loud. If you could somehow normalize that, it'd be great. Thanks!

[@hnasr]

Thank you so much! I am working on my audio and making better I think it got better on my new videos.

[@sohamnavadiya992]

Learn a lot from your videos. Thank you for sharing. I have one request please upload one video on long pooling.

[@hnasr]

I Made a video a while back Long Polling and how it differs from Push, Poll and SSE - The Backend Engineering Show kzbin.info/www/bejne/gGHSnKWXfquDgJI

[@thomastaylor1799]

#1 Your a smart dude. #2 You are a great teacher. #3 Don't apologize for your accent, it is cool!

[@hamidreza2480]

thanks it was very teachingful💯💯💯

[@FullRGB]

Awesome video!

[@CoentraDZ]

Your content is priceless ❤️

[@hnasr]

❤️❤️ thank you!!

[@uchennanwanyanwu2777]

7:14 ...it's the wild west. very funny explanation. cool