1
00:00:00,180 --> 00:00:03,270
The first step in our planning was to
create a web server.

2
00:00:03,270 --> 00:00:07,650
That is, something that listens to
requests from clients like a web browser.

3
00:00:07,650 --> 00:00:09,210
Let's go to the node.js website and

4
00:00:09,210 --> 00:00:12,580
see what it has to say about creating web
servers.

5
00:00:12,580 --> 00:00:17,590
If you go to nodejs.org you'll see we've
got the home,

6
00:00:17,590 --> 00:00:20,850
downloads, docs, community, about, jobs,
and blog.

7
00:00:20,850 --> 00:00:24,700
But, also, on this homepage we can install
on our local machine.

8
00:00:24,700 --> 00:00:28,180
But they give us some examples of node.js
code.

9
00:00:28,180 --> 00:00:32,650
So here's an example of a web server,
which is what we wanna build.

10
00:00:32,650 --> 00:00:36,310
So it goes var, http, require http.

11
00:00:36,310 --> 00:00:36,980
Cool.

12
00:00:36,980 --> 00:00:38,730
Then it creates server.

13
00:00:38,730 --> 00:00:43,500
With a callback, with a req and a res,
which means request and response.

14
00:00:45,120 --> 00:00:51,470
And it writes 200, which is the status
code saying everything's okay.

15
00:00:51,470 --> 00:00:54,830
And it prints out text.

16
00:00:54,830 --> 00:00:55,970
Hello world.

17
00:00:55,970 --> 00:00:59,720
So this is end, this is the, the response
is end.

18
00:00:59,720 --> 00:01:05,368
And it listens on port 1337 or leet.

19
00:01:05,368 --> 00:01:14,031
[LAUGH] And listens on the IP address
127.0.0.1.

20
00:01:14,031 --> 00:01:17,670
Which is your local machine if you're on a
local machine.

21
00:01:17,670 --> 00:01:19,580
And it prints out a log.

22
00:01:19,580 --> 00:01:25,010
So, let's just copy and paste this into
our application.

23
00:01:25,010 --> 00:01:29,070
So underneath where we said to create a
web server let's paste this.

24
00:01:32,635 --> 00:01:38,945
And let's update the code so it doesn't
say res and req.

25
00:01:38,945 --> 00:01:43,685
So let's do request and response so

26
00:01:43,685 --> 00:01:48,620
it's absolutely clear what we're
programming here.

27
00:01:48,620 --> 00:01:54,000
Cuz it's not that obvious when it's in
that short hand.

28
00:01:55,520 --> 00:01:58,360
Now in order for this to work in
workspaces,

29
00:01:58,360 --> 00:02:02,380
if you look up here on the right hand side
we've got different port numbers.

30
00:02:02,380 --> 00:02:09,380
And those are just basically what the
server listens on to the outside world.

31
00:02:09,380 --> 00:02:15,152
So instead of having 1337, we can pick any
one of these numbers here,

32
00:02:15,152 --> 00:02:17,871
so we can pick 3000 for example.

33
00:02:17,871 --> 00:02:21,881
[BLANK_AUDIO]

34
00:02:21,881 --> 00:02:24,609
And because workspaces isn't our local
machine,

35
00:02:24,609 --> 00:02:28,100
it's a machine on the Internet with its
own IP address.

36
00:02:28,100 --> 00:02:32,910
We can just, actually, remove this
parameter here, and

37
00:02:32,910 --> 00:02:36,410
it will just listen, naturally, to the,
the world out there.

38
00:02:38,460 --> 00:02:41,700
And we can do, instead of this,

39
00:02:41,700 --> 00:02:49,000
we'll just write workspace url, just as a
placehold.

40
00:02:49,000 --> 00:02:54,520
It's, it doesn't do anything, it's just
for our benefit when we run the survey it

41
00:02:54,520 --> 00:02:59,750
shows that we've started running it, it's
just a console.log, it's nothing magic.

42
00:02:59,750 --> 00:03:03,030
So, if we do show console and

43
00:03:03,030 --> 00:03:10,400
then node app.js,

44
00:03:10,400 --> 00:03:14,110
we can see the server's running at the
workspace-url,

45
00:03:14,110 --> 00:03:18,820
and when we go to port 3000, it goes hello
world.

46
00:03:18,820 --> 00:03:20,940
So this is the URL here.

47
00:03:22,010 --> 00:03:28,742
Normally when you're on your local machine
you'd do something like localhost:3000,

48
00:03:28,742 --> 00:03:33,490
but because we're in workspaces theres a
special

49
00:03:33,490 --> 00:03:38,610
url that gets generated, and it says port
3000 at the beginning.

50
00:03:38,610 --> 00:03:41,080
It's just a convention that treehouse
uses,

51
00:03:41,080 --> 00:03:44,390
it's not anything that you'd do on your
local machine.

52
00:03:46,530 --> 00:03:49,410
So as we can see Hello World is printing
out, but

53
00:03:49,410 --> 00:03:52,650
what happens if we go to say /chalkers or
something like that.

54
00:03:55,440 --> 00:03:57,870
It still says Hello World.

55
00:03:57,870 --> 00:04:02,310
So every single route we go to it just
prints out that response, Hello World.

56
00:04:02,310 --> 00:04:05,560
So we'll need to figure out how to handle
different URLs in the future.

57
00:04:06,570 --> 00:04:10,710
Let's try out writing more than just one
line to the response.

58
00:04:11,830 --> 00:04:17,365
We can do response.write.

59
00:04:17,365 --> 00:04:20,921
[BLANK_AUDIO]

60
00:04:20,921 --> 00:04:26,553
And we can say this is before the end,

61
00:04:26,553 --> 00:04:32,916
and slash enters the return character and

62
00:04:32,916 --> 00:04:40,020
afterwards let's do response don't write.

63
00:04:42,990 --> 00:04:45,822
This is after the end.

64
00:04:45,822 --> 00:04:50,352
[BLANK_AUDIO]

65
00:04:50,352 --> 00:04:55,890
So what, what I'm saying by end is in this
method here, this response to end call.

66
00:04:57,460 --> 00:04:59,539
And let's run this in the console.

67
00:04:59,539 --> 00:05:04,174
[BLANK_AUDIO]

68
00:05:04,174 --> 00:05:07,220
App.js, and we've got a problem.

69
00:05:08,670 --> 00:05:14,280
When we scroll up it says that the listen
address is in use,

70
00:05:14,280 --> 00:05:17,340
so port 3000 is already being listened to
so.

71
00:05:17,340 --> 00:05:21,170
What happened is when we closed the
console to get more screen space,

72
00:05:21,170 --> 00:05:22,400
Node was still running.

73
00:05:22,400 --> 00:05:25,680
It's still running right now in the
workspace.

74
00:05:25,680 --> 00:05:29,420
But the problem is is that when we started
up a new console,

75
00:05:29,420 --> 00:05:31,070
we're trying to bind to that same port.

76
00:05:31,070 --> 00:05:34,100
We're trying to listen on that same port
3000.

77
00:05:34,100 --> 00:05:37,830
So we need to kill the process of node.

78
00:05:37,830 --> 00:05:41,960
Now, if you're not familiar with killing
processes, it's fairly simple.

79
00:05:41,960 --> 00:05:45,830
What you need to do is figure out what you
need to kill.

80
00:05:45,830 --> 00:05:51,180
So [LAUGH] you do PS which is for
processes and then just type aux.

81
00:05:51,180 --> 00:05:55,070
And as you can see here we've got a node
app running, and

82
00:05:55,070 --> 00:05:59,990
this is the identification number for that
particular app instance running.

83
00:05:59,990 --> 00:06:06,960
So we can do kill minus nine, four, nine,
six.

84
00:06:06,960 --> 00:06:08,640
And then it should have killed it.

85
00:06:09,680 --> 00:06:15,130
So, now we can do node, app.js and it
should run perfectly.

86
00:06:15,130 --> 00:06:23,180
So, be mindful that you can kill the
server by just putting Ctrl+C twice.

87
00:06:23,180 --> 00:06:28,060
And it will, you can boot it up again like
that, or

88
00:06:28,060 --> 00:06:32,980
you'd have to go through the process where
you do ps minus aux and

89
00:06:32,980 --> 00:06:36,800
then find the process ID and then kill
that process.

90
00:06:36,800 --> 00:06:42,270
So let's go to here and it says this is
before the end.

91
00:06:42,270 --> 00:06:42,980
Hello world.

92
00:06:42,980 --> 00:06:45,930
And we don't see this is after the end.

93
00:06:45,930 --> 00:06:50,920
That's because, when we call the end, we
can't write to the response anymore.

94
00:06:50,920 --> 00:06:52,650
The end says it's done.

95
00:06:52,650 --> 00:06:54,190
The response is over from the server,

96
00:06:54,190 --> 00:06:58,280
so the browser isn't gonna be listening to
anything coming from the server anymore.

97
00:07:00,160 --> 00:07:02,100
So, let's try something else out.

98
00:07:02,100 --> 00:07:04,480
We can do a set interval.

99
00:07:09,172 --> 00:07:14,430
And setInterval is a way for doing
something every so many milliseconds.

100
00:07:14,430 --> 00:07:19,520
So we can do something like print

101
00:07:19,520 --> 00:07:23,610
the dates of the response, of the day time
every one second.

102
00:07:23,610 --> 00:07:26,320
So in milliseconds that's 1,000.

103
00:07:26,320 --> 00:07:30,600
Milliseconds per second, and we can write.

104
00:07:32,450 --> 00:07:37,200
I'm just going to terminate this node
instance by doing Cmd+C, click on x.

105
00:07:39,290 --> 00:07:40,900
Sorry, not Cmd+C, Ctrl+C.

106
00:07:43,190 --> 00:07:51,860
And then let's write new date.

107
00:07:53,170 --> 00:07:56,500
And we can add that to the return counter
so

108
00:07:56,500 --> 00:07:59,380
we'll see the date get printed out on
every single line.

109
00:08:01,460 --> 00:08:03,396
Let's get rid of this after response.

110
00:08:03,396 --> 00:08:06,762
[BLANK_AUDIO]

111
00:08:06,762 --> 00:08:09,407
And do response to end and see what
happens.

112
00:08:09,407 --> 00:08:16,142
[BLANK_AUDIO]

113
00:08:16,142 --> 00:08:16,700
Node.

114
00:08:18,990 --> 00:08:22,425
So let's type node app.js.

115
00:08:26,170 --> 00:08:27,090
Click on preview.

116
00:08:28,110 --> 00:08:29,190
And it just says hello world.

117
00:08:29,190 --> 00:08:30,240
What, what happened there?

118
00:08:34,150 --> 00:08:38,102
Well, set interval actually executes
after that first second so

119
00:08:38,102 --> 00:08:44,510
this callback got called after this line
of code got executed,

120
00:08:44,510 --> 00:08:50,100
so the callback gets executed one second
after this gets run.

121
00:08:50,100 --> 00:08:52,732
So, it doesn't go to the response.

122
00:08:52,732 --> 00:08:56,537
So lets get rid of the end of the
response, hello world, and

123
00:08:56,537 --> 00:09:00,357
just see what's happens when we just run
the set interval.

124
00:09:00,357 --> 00:09:10,469
[BLANK_AUDIO]

125
00:09:10,469 --> 00:09:16,085
So, it took about 20 seconds or so for
this to show up on the page

126
00:09:16,085 --> 00:09:21,640
because Chrome expects that a web page is
being delivered.

127
00:09:21,640 --> 00:09:24,800
Like the header, the body,

128
00:09:24,800 --> 00:09:29,010
the footer, all those types of things are
going to be delivered.

129
00:09:29,010 --> 00:09:31,730
But because we're not actually ending the
response,

130
00:09:31,730 --> 00:09:35,680
it waited 20 seconds before attempting to
render it.

131
00:09:35,680 --> 00:09:39,840
Because it felt like, oh maybe we'll get
all this information together and

132
00:09:39,840 --> 00:09:43,240
we can render the HTML, or what have you.

133
00:09:43,240 --> 00:09:49,430
So, Chrome waited for a while, expecting
that the file

134
00:09:49,430 --> 00:09:54,325
that it's downloading is HTML or text or
what have you.

135
00:09:54,325 --> 00:09:57,930
It expected that it have an end, but

136
00:09:57,930 --> 00:10:02,070
because we didn't specify an end, it gave
up after 20 seconds or so,

137
00:10:02,070 --> 00:10:07,300
and then it starts printing out the time
every one second.

138
00:10:07,300 --> 00:10:11,670
So this is a kind of a powerful thing that
node can do is it,

139
00:10:11,670 --> 00:10:16,320
it can literally create a connection and
keep it open and keep sending data down.

140
00:10:16,320 --> 00:10:20,680
And for some applications that's really
good and which,

141
00:10:20,680 --> 00:10:24,150
which we won't cover in this course, but
we'll cover in a future time.

142
00:10:25,370 --> 00:10:32,040
So let's just kill that instance by doing
Cmd Ctrl+C.

143
00:10:32,040 --> 00:10:36,290
And in the next video we'll figure out how
to handle multiple roots,

144
00:10:36,290 --> 00:10:41,430
because we're doing the same thing in all
the different roots right now.

145
00:10:41,430 --> 00:10:45,520
Experiencing JavaScript's asynchronous
nature in the context of creating

146
00:10:45,520 --> 00:10:50,160
a web server response provided us with a
very important learning opportunity

147
00:10:50,160 --> 00:10:53,240
that once the end method is called on the
response,

148
00:10:53,240 --> 00:10:56,190
you can't add additional data to the
response.