Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,450 --> 00:00:05,930
This video is yet another really exciting one,
2
00:00:05,930 --> 00:00:08,970
because now we're gonna create our very first
3
00:00:08,970 --> 00:00:13,750
real web server capable of accepting requests
4
00:00:13,750 --> 00:00:15,973
and sending back responses.
5
00:00:17,930 --> 00:00:22,930
And the first step is to include yet another package
6
00:00:22,950 --> 00:00:24,223
or another module,
7
00:00:27,470 --> 00:00:29,533
and this one is called http.
8
00:00:33,530 --> 00:00:36,280
So we're using the require function again,
9
00:00:36,280 --> 00:00:41,280
and then requiring the built-in http module,
10
00:00:41,380 --> 00:00:45,260
and that's the one that gives us networking capabilities
11
00:00:45,260 --> 00:00:48,423
such as building an http server.
12
00:00:50,264 --> 00:00:52,980
Now, let's actually comment out this code here
13
00:00:52,980 --> 00:00:55,863
so that it doesn't get in our way.
14
00:00:59,980 --> 00:01:04,132
So let's actual create kind of a divider here.
15
00:01:07,520 --> 00:01:09,723
So this one is filed,
16
00:01:12,730 --> 00:01:17,730
and this one is for server.
17
00:01:18,030 --> 00:01:20,930
And now, in order to build our server,
18
00:01:20,930 --> 00:01:22,900
we have to do two things.
19
00:01:22,900 --> 00:01:24,980
First, we create a server,
20
00:01:24,980 --> 00:01:27,820
and then second, we start the server
21
00:01:27,820 --> 00:01:31,033
so that we can actually listen to incoming requests.
22
00:01:32,840 --> 00:01:37,680
We use our http module and just like before
23
00:01:37,680 --> 00:01:40,760
we used a method that is on that object.
24
00:01:40,760 --> 00:01:43,283
So just like we did with the fs module.
25
00:01:44,120 --> 00:01:46,530
So, http.createServer
26
00:01:50,440 --> 00:01:54,000
and create server will accept a callback function,
27
00:01:54,000 --> 00:01:56,130
which will be fired off each time
28
00:01:56,130 --> 00:01:58,870
a new request hits our server.
29
00:01:58,870 --> 00:02:01,240
And this callback function gets access
30
00:02:01,240 --> 00:02:05,080
to two very important and fundamental variables.
31
00:02:05,080 --> 00:02:08,763
It is the request variable, and a response variable.
32
00:02:09,850 --> 00:02:12,373
And a little bit more about them in a second.
33
00:02:13,670 --> 00:02:15,293
So, request, and response,
34
00:02:18,510 --> 00:02:20,630
So all we want to do now is to actually
35
00:02:20,630 --> 00:02:23,890
send back a response to the client
36
00:02:23,890 --> 00:02:26,420
and we do that with res.,
37
00:02:26,420 --> 00:02:30,763
which is this object here, this response object, .end,
38
00:02:32,690 --> 00:02:33,547
and then 'Hello from the server!'.
39
00:02:33,547 --> 00:02:36,850
.end, and then 'Hello from the server!'.
40
00:02:37,780 --> 00:02:42,740
So that is the response that we're going to send back.
41
00:02:42,740 --> 00:02:46,720
So again, each time that a new request hits our server
42
00:02:46,720 --> 00:02:49,910
this callback function here will get called,
43
00:02:49,910 --> 00:02:51,998
and the callback function will have access
44
00:02:51,998 --> 00:02:55,780
to the request object which holds all kinds of stuff
45
00:02:55,780 --> 00:03:00,680
like the request url, and a bunch of other stuff.
46
00:03:00,680 --> 00:03:03,340
On the other hand, this response object here
47
00:03:03,340 --> 00:03:05,880
gives us a lot of tools basically
48
00:03:05,880 --> 00:03:07,820
for dealing with the response,
49
00:03:07,820 --> 00:03:10,860
so for sending out the response.
50
00:03:10,860 --> 00:03:14,200
The simplest one is .end,
51
00:03:14,200 --> 00:03:18,200
and this end here, the naming of this method
52
00:03:18,200 --> 00:03:21,060
will make a bit more sense a bit later.
53
00:03:21,060 --> 00:03:24,270
For now, just know that this is the simplest way
54
00:03:24,270 --> 00:03:28,493
of sending back a very, very simple response in this case.
55
00:03:29,630 --> 00:03:31,840
So that's really all we have to do
56
00:03:31,840 --> 00:03:34,810
to send back a plain text response
57
00:03:34,810 --> 00:03:36,863
when a certain request comes in.
58
00:03:37,730 --> 00:03:41,060
Now, if you're a bit confused about all these terms,
59
00:03:41,060 --> 00:03:44,950
like incoming request, or sending responses,
60
00:03:44,950 --> 00:03:48,220
or even about why we do actually have requests
61
00:03:48,220 --> 00:03:51,450
and responses here on our server
62
00:03:51,450 --> 00:03:54,000
then don't worry, because we have a whole lecture
63
00:03:54,000 --> 00:03:56,660
coming up about how the web works
64
00:03:56,660 --> 00:04:00,430
where we're gonna talk all about the client-server model,
65
00:04:00,430 --> 00:04:04,260
and really how network applications work in general.
66
00:04:04,260 --> 00:04:06,880
Again, in this section my main focus
67
00:04:06,880 --> 00:04:09,330
is on actually showing you all the stuff
68
00:04:09,330 --> 00:04:11,260
and really making it work,
69
00:04:11,260 --> 00:04:13,793
and then the theory will follow a bit later.
70
00:04:14,950 --> 00:04:16,610
So that's the philosophy I've used
71
00:04:16,610 --> 00:04:20,450
in all my other courses, and it's been working really well,
72
00:04:20,450 --> 00:04:22,410
and so I believe it's a good thing
73
00:04:22,410 --> 00:04:24,390
to do it here as well.
74
00:04:24,390 --> 00:04:28,100
Anyway, creating a server was the first part,
75
00:04:28,100 --> 00:04:30,800
and now the second part is to actually listen
76
00:04:30,800 --> 00:04:33,633
to incoming requests from the client.
77
00:04:34,880 --> 00:04:39,690
Now, in order to do that we actually need to save
78
00:04:39,690 --> 00:04:44,203
the result of this createServer here to a new variable.
79
00:04:45,620 --> 00:04:47,803
So, we call it usually server,
80
00:04:49,840 --> 00:04:54,840
so server is the result of this createServer method here.
81
00:04:55,720 --> 00:04:59,580
So it will create a server, and now we use that server
82
00:05:00,730 --> 00:05:03,620
and on that we can call listen.
83
00:05:03,620 --> 00:05:07,250
Listen accepts a couple of parameters the first one
84
00:05:07,250 --> 00:05:10,060
is the port, and usually the port
85
00:05:10,060 --> 00:05:13,660
that we use in Note is for example, 8000.
86
00:05:13,660 --> 00:05:16,270
But you will see other numbers like 3000,
87
00:05:16,270 --> 00:05:19,850
or 80, or something like that.
88
00:05:19,850 --> 00:05:22,890
And in case you're wondering what a port actually is,
89
00:05:22,890 --> 00:05:24,870
well it doesn't really matter,
90
00:05:24,870 --> 00:05:27,250
but all you need to know is it's basically
91
00:05:27,250 --> 00:05:30,540
a sub-address on a certain host,
92
00:05:30,540 --> 00:05:33,453
and the host is what we specify next.
93
00:05:34,400 --> 00:05:36,410
We actually don't need to specify it
94
00:05:36,410 --> 00:05:39,000
and then we'll default to a local host,
95
00:05:39,000 --> 00:05:42,140
but we can actually specify it also
96
00:05:42,140 --> 00:05:44,680
to local host explicitly.
97
00:05:44,680 --> 00:05:49,680
So, local host usually has this address as a default,
98
00:05:50,190 --> 00:05:53,390
and local host simply means the current computer.
99
00:05:53,390 --> 00:05:57,920
So the computer that the program is currently running in.
100
00:05:57,920 --> 00:06:00,680
And again, this is the standard IP address
101
00:06:00,680 --> 00:06:02,133
for that local host.
102
00:06:03,420 --> 00:06:07,830
So this one here will start listening for incoming requests.
103
00:06:07,830 --> 00:06:10,233
So basically starting up the server.
104
00:06:11,095 --> 00:06:13,550
And as an optional argument
105
00:06:13,550 --> 00:06:16,360
we can also pass in a callback function,
106
00:06:16,360 --> 00:06:19,110
which will be run as soon as the server
107
00:06:19,110 --> 00:06:20,893
actually starts listening.
108
00:06:22,060 --> 00:06:27,060
So here, it's quite usual to simply display a message
109
00:06:27,470 --> 00:06:30,350
that the server has been started.
110
00:06:30,350 --> 00:06:33,947
So let's say listening to requests on port 8000.
111
00:06:40,037 --> 00:06:42,830
And now all we have to do is to actually go
112
00:06:42,830 --> 00:06:47,320
to this url on our computer on port 8000.
113
00:06:47,320 --> 00:06:48,860
Now before we can do that of course,
114
00:06:48,860 --> 00:06:51,930
we have to run the Note application,
115
00:06:51,930 --> 00:06:56,560
so note index.js, and here we have our lock.
116
00:06:56,560 --> 00:06:59,803
So listening to request on port 8000.
117
00:07:00,680 --> 00:07:03,590
And you see that the app keeps running,
118
00:07:03,590 --> 00:07:06,090
so before it was always stopping
119
00:07:06,090 --> 00:07:08,270
right away, so it did its work,
120
00:07:08,270 --> 00:07:10,500
and then it exited the application.
121
00:07:10,500 --> 00:07:12,890
Right now it doesn't do that.
122
00:07:12,890 --> 00:07:15,770
That's because of something called the event loop
123
00:07:15,770 --> 00:07:17,920
that we're going to talk about a bit later
124
00:07:17,920 --> 00:07:20,270
in another section of this course.
125
00:07:20,270 --> 00:07:23,740
But, no matter what the technical reasons are for this,
126
00:07:23,740 --> 00:07:27,600
it is obvious that the app cannot really exit right away,
127
00:07:27,600 --> 00:07:31,513
because then we could not receive any new requests.
128
00:07:32,550 --> 00:07:34,290
So when we start a server,
129
00:07:34,290 --> 00:07:37,410
Note cannot simply exit the process
130
00:07:37,410 --> 00:07:40,790
so exit the program, because the whole goal
131
00:07:40,790 --> 00:07:43,523
is to wait for the requests to come in.
132
00:07:46,050 --> 00:07:48,650
So this is what I'm gonna show you next.
133
00:07:48,650 --> 00:07:53,650
For now, let's just open up the IP address on port 8000.
134
00:07:55,450 --> 00:07:59,850
And for that we use the colon, and then the port number.
135
00:07:59,850 --> 00:08:02,860
So, this is the host, which is local host,
136
00:08:02,860 --> 00:08:05,083
colon, and then the port number.
137
00:08:06,090 --> 00:08:08,340
Hit enter, and here we go.
138
00:08:08,340 --> 00:08:11,320
So, hello from the server!
139
00:08:11,320 --> 00:08:13,370
And so yeah, it really works.
140
00:08:13,370 --> 00:08:17,350
You have a real web server running on your computer
141
00:08:17,350 --> 00:08:20,880
using NoteJS, congratulations.
142
00:08:20,880 --> 00:08:25,880
So let's go back here and, again analyze what happened here.
143
00:08:27,220 --> 00:08:30,980
We created our server, using createServer
144
00:08:30,980 --> 00:08:33,260
and passed in a callback function
145
00:08:33,260 --> 00:08:36,620
that is executed each time that a new request
146
00:08:36,620 --> 00:08:39,820
hits the server, and then we started listening
147
00:08:39,820 --> 00:08:43,577
for incoming requests on the local host IP,
148
00:08:43,577 --> 00:08:45,440
and then on port 8000.
149
00:08:46,700 --> 00:08:50,840
Once we had all this running, we actually did the request
150
00:08:50,840 --> 00:08:52,840
by hitting that url.
151
00:08:52,840 --> 00:08:56,620
So basically by hitting local host on port 8000.
152
00:08:56,620 --> 00:09:01,460
So then, under the hood of NoteJS an event was fired
153
00:09:01,460 --> 00:09:03,230
which is something that, again,
154
00:09:03,230 --> 00:09:05,260
we're going to talk about a bit later.
155
00:09:05,260 --> 00:09:08,320
But what matters here is that this event
156
00:09:08,320 --> 00:09:12,633
then made it so this callback function was called.
157
00:09:14,060 --> 00:09:17,070
And finally as a result of that,
158
00:09:17,070 --> 00:09:19,463
we then got back this string.
159
00:09:22,590 --> 00:09:26,030
Just for the sake of curiosity,
160
00:09:26,030 --> 00:09:29,633
lets actually take a look at the request object.
161
00:09:32,760 --> 00:09:37,340
We need to close the server and start it again
162
00:09:37,340 --> 00:09:39,340
because we did some changes to the code.
163
00:09:40,550 --> 00:09:44,530
And notice how this time I actually used control C
164
00:09:44,530 --> 00:09:47,090
in order to exit the application.
165
00:09:47,090 --> 00:09:49,430
So remember that in the beginning
166
00:09:49,430 --> 00:09:51,100
when we used the ripple,
167
00:09:51,100 --> 00:09:54,033
I used control D in order to exit it.
168
00:09:55,270 --> 00:09:58,700
But now when we have a Note program running like this
169
00:09:58,700 --> 00:10:02,060
We need to use control C to basically break
170
00:10:02,060 --> 00:10:03,253
from that program.
171
00:10:05,420 --> 00:10:08,200
That's why here I used control C
172
00:10:08,200 --> 00:10:10,102
and throughout the rest of the course
173
00:10:10,102 --> 00:10:12,300
when I want to finish a program
174
00:10:12,300 --> 00:10:15,090
I will always be using control C.
175
00:10:15,090 --> 00:10:18,500
So, that's control and not command C, again.
176
00:10:18,500 --> 00:10:21,373
Even on a Mac you need to use control C.
177
00:10:23,810 --> 00:10:27,920
Let's now do this again, we get the same response,
178
00:10:27,920 --> 00:10:30,990
but now we should have something in the console.
179
00:10:30,990 --> 00:10:35,060
So this here is the request object,
180
00:10:35,060 --> 00:10:38,580
and as I mentioned, there is a ton of stuff in here.
181
00:10:38,580 --> 00:10:39,910
You see it?
182
00:10:39,910 --> 00:10:44,910
All of this, it doesn't even fit actually in the console.
183
00:10:47,366 --> 00:10:49,610
I think I cannot even show you
184
00:10:51,865 --> 00:10:53,633
all the cool data that is in there.
185
00:10:56,670 --> 00:10:59,590
Actually here we have some headers,
186
00:10:59,590 --> 00:11:04,590
so we have the host and here we have some...
187
00:11:04,680 --> 00:11:07,900
Again, so we have some http headers,
188
00:11:07,900 --> 00:11:09,870
which is something that we're going to talk about
189
00:11:09,870 --> 00:11:11,763
I think in the next video.
190
00:11:13,970 --> 00:11:17,430
Anyway, what matters here is that we really
191
00:11:17,430 --> 00:11:20,800
get access to all kinds of stuff
192
00:11:20,800 --> 00:11:25,033
when we handle the request and send out the response.
193
00:11:26,470 --> 00:11:29,193
Doesn't matter here, let's actually get rid of this,
194
00:11:30,670 --> 00:11:35,320
give it a save, and then quit this, and start it again.
195
00:11:35,320 --> 00:11:37,890
And now just to finish this video,
196
00:11:37,890 --> 00:11:40,470
I want to show you what we're actually gonna build
197
00:11:40,470 --> 00:11:42,280
in the next couple of lectures
198
00:11:43,150 --> 00:11:45,870
until the end of this section.
199
00:11:45,870 --> 00:11:50,870
So it's this small fun app called the node farm.
200
00:11:52,592 --> 00:11:56,240
We have a couple of products here,
201
00:11:56,240 --> 00:11:57,940
and we built all of this here
202
00:11:57,940 --> 00:12:00,747
using a very simple html template,
203
00:12:00,747 --> 00:12:03,310
and you can then click on the link
204
00:12:03,310 --> 00:12:06,670
and it will basically take you to the detail page
205
00:12:06,670 --> 00:12:10,500
for this product, in this case the avocados.
206
00:12:10,500 --> 00:12:13,030
It has a bunch of data here,
207
00:12:13,030 --> 00:12:15,860
a button which doesn't do anything,
208
00:12:15,860 --> 00:12:18,023
and then we can go back to the page.
209
00:12:18,870 --> 00:12:22,180
So, avocados, then we have the cheese for example,
210
00:12:22,180 --> 00:12:24,550
and it has then, of course, different data
211
00:12:24,550 --> 00:12:28,273
for each of these products.
212
00:12:28,273 --> 00:12:33,273
So it has this nice fresh, kind of crazy design to it
213
00:12:33,540 --> 00:12:36,900
to make it pop a little bit, and yeah,
214
00:12:36,900 --> 00:12:40,100
I think this is a fun little project.
215
00:12:40,100 --> 00:12:42,150
And we're gonna start building it actually,
216
00:12:42,150 --> 00:12:43,833
right in the next video.
17082
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.