Deno WebSockets Tutorial #1 - Introduction

Key Takeaways

hey gang and welcome to this dino series where we're going to make a chatroom with WebSockets and Dino now just really quickly before we start the tutorial for those of you who want to support the channel and join the gang officially you can do by clicking that join button right here he's just at $0.99 or pence per month and you get these cool little ninja loyalty badges next to your name in the comments down below when you leave a comment you can also join by clicking the button right beneath the video if you're watching one now which I'm guessing you are it does exactly the same thing all right so now that's at the way let's get on with the tutorial alright then so first things first what our WebSockets well basically WebSockets are a way to connect a browser to a server and then allow bi-directional communication between them now it also allows for real-time data flow between the browser and the server as well without refreshing the page now bi-directional just means that data can flow in both ways so from the browser to the server and also from the server to the browser now I think the best way to explain this a bit more is by looking at an example so imagine we have a website ninja chat com which is going to be running on this server and this is going to host some kind of chatroom so when you use it in a browser goes to this website this server sends them a webpage back with a chatroom on it and then when the user gets this webpage in our code we tell the browser to set up a WebSocket connection with the server now once we have this WebSocket connection we can make use of real time data flow between the browser and the server so the browser can send data to the server and the server can send data to the browser and this can happen over and over in real time without the need to ever refresh the browser now imagine that all the users around the world also go to this website as well they get the same webpage back and each time their browser sets up a web socket connection with the server so now all browsers are connected via their own web socket to the server and now data can pass from each browser to the server and from the server to each browser so in the chatroom over here for example maybe someone types a message and hits send so it sends that data to the server via the WebSocket now our server can accept this message data and then send it back out every clients through each clients web socket with the server and then every browser is going to receive that data and show the message in that chatroom and this kind of data flow is going to apply for every message sent by whatever user sends it in whatever browser now it's not just chat rooms we use WebSockets for throughout other use cases as well for example sports websites which do live commentary and live browser updates maybe collaborative document editing sites like online coating platforms are even online drawing canvases with multiple users in this series we are going to be building a simple chat room where people can enter in their names and they can type messages to each other but also what you learn in this course can be applied to other types of websites which use web sockets as well now before you start this series I would highly recommend that you already have a basic understanding of Deno because I'm not going to be going over all of the basics in this series now if you want to learn Deno from the ground up I've got a Dino jumpstart tutorial series on this channel so I'll leave the link to that down below and you should definitely check out that first of all then come back here I'm also going to be using typescript in this tutorial and if you want to learn more about that I've got a full typescript tutorial right here on YouTube as well so the link to that is also going to be down below however if you're proficient in JavaScript then I think you're going to have no problem following along with this tutorial item now I've also created course files for every single lesson in this series and the found on the Dino web sockets github repo now I've done a different branch for each different lesson because every lesson has different code so if you want to see the code for lesson 3 for example you go to the lesson 3 branch and you're going to see all of the different folders and files and the code in those files are right here and also I'm going to be using visual studio code as my text editor of choice you don't have to but if you want to you can download it from code visual studio comm by clicking this button or right here so the first thing I'm gonna do is open up a project folder right here which I in fact already have done called Dino WebSockets and I just want to do some basic setup for this project so just create the files that we're going to need so the first thing to do is to create an apt ES file and this is going to be where all of our server code lives later on that we're going to run through Dino I'm also going to create a new folder called public which is going to be the folder that essentially is made public to the browser so anything like HTML files is going to go inside here speaking of those let's create an index.html file this is the file is gonna be served to the browser and it will eventually contain the chatroom on it for now all I'm going to do is say doc and then tap that creates me this mini HTML boilerplate and I'm going to change the title right here to ninja chat and then down here in the body I'm just going to do an h1 that also says ninja chats as well save that and in fact we'll just do two more things I'm going to add a style tag right here because in the next lesson we're going to create this template and we'll be adding styles and also at the bottom we want a script tag for any front-end JavaScript and it's going to interact with this page and also set up WebSockets on this page or later on as well so now we've got that sorted we're ready in the next lesson to dive in and create our Dino server or right here [Music]