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

  Переглядів 271,655

Hussein Nasser

Hussein Nasser

День тому

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 UKposts
/ @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

КОМЕНТАРІ: 339
@hnasr
@hnasr 4 роки тому
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
@josepetoshi8135 4 роки тому
Greate course mate!
@thanasisathanasi4965
@thanasisathanasi4965 4 роки тому
Man, every part of your video is really for us. Very well documented and comprehensive! The best I could find./
@TheDroiDGch
@TheDroiDGch 3 роки тому
The best channel about computer science!! thank you so much for these wonderful and helpful videos!
@reinohaider4239
@reinohaider4239 3 роки тому
I need your help.. I need project for MSc computer network guys can any one help me!
@computeering
@computeering 3 роки тому
Can you please make a comprehensive video about keeping track of clients using Websockets?
@truphenalwanga9829
@truphenalwanga9829 4 роки тому
I always like it when a channel has the perfect balance of comedy and education. Subscribed! Great stuff!
@hnasr
@hnasr 4 роки тому
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
@langsonchibili1329 4 роки тому
THE FIRST 5 MINUTES INTO YOUR VIDEO MADE ME UNDERSTAND OVER 3 YEARS WORTH OF INFORMATION, U ARE A BLESSING Hussein Nasser
@TheDesvendador
@TheDesvendador 4 роки тому
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
@hnasr 4 роки тому
Thanks! Very happy your enjoying the content
@Gringo0517
@Gringo0517 4 роки тому
Love the conversational tone. Great video!
@pragmaticsoftwareengineer7965
@pragmaticsoftwareengineer7965 4 роки тому
excellent stuff mate. so glad I stumbled upon your channel.
@molangdogma796
@molangdogma796 4 роки тому
I HAVE NEVER KNOWN A GUY AS INTELLIGENT AT EXPLAINING STUFF LIKE Hussein Nasser, MUCH THANKS TO YOU SIR.
@hnasr
@hnasr 4 роки тому
Molang dogma Thank you for watching you humbled me ❤️
@parmvirsidhu7563
@parmvirsidhu7563 3 роки тому
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!
@marcosvalderrey5063
@marcosvalderrey5063 Рік тому
Not every day I find great content that is also as engaging and entertaining as yours. Amazing job, Hussein!
@shahinbayat
@shahinbayat 4 роки тому
That was an amazing video, I didn't imagine to understand websockets this much comprehensive and with so much fun! keep going mate 👍
@hnasr
@hnasr 4 роки тому
Appreciate you Sir! Thanks 😊 glad you enjoyed the content!
@shahinbayat
@shahinbayat 4 роки тому
@@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! 🙏
@GoldenBeholden
@GoldenBeholden 3 роки тому
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
@hnasr 3 роки тому
👍👍
@sajithtm4864
@sajithtm4864 2 роки тому
You're such an amazing guy who brings out toughest concepts too simple. Keep doing Bro..👌
@gnack420
@gnack420 3 роки тому
I gotta say, I love the way you present. It's very casual while still including a lot of information. Great video!
@hnasr
@hnasr 3 роки тому
Nick Coad thanks! Glad you enjoy the content 😊
@annyni6640
@annyni6640 2 роки тому
Love your videos! Have never found anyone else who can teach better
@Akonitx
@Akonitx 11 місяців тому
Bro, your videos with so passion and emotions is really something unbelievable comparing to other plain content in inet. Thanks for your existing!
@tech3425
@tech3425 Рік тому
I was on another channel watching some web sockets stuff. It's amazing how simple and easy you make stuff sound.
@MrDeeb00
@MrDeeb00 6 місяців тому
The most passionate instructor I have ever seen. Thank you for this awesome video!
@sumedh1771
@sumedh1771 2 роки тому
This is so awesome
@connordelaney2536
@connordelaney2536 2 роки тому
Thank you for taking the time to make this. :)
@newtonsarr1234
@newtonsarr1234 3 роки тому
Your tutorials are just amazing. I love it.
@youee1234
@youee1234 4 роки тому
Everything you publish is so pro! thanks for making our lives easier to grasp!
@hnasr
@hnasr 4 роки тому
Thanks 😊 enjoy the content and let me know what you want to see next! Cheers and love
@tech3425
@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
@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
@tech3425 Рік тому
@@hnasr knowingly or not, it greatly reduces the cognitive overhead for viewers when learning a new tech
@TheMathematicalMan
@TheMathematicalMan 2 роки тому
Thanks for the step-by-step guide!
@gussipp3
@gussipp3 Рік тому
if my career somehow took off it would be mostly because of you man, keep up the great content
@thanasisathanasi4965
@thanasisathanasi4965 4 роки тому
This definitely gets a like and saved in my favorite videos. Best tutorial on the subject !!!!
@hnasr
@hnasr 4 роки тому
Thanks!! Enjoy the content ☺️☺️
@coolvjh
@coolvjh 3 роки тому
Love your content. Keep them coming!
@shubhamkala5514
@shubhamkala5514 4 роки тому
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
@hnasr 4 роки тому
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!
@AhmedAli-go7wx
@AhmedAli-go7wx 3 роки тому
thanks, Nasser for this great content ...
@akashmocha4846
@akashmocha4846 3 роки тому
Never felt learning was this "ENTERTAINING" before. More power to you❤️
@hnasr
@hnasr 3 роки тому
❤️❤️❤️
@chintukarthi1781
@chintukarthi1781 2 роки тому
thank you so much for the explanation. Really appreciate all your effort in making this video.
@fuckthesystem4444
@fuckthesystem4444 3 роки тому
Dude, ¡your content is AMAZING!
@JoaoRodrigues-yw3bh
@JoaoRodrigues-yw3bh 5 місяців тому
Amazing and timeless!!
@shrestha0144
@shrestha0144 2 роки тому
I just love your teaching style
@ajayraja1998
@ajayraja1998 4 роки тому
the only video which explains very well thanks a lot brother
@metinagaoglu4332
@metinagaoglu4332 3 роки тому
Simple and very understandable.Thank you from Turkey, Hussein. I'm gonna watch your all videos.
@hnasr
@hnasr 3 роки тому
Thank you Metin!!
@zolika154
@zolika154 3 роки тому
literally had me laughing out loud like 3 times
@Beny123
@Beny123 2 роки тому
Brilliant job! thanks
@jitpackjoyride
@jitpackjoyride 3 роки тому
This is such great content, thank you.
@voxhominem
@voxhominem 3 роки тому
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
@hnasr 3 роки тому
Thank you Vox for watching and I am glad I earned your trust. Hopefully I deliver the content you enjoy cheers! thanks ..
@SachinKumar-js8yd
@SachinKumar-js8yd 3 роки тому
Liked, subscribed. Your content is GOLD.
@sailendrapavan3475
@sailendrapavan3475 Рік тому
I think Its better to search any topic in this channel first rather than wasting time in searching docs !!! Thanks Hussein Nasser 🤟
@iyxan2340
@iyxan2340 2 роки тому
I just love this channel!
@kaloyangeorgiev6824
@kaloyangeorgiev6824 3 місяці тому
Thank you very much, amazing explanation!
@Pablo-np2ny
@Pablo-np2ny 3 роки тому
fantastic explanation, thanks!
@naimurhasanrwd
@naimurhasanrwd Рік тому
Clicked the video, and this guy started explaining with the topic right from 0.00000 seconds! No channel intro, no personal intro.
@AvnishKumar-zf9km
@AvnishKumar-zf9km 3 роки тому
great explained everything. thank a lot bro.
@Mfbzai
@Mfbzai 2 роки тому
Apple need this guy, the speaking way is awesome.
@marianbieda
@marianbieda 8 місяців тому
Dziękujemy.
@kjahirhussain
@kjahirhussain 2 роки тому
Love the explanation!
@massimoaristide8879
@massimoaristide8879 3 роки тому
Really easy and entertaining introduction.
@alitariq7726
@alitariq7726 7 місяців тому
Love your work. 👍👍👍
@edwinroman30
@edwinroman30 2 роки тому
New subscriber. Awesome content and great explanation. I'm speechless many thanks for all and the recommended sources.
@sourabhkumar6194
@sourabhkumar6194 2 роки тому
Your tutorial really helped me, thanks
@ishdx9374
@ishdx9374 4 роки тому
Thanks for this video, I found it really easy interesting, since I'm working on a web game right now.
@hnasr
@hnasr 4 роки тому
Amazing! Keep us up to date with the progress of your game. Cheers!
@ayanSaha13291
@ayanSaha13291 8 місяців тому
Thanks for the video. It helps.
@moneeshkumar1838
@moneeshkumar1838 11 місяців тому
Great Explanation Subscribed Keep posting
@dennislarsen5744
@dennislarsen5744 3 роки тому
Thanks for this awesome video.
@jeppechristensen5707
@jeppechristensen5707 2 роки тому
Thanks alot. You made me reconsider the EventSource API 🙂
@jervex-e3514
@jervex-e3514 Рік тому
such as a treasure thanks!!
@dhanalakshmi_narala
@dhanalakshmi_narala 3 роки тому
Thank you.. Great explanation
@seems-legit
@seems-legit 2 роки тому
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
@rodeschorpioen
@rodeschorpioen 3 роки тому
Cool and comprehensive video. thx and keep up the good work!
@hnasr
@hnasr 3 роки тому
Thank you Wouter! 🙏
@rshaikh05
@rshaikh05 3 роки тому
jazakAllahu khair. keep up the good work.
@okage_
@okage_ 6 місяців тому
pretty good video, i learnt alot! thank you
@tech3425
@tech3425 Рік тому
Dude your accent is perfect. Fuck everybody making fun of it. I literally enjoy the way you pronounce stuff differently
@taulantus
@taulantus 4 роки тому
i usually don't comment, but i have to give you the props for this amazing video. good job
@hnasr
@hnasr 4 роки тому
Thanks for taking the time to comment! Appreciate it , glad I could help. have a beautiful day. 😊
@coutinhotiago
@coutinhotiago 3 роки тому
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 😎
@shaukat9823
@shaukat9823 3 роки тому
Amazing stuff Hussein , Thanks a ton
@hnasr
@hnasr 3 роки тому
Thank you dear
@reemachourey9462
@reemachourey9462 3 роки тому
Came here from your Spotify Podcast! Happy to find awesome content.
@hnasr
@hnasr 3 роки тому
Thanks Reema!!! Welcome to the channel. Enjoy the content 😊😊
@andrescastillo2863
@andrescastillo2863 4 роки тому
thank you for defining the levels of cool Hussein!
@hnasr
@hnasr 4 роки тому
Andres Castillo 😂 your welcome! Someone made it to the end I see
@andrescastillo2863
@andrescastillo2863 4 роки тому
@@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.
@mhh263
@mhh263 3 роки тому
Everyone thiinks Client-Server model is dead, but hey Hussein comes to rescue. Great stuff man 👍
@exoticcoder5365
@exoticcoder5365 2 роки тому
Great one !
@madanmohanpachouly6135
@madanmohanpachouly6135 Рік тому
Real cool explanation.
@hpriyadarshi2252
@hpriyadarshi2252 3 роки тому
wow....mind blowing....
@briandines
@briandines 2 роки тому
Excellent tutorial. You're funny which made this a little bit easier.
@pallanti_techtalk
@pallanti_techtalk Рік тому
Great explanation
@dabbopabblo
@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
@lonewolf2547
@lonewolf2547 3 роки тому
A M A Z I N G.....!!!!! awesome explanation dude
@SohailKhan-cb9ls
@SohailKhan-cb9ls 3 роки тому
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
@hnasr 3 роки тому
🙏🙏🙏
@stevemcguigan8359
@stevemcguigan8359 2 роки тому
Been waiting for an ah-ha moment on this for a while and this was it. Subbed.
@raffayhussain6717
@raffayhussain6717 2 роки тому
The great John Danaher says learning should be playful. When I see you, it reminds me of him.
@azazel-oss
@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
@sukanyachakraborty3359
@sukanyachakraborty3359 2 роки тому
Thanks!
@HM_Milan
@HM_Milan 3 роки тому
What a amazing video, awesome how you dilever
@abdelraoofrabie3024
@abdelraoofrabie3024 2 роки тому
great, thanks
@serhiihorun6298
@serhiihorun6298 3 роки тому
Thank you!!!!!!!!!!!!!!!
@section9999
@section9999 3 роки тому
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
@hnasr 3 роки тому
Thank you Norberto 😍😍
@magekezen1697
@magekezen1697 2 роки тому
amazing !!!
@nikunjbhartia2222
@nikunjbhartia2222 3 роки тому
Loved it
@webrevolution.
@webrevolution. Рік тому
19:15 Right there man. Right there you got my subscription. LOL.
@danushadhaamarasekera7215
@danushadhaamarasekera7215 19 днів тому
thanks a lot brother
@flaasher
@flaasher 5 місяців тому
Amazing video 🙂
@guogeorge7956
@guogeorge7956 3 роки тому
Cool for sure!!!
@uchennanwanyanwu2777
@uchennanwanyanwu2777 4 роки тому
7:14 ...it's the wild west. very funny explanation. cool
@sanketpawar3429
@sanketpawar3429 7 місяців тому
You are sooo coool dude
@prateekyadav1109
@prateekyadav1109 4 роки тому
Really good content
@dankokozar
@dankokozar 4 роки тому
Very nice.
@sergeykas90
@sergeykas90 2 роки тому
Hussein you're awesome!
@muxammad2777
@muxammad2777 4 роки тому
thank you very much
@kidjr.9520
@kidjr.9520 8 місяців тому
Very clear and the illustrations made it easier to visualize! Very Efficient video on web sockets!
WebRTC Crash Course
1:10:06
Hussein Nasser
Переглядів 213 тис.
A Beginner's Guide to WebSockets
29:26
freeCodeCamp.org
Переглядів 309 тис.
The World's Fastest Cleaners
00:35
MrBeast
Переглядів 79 млн
Первая поломка Scirocco! Балацко попал на мотор.
1:13:12
ДИНАМО - ВЕРЕС. Пряма трансляція. УПЛ. 5 тур
3:25:01
SSL/TLS Termination, TLS Forward Proxy Pros and Cons
16:56
Hussein Nasser
Переглядів 30 тис.
They made Kafka 80% faster by switching file systems
31:30
Hussein Nasser
Переглядів 16 тис.
Coding a Web Server in 25 Lines - Computerphile
17:49
Computerphile
Переглядів 312 тис.
What is WebSocket? Why is it used & how is it different from HTTP?
33:23
Harkirat Singh
Переглядів 53 тис.
How HTTP/2 Works, Performance, Pros & Cons and More
22:45
Hussein Nasser
Переглядів 100 тис.
APIs Explained (in 4 Minutes)
3:57
Exponent
Переглядів 417 тис.
Building a Multi-player Game with WebSockets
1:46:07
Hussein Nasser
Переглядів 119 тис.
How to scale WebSockets to millions of connections
14:01
Ably Realtime
Переглядів 16 тис.
20 System Design Concepts Explained in 10 Minutes
11:41
NeetCode
Переглядів 815 тис.
План хакера 🤯 #shorts #фильмы
0:59
BruuHub
Переглядів 984 тис.
ЭТО САМЫЙ МОЩНЫЙ ИГРОВОЙ СМАРТФОН ЗА 270$ 🔥
13:33
Thebox - о технике и гаджетах
Переглядів 45 тис.