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 
https://github.com/hnasr/javascript_playground/tree/master/websocket-demo


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: 

https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers

https://www.ably.io/concepts/websockets

https://link.medium.com/ljsSOsnW6Y

https://blog.stanko.io/do-you-really-need-websockets-343aed40aa9b



Cards
HTTP Crash Course https://www.youtube.com/watch?v=0OrmKCB0UrQ
TLS https://www.youtube.com/watch?v=AlE5X1NlHgg
What is a Web Servers https://www.youtube.com/watch?v=JhpUch6lWMw
Layer 4 vs Layer 7 Load Balancing https://www.youtube.com/watch?v=aKMLgFVxZYk





Support my work on PayPal
https://bit.ly/33ENps4
 
Become a Member on YouTube
https://www.youtube.com/channel/UC_ML5xP23TOWKUcc-oAE_Eg/join

🧑‍🏫 Courses I Teach
https://husseinnasser.com/courses 

🏭 Backend Engineering Videos in Order
https://backend.husseinnasser.com

💾 Database Engineering Videos
https://www.youtube.com/playlist?list=PLQnljOFTspQXjD0HOzN7P2tgzu7scWpl2

🎙️Listen to the Backend Engineering Podcast
https://husseinnasser.com/podcast 

Gears and tools used on the Channel (affiliates)

🖼️ Slides and Thumbnail Design 
Canva
https://partner.canva.com/c/2766475/647168/10068

🎙️ Mic Gear
Shure SM7B Cardioid Dynamic Microphone  
https://amzn.to/3o1NiBi

Cloudlifter
https://amzn.to/2RAeyLo

XLR cables
https://amzn.to/3tvMJRu

Focusrite Audio Interface
https://amzn.to/3f2vjGY


📷 Camera Gear
Canon M50 Mark II
https://amzn.to/3o2ed0c

Micro HDMI to HDMI 
https://amzn.to/3uwCxK3

Video capture card
https://amzn.to/3f34pyD

AC Wall for constant power
https://amzn.to/3eueoxP


Stay Awesome,
Hussein

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

Vuetify 3 and Nuxt.js 3 are out! But how do you combine it? Is it worth it? In this video I explore adding these two technologies together, and the pros and cons of it!

👉Check out my last videoon getting started with Vuetify 3
https://youtu.be/qPf7ZUymlN8

👉 Sign up and get free Vue cheat sheets and updates!
https://www.vuecourse.tech

👉 Need some help with a project,  level up your skills, Vuetify or Nuxt bug? Check out my 1-on-1 mentoring!
https://mentorcruise.com/mentor/erikhanchett/?preselect=lite

Links
https://github.com/CodyBontecou/nuxt3-and-vuetify
https://github.com/BayBreezy/nuxt3-vuetify3-starter
https://github.com/nuxt/framework/issues/8825

Vuetify 3 + Nuxt 3 : Vue.js Will Never Be The Same

If you ever wondered the difference between stateless and stateful applications, REST, horizontal scaling versus vertical scaling? We tackle those in a small example. Hope you guys enjoy this quick video. We explain the advantages and disadvantages of each application. 


0:00 Intro
1:14 Stateful Application
8:40 Stateless Application 

Online diagram tool used in this video: Http://www.gliffy.com 

Checkout the rest of the content for more software engineering topics by example. 

🏭 Software Architecture Videos
https://www.youtube.com/playlist?list=PLQnljOFTspQXNP6mQchJVP3S-3oKGEuw9

💾 Database Engineering Videos
https://www.youtube.com/playlist?list=PLQnljOFTspQXjD0HOzN7P2tgzu7scWpl2

🛰 Network Engineering Videos
https://www.youtube.com/playlist?list=PLQnljOFTspQUBSgBXilKhRMJ1ACqr7pTr

🏰 Load Balancing and Proxies Videos
https://www.youtube.com/playlist?list=PLQnljOFTspQVMeBmWI2AhxULWEeo7AaMC

🐘 Postgres Videos 
https://www.youtube.com/playlist?list=PLQnljOFTspQWGrOqslniFlRcwxyY94cjj

🧮 Programming Pattern Videos 
https://www.youtube.com/playlist?list=PLQnljOFTspQV1emqxKbcP5esAf4zpqWpe

🛡 Web Security Videos
https://www.youtube.com/playlist?list=PLQnljOFTspQU3YDMRSMvzflh_qXoz9zfv

🦠 HTTP Videos
https://www.youtube.com/playlist?list=PLQnljOFTspQU6zO0drAYHFtkkyfNJw1IO


🐍 Python Videos
https://www.youtube.com/playlist?list=PLQnljOFTspQU_M83ARz8mDdr4LThzkBKX

🔆 Javascript Videos 
https://www.youtube.com/playlist?list=PLQnljOFTspQWab0g3W6ZaDM6_Buh20EWM


Stay Awesome
-Hussein Nasser
www.husseinnasser.com

Stateful vs Stateless Applications (Explained by Example)

In this video I chat about Vuetify 3.0, and why you should use it in your next project, or not? And is it production ready. 

👉Check out my last video on if Vue 2 is dead!
https://youtu.be/CW6sho5Ijzg

👉 Sign up and get free Vue cheat sheets and updates!
https://www.vuecourse.tech

Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out
https://mentorcruise.com/mentor/erikhanchett.

Vuetify 3.0 Major Release! Is It Production Ready For Your Vue.js 3 App?

Check out my courses to become a PRO!
https://developedbyed.com/

In this episode we are going to go on fiverr and ask people to create $5 websites for us.
I have also attached the final website bellow for your enjoyment.
https://www.edwinsimo.com/

Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) 
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)

DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.


🛴 Follow me on:

Twitter: https://twitter.com/deved94
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/DevEdwin


#fiverr #website

Paying People To Create $5 Websites On Fiverr

Check out my courses and become more creative!
https://developedbyed.com

My take on making a responsive navigation bar in 2018 with media queries and a sprinkle of animations and javascript. In this tutorial we are going to learn media queries, keyframe animations, basic javascript toggling, building a burger menu and more!

Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) 
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)

DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.


-~-~~-~~~-~~-~-
Follow my Twitter:
https://twitter.com/DevEd94

Please watch: "Should You Become A Software Engineer?" 
https://www.youtube.com/watch?v=V_kTl0eIJ4A


-~-~~-~~~-~~-~-

Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT

This is Day 1 of a free course on Web Development. 

- HW Assignment: https://colt.fromsmash.com/KuaGuFluqq-gt
Links:
- Chrome Download: https://www.google.com/chrome/?brand=CHBD&gclid=CjwKCAjwvOHzBRBoEiwA48i6AiCw-G_eYByxYuWIbPSdbq3J3Vcw0eVMkowGiHzxEHH934z5KRUvthoCY_MQAvD_BwE&gclsrc=aw.ds
- VSCode Download: https://code.visualstudio.com/
- MDN Element Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Colt's Code Camp Day 1

In this crash course I will cram as much about HTML that I can. This is meant for absolute beginners. If you are interested in learning HTML but know nothing, then you are in the right place. We will be creating a cheat sheet with all of the common HTML5 tags, attributes, semantic markup, etc. We will not be focusing on CSS in this video. The CSS crash course will be released shortly after

21 Hour HTML & CSS Course:
https://www.udemy.com/course/modern-html-css-from-the-beginning/?referralCode=EB0470C43F3C3E9AA306

CODE: Code for this video
http://www.traversymedia.com/downloads/htmlcheatsheet.zip

NEXT: CSS CRASH COURSE FOR BEGINNERS
https://www.youtube.com/watch?v=yfoY53QXEnI&lc=z121x5ozxpiiwddee23tffergoyxxngi504

CHECK OUT MY FULL STACK COURSE:
http://www.traversymedia.com/course/the-full-stack-web-development/

BECOME A PATRON: Support me directly for even $1 per month
http://www.patreon.com/traversymedia
ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia