Okay. Good morning. Still. Still. Morning.
1st off I sort of apologize again. I couldn't do the lecture on the 19.th
I will update the wiki to just like remove that. But I kind of owe you an extra lecture at some point during the term.
We'll see when that makes sense, you know. Do that as an extra
As an extra. What do you call
A study session or something.
So just for where we are in the class right now, tutorial one and 2 are out.
Tutorial 3 will come out this Thursday.
And then assignment. One is right. Now, currently do. October second.
I may need to adjust that.
Lightly. I can't do that too much more for that. But assignment. One will be coming out shortly.
It will just be based on the material from assignment one and 2.
Oh, yeah, for tutorial one and 2, so we'll be.
It shouldn't be too hard. It'll be
But it should hopefully make sure that you're kind of understanding the material. Up to this point.
Other things.
I have a cold, so sorry. I will probably blow my nose periodically during this.
I'm glad you're all not in the same room with me.
The midterm is.
Midterm is still here on the schedule here it's scheduled for
Midterms, October 29.th
So that's just after.
Break.
Planning on doing in the midterm just before the fall break.
So I'll give you time to kind of catch up.
Be all ready, for there.
Yeah, that's what my bonus will be. I'll I could do another review during.
Fall, break for people.
If you want questions that might make sense.
So, yeah, so, so I should have.
So right now officially assigned ones. Do. October second.
And we a little bit, but I'm hoping to get a 1 up.
Basically. So is it basically assignment or lectures.
So the way I structure this is.
The.
Assignments are based tutorials.
A midterm final are based on the assignments.
So I talk about a lot of things in lecture.
That is meant to help you understand the material and understand the tutorials. But.
It's not a.
I'm not going to test on everything in the lecture, because there's too much.
There!
Just a reminder that so
So what I wanted to spend my time today talking about was, I haven't actually talked about this in class.
Because I just posted this last week.
While I was on the road.
And I wanted to
Walk through this, and then we're gonna expand on that.
So the once I just added this line here for remote editing.
This is there because
You know you can go here, and there's this nice page here on remotely.
Installing vs code and things.
This is a perfectly good you can use Vs code.
Vs code
Is a very nice ide.
I could use it. But frankly, it's a bit more.
For me, and I've been using emacs for decades.
At this point.
So I'm got stuck in my ways.
I I play with Vs code. It's it's very nice, but.
I want to do things here, and I can potentially show you. But it's.
It's all the same stuff.
And in particular
Might just show you the setup I have right now.
So. Here, I've got simple server. Js.
But if you notice, this is where it's located, Colon, comp. 2, 4, 6.
Colon, and then this directory.
That's how I can tell emacs to load things remotely. Now say, what's comp. 2.
I have my own
So I have this little thing here.
My Vm. Is here.
The host. I've got like jump host is my lab machine. I'm using that.
Rather than the you could. Instead of doing this, you could use access that.
A cs.ca, I use.
This one because it's my lab, and I don't have to make sure I'm interfering with you guys, particularly during lecture.
But it should be able to set up the same way.
So I have my config. Here, let's set up load here, and so when I'm editing this file here.
I am
So here's the terminal.
Where I'm actually running things here, I'll hit. I'll see here.
So let's
I'm just going to.
Change over here.
So, okay, so,
Oh, sorry! There's a question here.
How they sample a midterm
Look back my old runs of the class. You'll see the style of things.
But we'll talk more. I've had a few issues, too.
Okay, if you're having issues.
Timing out when connecting.
To the Vm. Of make sure you have to be at.
What's.
So the easiest way to do this is to do you know, access it via ssh.
Via the Carlton VPN. If you're getting timeouts.
You're probably that's probably what's happening.
You also use the jump host, but 1st you can connect through the Carlton VPN. So.
To make sure. Everything you're set up is basically stupid.
That works, then do.
Yeah, so, yeah.
So openstack has a firewall which blocks a lot of network access.
So
Yeah, that's why you can't. Ssh, the Vms directly if you're not in the Carlton network.
Or if you're going through a jump, host.
Which basically means you're connecting the Carlton network to another machine and then connecting.
So.
Be sure to do that, but when you do that you should be able to do things like.
Remotely edit on the Vm.
And so this file is actually on the Vm. And I can prove this.
Because I'm now going to.
So now I've saved it to the remote system.
And now I can go over to.
Now I can start running it. So this is run.
Now, if I go here.
I see this is working.
He's loading Fab icon error that's expected.
So now
And it says, file really not found.
Because I've changed it. But notice.
So this local host, part.
Michael. Like also am I actually connecting to my local machine here.
This is actually not my local machine. This is still the class. Vm, and the reason you know this.
Is because I'm connect, because I did this command here.
So this is so. I'm tunneling local host 8,000 to port 8,000 on the remote machine.
So all this setup is kind of tricky.
I don't want to spend too much time looking through this, but this is exactly what you should be looking for in tutorial getting Tas to help you with this.
To make sure this all works, because.
You know it's very easy to make small little mistakes and things.
Break
But any case, so this is, I've got my
Main thing I want to do is kind of show what I'm doing here.
Just change this back.
So we're gonna go through this code line by line to try to understand exactly what's going on with it.
And Good question, what is local host?
So this is just when you talk about local host.
Local host is the machine you're on. So remember, computers on the network have host names. They have IP addresses.
The IP address of the machine you're on is always 127.
Which is, has a standard, alias of local host.
So if you connect to your. So this is saying, I'm connecting to my local machine on Port 8.
But port a thousand through Ssh. Is, we can redirect it.
To port 8,000 on the class. Vm.
So that that's that's actually a very good question.
So I specifically added an exception to allow Port 8,000 through.
So if you tried the setup I'm doing here with other ports.
You can't. You won't be able to do this.
So like. If you make this web server right now, run on a different port.
It won't work now. It turns out by default. Deno just uses port 8,000, so everything should work. But.
We won't fill with that.
I'm for right now, because there's no need to. But.
You can have it run on different ports to 8,000.
The traditional H, 3 port is 80.
But you need to be running as route to combined to port 80.
So.
We don't want to do that. So you're gonna have to add 8,000 whenever you access the web server.
So that's the basic stuff. Now, let's just start talking about this code. What is it actually doing.
I can. So over here.
Wait a second. It's fine. You all can see it being on the left side of my screen, right of my screen. Right? That's all.
Okay, this will. There's some questions here.
I'll address those.
Into. Course I think I'll I'll answer those.
In general, when you look at a program.
If you try to.
Understand it.
While you can start at the top. It's in general better to start at the bottom with most programming languages.
Because that's generally where the things here is where this starts. So.
1st we start with deno serve.
So what does
That's I'd be curious. Someone's mentioning that they use port 8,001 and Openstack allowed it. It'll run on Port 8,001. It's just you probably can't get through the.
Firewall like you can connect to it, while if you do everything on the
On the class vm, and do it say with a remote desktop or something.
That'll work fine.
But
Otherwise it shouldn't. Anyway.
I'd be curious to see what's going on there, but.
Good question. I'll start.
So the reason why it's important to know about these things called firewalls when you're doing web stuff is because.
Your stuff can be blocked.
By
Can be blocked at any time when you're trying to connect and go like, why is it blocked.
If you do ever if you run, if you run dento on your local computer.
And you
If you're running dental locally, and then if you run it, then you connect to local host and talk to it.
There. Then you don't deal with firewall issues because you're just on the same computer. But when you're going over the Internet.
Nick to our remote system. You're gonna deal with firewalls.
Because they're everywhere on the Internet. Traffic's always getting filtered.
I may change the I should probably update the. I can update the firewall rules to also allow 8,001 through.
It's probably better to have a
Second, port available.
I'll post about it once. I do that anyway.
So that that's that's what a firewall. So there's all these networking concepts that come in here.
You know, we have entire 2 0 3 as a whole networking course, there's a lot of things, and hopefully you'll pick up some bits of networking more.
As we go, but.
There's a lot there. It's a whole area.
I just want you to know the basics.
For you to be able to do the web stuff.
Okay, let's.
Let's go on here. So what was I was with the code.
So let's 1st start demo. Serve handler.
What the heck's that deno.
I know that's a demos. The system object.
And this is a method of it. Serve.
And since you know, this is clearly not something I made up.
Because it's there. So let's go over here. You see.
Is this?
You know, serves HP. Request with a given handler.
Sort of support. 8,000. So.
This defaults to port. 8,000 a hosting, you know, so.
You. You can do lots of you can add lots of options. It tells you how to change things. But the basic usage.
Is basically this.
And that's all we're doing. Serve.
Request.
You know, they just defined a new function. They just defined a functionally.
We'll we'll talk about that. But this is a syntax right here.
For defining anonymous function.
That takes one argument, request, and returns a response.
So what's a handler? Good question. So what's.
You know, with a given handler what the given handler is. The handler just means something.
To handle the request.
So what is that? Impractical terms? It's a function.
We defined handler here.
So what does this mean?
This means that every time.
Yeah, when you start, observe.
It starts listening in on a port by default, 8,000.
For incoming Http requests.
So this is what we're talking about here when you.
What we're really saying doing this one line of code.
This is the nice thing of it's providing us lots of functionality.
Just by running this.
We have a
We have a web server. This is a built in little web server, but it's not.
It's a web server in the sense that understands the Http protocol.
We will. So you will talk about the Hv protocol.
In a bit.
And you'll see it in operation when you look in a web browser. What's actually happening.
But it's a very simple protocol.
But what it handles is.
Would. There's a when you type in.
Like when I did this, this URL or I did this.
I did this. These are.
Requests from a web server.
This is this is a request.
To a web server. So here, this is the other side of it. This is the thing that receives that request.
Which is the URL.
Plus other things.
And this has to. Now this function.
To process it.
So when we're doing now. So saying, we need to make a.
Function. That's.
Handle the request.
And if you look here, you see function Async function handlers. Now.
I will explain a bit what Asic means, but for now we can treat this.
You know, just ignore it. It's just a function.
This is a function, it's a handler. It takes an argument, as I say, I will explain what Async functions are different in a bit.
So this is a function. It has a handler.
Takes a request in there.
And in this we're defining an object with 2 fields.
Status is 200 content type text.
So that's the metadata associated with.
The response, we're going to return.
And then we're setting up a path name. This is going to be the file contents that we're going to.
Return. So 1st we find out what's the content of this? We look, we're on this function to find it where that content type is.
So that replaces this content type here.
So really need a default value. There.
So, but
But anyway, I changed that in a few iterations.
This is, define a path name which is where the file is, and then.
It tries to read the file based on this path name, which, extracted from.
The URL. So when I say, What's the path?
So if I look here, so it says, File dot slash if I say.
The path it's giving is this.
And then I've added.
It's actually this, it's actually this whole thing, the slash. There.
And if we go over to here you'll see that what's.
What it's returning, it says, returning.
Dot simple server, Js. Of type, text, Javascript.
So this is the path, name it loaded.
Now, what I did is it put a.in front of this? What? This? What was actually simple? Server Js.
Dot stands for the current Directory.
So by saying, Dot, that I mean in the current directory, where we're running simple. Js.
Return that file.
And so we just read that file in. If it read.
Fails those giant error, it'll grant an exception.
Then we get this. You know, we go here. We just set the contents. $10.
And here we go. If there are no contents.
We say, contents is file not found.
Plus the path name. We set the metadata of the contacts plane. We set the status to 404.
Because you've seen the 4 error message. Whenever you visit the websites, 404 means file not found.
There's lots of doing these codes. 200 is the code that's used.
Okay, that.
We'll get to all the status purpose we'll we'll get to the bottom.
What I don't understand. What what is the request? You'll request, URL.
This up here.
We'll talk about that in a second.
I'm just gonna get the overall flow of this.
So file not found here.
Text plain here, you know.
And then it logs a message in the console error on request for this.
And so that's why we get these error on requests for icon error request for this.
Because we can't return a file. This we can't return the file. Icon.
Until we get errors.
And then otherwise, if there are contents.
Then we log that we're returning this.
And so this. But this all doesn't actually return anything.
This is the thing that does it.
So when I say return new, it means make a new object.
Type response.
You know, make a new response. Object.
With these contents.
And this metadata which we we created in there.
And that's what's returned to the web client.
So.
Okay, so.
Yeah, that's that's a more detailed. We'll talk about the mime type in a second.
Before I start showing things. The Web browser. I want to show you.
What's this?
What is this? So what this is saying is so this is string, concatenation, and Javascript. You can take a string.
And do plus and another string. So we're doing this to another string.
What this is saying, so request is the object that was passed in.
URL is a field of it.
I'm converting it here into a URL object.
So it turns out so.
The URL Interface, where I met for creating objectls. So this basically creates.
If you create an object of type. Yeah, URL.
It will have. It will basically take that big string you have, so that the request, URL, here is just a string.
We're just, you know, the text of what was put into the web browser. Basically.
This
But by turning into an URL object.
It parses the string for you and splits it up into its fields like. For example, when you want to know what the protocol is Hbs will go one place.
You want to know the host name? That would be this part here.
And then, if you want the Pathname is everything. After the hostname.
So that all gets put into.
This you know, into this object.
Parse there. And so, instead of us parsing the URL manually, which could do.
But Deno provides all these nice things for us.
We just go turn it into a URL object and extract the path. Name from it.
And that's that's what this is. Here.
Although I added a dot onto the front of it.
So!
This status thing. Well, I think the easiest way for me to explain to you status.
Is for me to show it to you in action.
The web server is running here. I'm going to start.
The
The network here. So this is now, and I've started up the debugger. All web browsers have.
You know. Make sure, Web Browser.
Is the Firefox one. So I'm gonna hit.
Reload this page, and you notice, by reloading this page.
It says there's 2 network requests.
One is for simple server. Js.
And one is for 5 con. Here from this domain, and the method.
This will become important later is Get.
And you know. So this is.
You know just this is what would request. This is.
This is the status.
The status of the code.
Says, return to the browser, to.
Know what it is, so you could think of.
When it does this remote request it gets a response back. And that response.
The 1st thing is, there's a code to say, well.
Did you get a valid response back? What sort of thing like.
If those internal server error, or if there's file not found, there's all kinds of other Http error codes.
But if there was success.
It's 200.
Why is it 200.
I am sure there is something you go with the bowels of.
The history of the web. Why, they pick 200 for that. But.
Is 200.
So that's that's what the status is. Status is what gets returned to the browser, for here for stats.
And it tells the browser whether it's request was successful or not.
Because, of course, like, if it's a 200 request like, okay, I can remember that. That's a real response. If it's a 404. It's like, well, that was.
Junk.
Now the what you what page you get for the for a.
404 thing can vary a lot.
But and in fact, we return some contents for file.
Prof. Icon, you know, when it requests a Fab icon. Everyone know what the Fab Icon is.
Pro icons are these,
So like, if you like. They used to be shown in URL bars.
With the icon. There now, actually, though, they're still used like that little icon up there, that little thing, this little thing, this little like.
Dino thing those are Fab icons.
And you notice for this tab.
There's no little picture like that.
So.
So if you yeah. So what you see, got, you guys got so.
So if we add in a Fab icon file here.
Then it would show up here. So that's 1 thing I'd suggest is.
Look at you, Fab. I condo it has. It's a you know.
You look up.
Well, let's see, can we do a Fab generator.
I think we all so here's a Fab icon.
So short favorite icon, where you know bookmark icon.
History.
So we can't shoot a mic. So Ico.
There it is. Actually, let's go to.
We'll do.
There's the, there's the image.
So I can do this.
I can go over here.
Okay. Here.
Cannot paste.
So now I've got a 5 icon in this directory.
And let me restart. So now notice, the web server is not running.
So if I hit this reload.
Connection was reset. We couldn't connect.
Open failed. That didn't work.
Notice this. Allow net allow, read. You don't strictly need these except you'll keep asking you for permission for every time it tries. Actually the network or.
The file system for reading files.
So. So here now we're going to reload this.
And notice, now.
Return. 5 icon and
Oh, it didn't show! Let's.
There we go! Shift.
Preload it to do a forceful reload. And look, we got a Fab icon.
For local host, Yay.
So is the globe in a blank page, also a Fab icon
I think that's a if you have that. That's like a placeholder. Icon.
For a blank page, because it's.
Not really. Not only there.
Depends on your browser exactly what it does for that. Firefox just doesn't.
Show anything.
So you're seeing now. What you can see is, how does that we now know? How does.
How do you get those little icons? There? Will. The web server just creates a file. Icon Iso in some format.
Look that up. It's
I think they can. Now. Png's.
But they're actually there's actually a couple of older formats.
So what is the but you need to pull up the bottom page so.
I think, control shift, I or command shift I on most browsers should do it.
What we're looking for is
More tools. You're looking for the web developer tools.
Control shift. I is what it, how it.
That invokes of mine. So bring up that if you're on chrome, I think it's the same thing. But control shift. I.
Chrome's look slightly different, but.
Is basically the same.
You know they're they're pretty equivalent.
F, 12, okay.
Cause I click on mine.
Yeah, it does.
12? Does a 2.
So.
Let's now let's do index.
Dot HTML.
Because that's 1 thing I asked you to do. So.
Well, we were.
So this is my Hello! Here.
Copy.
Lord God.
Like cutting places, working a little well.
Oh!
16.
So hold on.
What?
Website, up.
There we go!
Copy and paste it. It's easier.
Our Mac, as far as bad dev tools.
Is there a crowd or Firefox? So I would suggest Firefox.
But that's what I'm using this class. But.
Chrome is what everyone uses, and my various issues with that button.
Anyway. So here we are.
We've got our Hello, js, let's now try to.
Oh, right. Forgot to start it up.
Okay.
That's all. Working.
We can now view here, and say.
View, page, source.
This is the stage source.
Load here.
Looks pretty similar.
Indentations a little. Is it actually even different.
I don't even think the indentation's different.
It might change the inventation. But so this is this.
When you're viewing source. This is what you're viewing.
And so you can change that.
Now.
We can, of course.
Let's copy.
And let's.
This is indexed. HTML.
So this is top-level domain.
Here. Now we can go ahead and start that.
This! Go back here.
Hello, still, works. So.
Go down.
So it's loading.
So there's a question about the Fab Icon.
So without, you know, you just need to place it in the Directory, and the server grabs it automatically. It's not. The server grabs it. The browser grabs it automatically.
When you put the phone icon on the server, the browser.
Because by default it expects it to be there.
And if it grabs it, it will use it as the.
Icon, for the you know, as a whole thing for the website.
To associate with the domain.
It's just, you know, again, there's all these conventions that like, why is it called FAQ? Because it was named that way.
Someone early on the web, and it's stuck in.
No, you can't change it.
It's all these little conventions.
So this is all well and good here.
But it's not.
You know, that's not actually what we don't want to load. Index. HTML, what we want to be able to do is just go here.
And have it. Show us that file.
And it's saying that.
No, I can't do that.
How am I gonna fix that.
So if we go here.
Here's where the path names decided.
Here's where it is, and it tries to read it here.
And it sets the type here of the path name.
Now before it? Does all this.
We can check.
You can change this to be, if.
Go. Sorry.
Did you all see that window pop up, or was it blank.
You saw it. Okay.
Yeah, I was afraid of that. So.
Can't do. I think this is one trouble is, I just want to be also to share part of my screen.
And I can't seem to do that on zoom on Linux running
If I was running an X server.
I could do this. But it's currently running Wayland and.
I can't.
Anyway. So say a path name equals.
How many okay. Sorry.
So this is a funny thing equals.
Use 3 equal signs. Don't use 2 equal signs.
It's a Javascript weirdness.
There are solutions for. Yes, I could run it in a Vm. And things, but it's just.
So, if pathname equals slash.
Simple. One line change. If the pathname is this path, name is that.
Let's see if I did that right.
Why don't use double equals? Double equals does exist in Javascript. It will sometimes use.
Work as you might want, but it's comparing.
It's comparing pointers rather than the actual objects that they refer to. So you could have 2 things that are the same thing.
From everything except they're referring.
That's probably not what you wanted. So.
Just use triple equals.
So now try this.
Internal server, error. Oh.
Assignment to constant, variable.
That was a little. Can't do that. Change the value. So got you that 12 R.
Let me go over here.
Good.
No, no use. Triple equals because it is not the pointer. If you wanted the pointer. Basically, pointers in Javascript are a very weird concept.
That's what I mean. But that's what's happening.
Look up. Sometimes, the difference being double equals and triple equals.
This is, the strict triads are equal over unlike equality, operate strictly, call it always considers operative different types to be different.
So like this is the.
1 1 hello, one.
This is true.
Do you really want that to be true?
Do you want this to be true?
Sorry I it's.
Sorry I take that back. It's not about pointers. It's Javascript. I was forgetting that.
How is the 3rd one is true? Yeah, exactly. This is just wrong. That's why I was saying, the double equals operator is just wrong.
Don't use it. You want strict quality.
That's false. That's true.
That's equal. It does some other things, objects and things like this. But
Yeah, use triple equals. Just ignore equals.
Don't even consider it being existing.
You almost never want it.
So.
Done there.
Yeah, so yeah, so just this is, remember, I said, Javascript.
Javascript got some great ideas, but it was.
Written in 10 days and has some glitches, and those you know bugs, you might guess, and.
They show up in things like this.
Not too hard to work around. He's got to remember a few things.
Anyway, where was I back to? So.
We don't need that.
Oh!
So notice that now, when we do this.
It returns the same thing as.
And you might go like, well, okay, that seems kind of silly, you know. Why'd you bother doing that? Well, this is what basically every web server does.
When you load a
So, for example, just try this try doing index that HTML mean it could be defined differently on a per server basis.
For example.
So if I do this, this is my homepage.
On my personal machine. It's all. There's also the people. But if I just do here and I look up index.
It's exactly the same thing.
It's the same, because on the server.
The Directory to where it told us which is public. HTML. In my home Directory.
On a bit on machine homeostasis.
That's the file I want. If I just people ask that top level thing. So this is a general.
Convention. If you have a directory.
You asked for the contents of that directory. It doesn't return the content to that directory normally.
It returns the file. Index. HTML.
Now, there's a question about the mind type here.
So if we go back to the.
This.
All this.
Let's go back to.
Go back to the tutorial.
So here
Has it from the mind. Typo file.
Yeah, how you do this. So if you look.
So.
Was it.
There we go!
I think that's what I told her to do.
Yeah, so Jsr media types.
How did I figure that out.
Here's the function.
Utility functions for media types, mind, type of going, mind, package.
And integrate with Apis here.
So this is the import. If you wanted all the things.
I didn't really care about all the things I just wanted, the content type.
So that's why.
You know.
So what this is. If you look at what data will actually do with this, you will actually download this directly when you run the server.
But now the question is, how do you use this? What is this doing here?
Let's try this walk you through it.
So let's add in this.
So now, this imports content types.
So now, I have this function content type.
Zoom with content type.
Works, kind of like.
What we had.
But what are the arguments for it?
This is where you have to look at so.
Content, type.
So here.
Or import directly with a Jsr.
Instead, this examples.
Content type.so these so these are equals are basically saying that.
This should always be true. This is kind of almost like a little test here.
So if you request content type, Json, it's real. By this.
We do content. Type, text. HTML.
Content, type, text content type, foo on defi kind of type. Text. HTML.
So this is all doing that. So.
In here.
It's calling.
Mind, type of a path, name.
So.
It's taken the entire path. Name.
Is, that's what's here so like. In this case name would be index HTML, or something like that.
It's not just what we need for the.
To look up the mime type. We just want the extension.
Of the file name, but we're giving it the whole path here.
And if you look into.
This is what mime type does. It defines these constants.
It then does this? It says the extension says nothing, and that says.
If there's a file name.
You know we were given something that you know as opposed to nothing else. We.
Slice the string.
Now you do lower case scenario like, well, what the hell is this doing?
What is this code doing?
Well, you know.
This is why
This is why the read of our print loop.
Some of our food.
So I've got now a variable.
And now I could say.
File, name, last, index.
Of.
Dot.
So that's the last index of it is.
So if you look at this, so we'll count this.
You know 0 1, 2, 3, 4.
So that's that's the position in the string of it.
I want to move past it by one.
So last, index.
Plus one is that.
And if I say
For safe food, slice.
This.
Tuesday spell. So what is.
So go to Mdn.
So this is a.
Array prototype, you know. So this is what slices. So you have an array.
Arrays have a thing, slice.
Also actually also has
String prototypes does that strings also have slice.
And so this shows you that slice you.
Get the output of it like if you just specify one index of slice.
It basically starts there and gives you the rest of the string.
Or you can give 2 indices, and it gives you a subset of the string.
And you can also specify negatives, things going from the end of it.
So.
So I'll I'll explain indexing. So so this is what's happening with, this is all this code is doing, is it's.
Doing a little mangling, and then we do the 2 lowercase.
Basically to convert it to lower.
Because if you look in the structure.
Everything's lowercase.
So if I want to use.
This code I brought in.
What it substitutes for is the looking up in this array.
So, instead of returning this.
I would replace this with.
And we still want this, or because it's possible for this content type.
To return
Yeah, docs, yeah.
Content type. Yeah. So if the content type, it can return
Undefined.
If it doesn't have one. And what I what this version does is if it isn't in this.
Think of it doesn't know what the type is.
It returns application. Stream.
Which is really what it should be, because that's kind of the default.
If it if it can't figure out what the mime type is, or something application which basically means it's just a binary file. I don't know what it is.
You deal with it.
So that's what's here. So this.
That's all it's substituting for. So let's see if I.
Did that right?
And.
Type. Image X icon. Oh, that's like we didn't have type of.
So that's a new type.
That's referring to. So.
We're getting new things that were not defined in.
Oh, no! That was already there that was defined.
I'm sorry. Let's see
I'm gonna comment this out.
So that's commented out.
And here.
We should be able to. Now, just.
See now, we see something slightly different. Okay, I haven't actually saved it. Sorry.
It's now character set.
Utf 8.
Oh, have icons different now.
V. And D. Microsoft, Icon.
Huh!
That's not quite what I was expecting.
Interesting.
So this is all there so?
Let's go. I'm now gonna go back. There was a couple of questions. So explain again about index that HTML.
So all index. HTML is so I changes now, so.
The top level file.
Is is being replaced with this. So let's let's make the code a little clearer.
This.
Said, we're trying to index HTML instead, we'd go like just.
Doesn't do that. But if we do this.
So hopefully that clarifies. If you have further questions, let me know.
For question one, the tutorial says, by the port, with dash L. Option.
Okay, going back to the tutorial here. So it's saying, Here.
This dash. L. Option only matters if you're not on the Carlton VPN.
If you're on the Carlton, VPN.
Up.
So this L option is for your Ssh command like you're using the.
You're doing a jump, host and things.
So if you're on the Carlton VPN. You do not need it. You can just escalate to the IP address.
Other questions.
So now we can go back and talk about some nuances in this code.
So.
Some functions here.
Like mine type is just declared as a function.
But handler.
Number 5,
I'm gonna let you work on that. You'll you'll in the assignment. There'll be something kind of like that.
So I'll let you
Wait till the assignment. You'll probably get your answer in there.
So you'll ask out this question.
But think about it. Oh, the basic idea of this one is.
Page. That's number 5.
Notice here. We're just the contents.
Are right here.
You can make this contents whatever you want.
So you at some point want this for Number 5. You want the contents to be under some circumstances.
The number is 5.
So you just had to set up. When do I set contents.
When those requests for.
This URL so.
So you've got to intercept strings that look like this.
And change it, and do that. So.
You'll see stuff like this in the assignment. But.
Try figuring it out.
Back to what I was talking about! Async.
And a weight.
So this is.
It shouldn't be so. By the way, it shouldn't be HTML, it should just be number 999.
So you aren't loading a file. You don't create all these number files on the server.
Should be dynamically generating it.
Again try to figure out. That's the.
If you understand how to do this, you understand the code. If you don't understand, I do this. You still need to.
Figure out what the code is doing.
Up.
What is this Async idea?
Why is this Async? So the basic idea of an Async function.
Is that it is possible.
For the dysfunction.
To wait at some point.
For something else to happen.
Now we know this is definitely going asynchronous, because.
This is calling a weight.
So, since this is calling another asynchronous function.
It is asynchronous as well.
That's the basic rule. If you call a.
That's basically what you want to do. We'll talk about this more.
But the idea is that.
We're calling a weight here.
So we've got to call. Make this Async up here.
Now, what does that really mean?
What it really means.
So, in spite of the functions, are the by default, synchronous? Yes, exactly.
Sorry.
Told you. I have a cold.
So what is a promise?
Promises a proxy for a value not necessarily known.
When the promise is created.
So pending, fulfilled.
This is what it technically is.
And it's and you might want to look at this. We're not gonna have to deal with this. I just want to show this first.st
I'll put the modified code on the class. I'll put as part of the lecture notes.
Sure.
So.
This is a weird concept.
So Async await.
So one of the reasons I wanted to. I switched from using
Want to use deno rather than nodejs.
Is because Nodejs.
Uses. I can just show it to you.
I would go back to the last one of this 2,016.
And I want to show you.
Tiny web server.
This is the old version of this code.
Where is it?
This is the year. This is that code.
Now this should look kind of familiar. You got your mime types.
Got your things here.
But then I'll bring it up here.
So here's tiny web server.
So this is the old version.
That's so, a little more complexity. But here's the funny thing here.
So, server, listen. So here it defines a function that's going to be called back.
You know.
Port, function.
Create. Oh, this is the create server, request, handler.
And you see these.
All these return file request response. So here's request. Handler.
And here I've got.
As a function here and here instead.
Else request pass this return. Fs exists.
Notice that defining functions on the fly here.
How ugly this gets.
Functions and site functions.
Inside functions.
Yeah, so.
Yeah. So you know. So here's a little Javascript.
That's basically what is Vard. So Var isn't global. It's the entire var is global to the entire function.
So it's not global. This just means anywhere in the function.
There while let is like, if you define, let within a loop construct, it's only defined inside that loop.
It's not defined outside of the loop.
Again, small little technicality.
You'll see lots later, but
But mostly just.
Just use of ours. But yeah, so that code gets confusing.
Let's not.
Deal with that.
So that's why I'm not
Not gonna talk. So we have a couple more minutes.
So what so promises.
What else is in
Yeah, so look, look at this. This looks like a mess.
This basically has the same functionality as.
A simple server, but simple server is much.
Simpler,
But conceptually, what you think of it is this way, when Handler gets.
With a request it's going to execute, execute, execute here. This is all going to run.
So I'll finish synchronously. But then, when it gets here.
In effect, this function.
Is going to sit there, and so Dental Reid will.
Read the file. It may take a while for the response to.
So this function goes to sleep, it waits.
Until this happens. But it's not the whole Javascript program. Another call to Handler can be running. At the same time. Many calls to handler could be running at the same time for each incoming request.
But if any of them is having to wait on a file, it will just sit there and sleep.
Until the file is read, and then, once that's read, then execution continues from that point.
And we just keep running the same function.
And then we return. You know this response.
So that's the cool thing about these sort of asynchronous functions.
Is they make pause anytime you do an a.
You're pausing.
So honestly, this whole asic thing again, we're gonna talk about this a lot more. But it's a whole.
Such a clean abstraction.
And it's something that's only really.
I mean, it's older than that, but it.
One of the cool things that's computer scientists.
Is, we're always trying to create the right abstractions to represent concepts.
And.
There's the way to write the code that mirrors how the computer works.
And that you can get things to function. And then there's the version of it where.
You can
I'll stop sharing here.
We're almost done here. There's the version of it where you can
Where everything, where everything's beautiful and everything just makes the code so clean.
Async awit was that one of those kind of innovations.
That it took years to figure out.
And when they figured out people like.
Whoa! That's so cool. Because first.st
Javascript didn't have any of this function out first.st Javascript was just.
There it didn't, and then it had callback functions which allows you to kind of stuff.
And it was. It worked, but it was very syntactically. It was confusing. Got messy.
Then some folks said, Well, you know this concept of other languages.
We incorporate that, and they had some additional promise syntax, and it was still it was better, but it was still kind of confusing, and then say.
Hey? What if we just use promises?
But we do it with this asic thing, which you just.
It's an asynchronous function.
Declared Asc.
If you're calling something that might wait. Just say, wait.
And otherwise function just looks like.
Regular synchronous code. It's like.
Mind blown.
And so, if you think about it, it's all complicated, and how it works. But most of the time you can just look like.
Am I doing so? I might have to wait. Okay, there, I've got to put an A and actually, when you run Javascript.
They'll have.
You'll get data back. That function will return immediately, and you'll it'll generate an error because it won't be the thing you want. It'll instead of being.
Like a string, which is, when I go read the text file. I'll get a.
Promise. It's like, Wait, Whoa! I gotta promise. What am I gonna do with that.
So!
Then you resolve it.
So it's almost like running into a process thread doing the work in the background. It's kind of like that. And, in fact.
Technically, what.
Demo is doing is a form of what those cooperative, multitasking.
Sort of doing kind of a lightweight thread kind of implementation.
Yeah, what other other functional way in this? A way do they get to run when they do reps like it's all it forms a whole chain of a weights.
So like. If one finishes, then the next finishes, the next finishes, and the.
It'll all happen in a sequence.
As it should. So yeah, no, it's really cool.
So.
What if you have, you can have a whole bunch of Async functions. You can have them all over the place. That's a beautiful thing.
It will actually keep track of it in a run. Queue! Who's waiting for what.
Is all part of the Javascript. You don't have to think about it at all. You can just do it.
You have Asic. You can have these things chained, and you'll see there's this whole syntax with them.
Where it lets you do that. We'll do that later. It's.
It's frankly no Js does have promises.
It does have promises, but it's.
The Default Interface.
And I'll show this later. But if if you go, look at how the.
Core apis for a note are.
Thinks there's the original.
Version. And then there's a promises version in Denno. The callback versions don't exist.
There's just the promised version, because, like.
Why bother? But Node has to maintain.
Callback version, because that's.
The old way, because that's why I was originally built in so much code depends on it.
So, but Node does fully support promises. It's just.
Get node. Isn't.
Then it was cleaner.
The node. That's why I want to use it, and it has a little more.
Compatibility, but functionality wise. There.
More than equivalent, and you know it's very widely used.
Okay, I'm gonna stop here. I'll stop recording. I can stay on here for a couple minutes, but otherwise I will.
See you all on Thursday, and hopefully, by Thursday's lecture us.
Next tutorial will definitely be out, and the assignment will be out.
Thank you.