Implementing the WebSocket Protocol with JavaScript || Crash Course || Erick Wendel

Building a Complete WebSocket App From Scratch with JavaScript (with no libraries) - Crash Course

Today you're gonna implement the Web Socket protocol from scratch using only Node.js and JavaScript.

You'll get to know what are bitwise operators for handling binary data in JavaScript, how to debug them, and how different they're from numbers

You'll create a complete Web Server that receives and sends data without any framework or library understanding of how the Web Socket protocol works and how you can explore advanced concepts in practice

I built an interactive spreadsheet as a map so we can easily find where the data is

I'll show you how to handle Buffers, and encrypt and decrypt data using nothing less than what the Web Socket protocol requires you to do.

In the end, I'll give you some challenges to go further and extend this application.

▸Source code: https://bit.ly/websockets-with-nodejs-from-scratch-code
▸WebSocket Data Frame Explained: https://bit.ly/websockets-data-frame-spreadsheet

✅ LINKS SHOWN IN THE CLASS

▸WebSocket Key from MDN: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#server_handshake_response
▸Unmask Function from MDN: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#reading_and_unmasking_the_data

✅ LINKS

▸Mastering Node.js Streams Training: https://bit.ly/nodejs-streams-training

▸ Telegram channel: https://bit.ly/ErickWendelContentHub
▸ My courses: http://bit.ly/ew-courses-yt

✅ FOLLOW ME

▸ Linkedin: https://linkedin.com/in/erickwendel
▸ Blog: https://erickwendel.com.br/
▸ Facebook: https://fb.com/page.erickwendel
▸ Medium: https://medium.com/@erickwendel
▸ Twitter: https://twitter.com/erickwendel_


✅ REFERENCES

https://www.programiz.com/javascript/bitwise-operators
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers
https://www.bigbinary.com/blog/ruby-pack-unpack
https://blog.pusher.com/websockets-from-scratch/
https://github.com/pusher/websockets-from-scratch-tutorial
https://github.com/websockets/ws
https://www.quora.com/Which-is-the-maximum-16-bit-signed-integer
https://github.com/websockets/ws/blob/975382178f8a9355a5a564bb29cb1566889da9ba/lib/sender.js#L466
https://ruby-doc.org/core-2.2.0/Array.html#pack-method
https://datatracker.ietf.org/doc/html/draft-ietf-hybi-thewebsocketprotocol-17#section-5
https://nodejs.org/docs/latest-v17.x/api/buffer.html
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#format
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_server
https://stackoverflow.com/a/11077172/4087199
https://www.techtarget.com/searchnetworking/definition/big-endian-and-little-endian
https://github.com/ErickWendel/websockets-with-nodejs-from-scratch

✅ TIMELINE

00:00 - SUBSCRIBE NOW
01:47 - About this video
02:53 - About the challenge while producing examples
07:42 - Getting to know the web socket protocol
11:06 - Demo - Creating the web server and web client - only the socket.on (upgrade, empty)
13:41 - Error handling to keep the server alive
15:50 - Creating the web client
18:55 - Requesting the server
20:54 - Making the connection handshake between client and server
22:00 - Demo - Building the connection handshake
30:22 - Checking if the connection worked
30:52 - Understanding how to reply data on the WebSocket server
32:59 - Receiving messages (not decoding yet)
42:53 - Understanding where the data is
47:15 - Getting the mask key
50:57 - Comparing the Oficial Docs with my spreadsheet
53:28 - Demo - Unmasking messages
58:45 - Understanding the mask key
01:05:31 - Understanding encoding data - with logs
01:11:23 - How to reply to messages
01:11:46 - Responding to the client
01:27:14 - Exclusive Telegram group and free Javascript content
01:28:02 - Understanding how-to messages to zero to 65k
01:20:39 - Demo - Receiving and sending data as a 16-bit integer
01:43:23 - Summarizing all we did in this project
01:44:41 - Final considerations
01:45:21 - Thank you!


#WebSocketApp #JavaScript #NoLibraries #BeginnerFriendly #CrashCourse #ErickWendel #ProgrammingForBeginners #WebDevelopment #SoftwareDevelopment #RealTimeApps #FullStackDevelopment #NodeJS #BackendDevelopment #FrontendDevelopment #ProgrammingLanguages #CodingLife #CodeNewbie #LearnToCode #OnlineLearning #WebSockets #RealTimeCommunication #JavaScriptDevelopment #JavaScriptTutorial #CodingBootcamp #ProgrammingTips #ProgrammingCourse #CodeFromScratch #HandsOnCoding #ProgrammingJourney #CodeLearning #crashcourse #WebSocket