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

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

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.

✅ LINKS SHOWN IN THE CLASS

✅ LINKS

✅ FOLLOW ME

✅ REFERENCES

✅ 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
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

[AnaNeriDev]

This is a subject that doesn’t have on internet with pure nodejs! Congratulations 👏👏

[BrasilEmFatos]

Amazing to see you reaching much more people doing these videos in english too! U R THE MAN, Erick!

[russellmartinez]

I'm researching about web sockets and saw this video I'm really amaze by your contents. I'm a junior developer from Philippines hope that you can create more english content keep up the good work!

[ShuHikari]

Erick falou igual ao cara do Resident Evil 4 - 'WELCOME TO MY VIDEO'

Excelente Erick, mandou bem demais nesse curso.

[sipsisakari]

Awesome tutorial! Tip: one could just replace the custom concat function with built-in `Buffer.concat(bufferList)`

[Histórias_De_Esperança]

this is my nephew, proud, but if it's not me teaching all this lol

[Asiremdev]

ERICK !!!! Do a video like this Building a relational Database from scratch ! Cause there's none such a video !

[joaovitorproenca]

que isso, ta aprendendo ingles? veja os videos do erick, que ingles top de entender, me senti um nativo. Tmj pelo conteudo

[scur_]

holy fuck you are my hero i have been looking for this everywhere my guy, thank you!!! I hate the people from 3:55 refusing to give an answer to me because they say its too difficult. My brother in christ, i am not affraid of difficult code, stop gate keeping and share how to create a WS RTC without libs or dependencies. It was the same when I was trying to parse binary data from multiparts, everyone said its too difficult use a library and I knocked it out in 20 lines of

[raulfranckk]

Erick inspirando os devs tanto com linguagem de programação como na linguagem verbal!! Monstro <3

[DavidSilva-cphg]

Tooop irmão! Awesome content!
#fromZLtoTheWorld

[StanleySathler]

Getting better every day - thanks dude!

[rafaelreisramos]

Ops... you did it again. I think I'm love... Not, it's not Britney here. Just passing to say you bring us awesome content.

Bitwise is always messy in JS and incredibly easy in old C  . Endianness is a challenge when developing multi-architecture protocols.

I would like to take this opportunity to suggest some content for your next videos:
- middlewares in nodejs with no libraries
- router in nodejs with no libraries

I believe these features and also static file serving are the reason why frameworks like koa and express are so popular.

[abdelghanialmasri]

According to XOR (Exclusive OR)
Greate video, I get so many benefits of it. Since I use XOR for encryption and decryption, and for graphics since 1993..
I like to say that.. XOR has many uses, tow of them are the followings:
** It is used in encryption, but how? let us say we have '10001000' XOR '11001100' the output will be some number C, this is encryption, now to do decryption, re XOR C with '11001100' then the output will be the original number '10001000'
** In graphics, when you to inverse a picture, make XOR for the picture array with it self.

[visitanteyb]

Excelent content, thanks for sharing, if you can please make videos about al nodejs best practices, express, autentication and authorization, nodejs best scalable archectictures, advice to new nodejs devs, thanks

[devaxknowledge]

Thank for this video, This is what i am talking about, Video tutorial on Vanilla Node.js, we will deal with framework after we understand how things work under the hood.

Thanks man...

[wells.sa.dev]

Look at that! Simply amazing!! What a video, my friends 🥲

[dran]

No doubt that this channel will pop-up.
This is the content for mid/senior devs, which youtube lacks of

Interesting video and idea, thanks!

[heitormbonfim]

Holy Fuck I'm really impressed by that shit, Dude, youre fucking badass

[renanayoub]

Eu não tive tempo de olhar o vídeo inteiro ainda, mas eu gosto bastante deste tipo de conteúdo. Ficaria feliz em ver mais vídeos deste estilo.