1
00:00:00,180 --> 00:00:02,480
There are two common HTTP methods or

2
00:00:02,480 --> 00:00:08,050
ways to communicate with an HTTP server,
and that's GET and POST.

3
00:00:08,050 --> 00:00:11,720
Without realizing it, every time you type
in a website, you're creating

4
00:00:11,720 --> 00:00:16,720
a GET request because you're retrieving
information from a website address.

5
00:00:18,540 --> 00:00:24,570
When you create a form, you can specify
which method to use, GET or POST.

6
00:00:24,570 --> 00:00:30,650
Specifying GET encodes the form's contents
into a query string at the end of the URL,

7
00:00:30,650 --> 00:00:35,950
where POST sends the form's contents as
part of the request's body.

8
00:00:35,950 --> 00:00:40,090
That's the client request body, similar to
the service response body.

9
00:00:41,110 --> 00:00:44,210
Now, if you can't envisage what that
means, let me show you.

10
00:00:46,010 --> 00:00:49,470
Okay, let's take a look at our application
running.

11
00:00:53,080 --> 00:00:55,280
And click on Preview.

12
00:00:55,280 --> 00:00:58,210
[BLANK_AUDIO]

13
00:00:58,210 --> 00:01:02,999
And I'm gonna show you the URL of what
it's like

14
00:01:02,999 --> 00:01:07,680
to send a GET request in the search form.

15
00:01:07,680 --> 00:01:11,020
So I'm just inspecting the form here and

16
00:01:11,020 --> 00:01:15,590
changing it from POST to GET, so this
temporarily changing it.

17
00:01:16,780 --> 00:01:19,090
And let's type in chalkers.

18
00:01:20,340 --> 00:01:24,800
Click on search, and, as you can see, it
says username chalkers.

19
00:01:25,940 --> 00:01:28,380
And as you can see the URL, you know,

20
00:01:28,380 --> 00:01:31,550
causes an error because it tries to look
up this.

21
00:01:31,550 --> 00:01:34,300
But this is what a GET request looks like.

22
00:01:34,300 --> 00:01:36,310
So let's go back to the home.

23
00:01:38,320 --> 00:01:41,950
And lets type in chalkers and click on
search.

24
00:01:45,650 --> 00:01:49,460
And it does a POST request to the home
route, so

25
00:01:49,460 --> 00:01:53,290
the information in the form is actually
sent in the body

26
00:01:53,290 --> 00:01:58,980
of the request rather then as the URL
query string at the top there.

27
00:01:58,980 --> 00:02:01,010
So that's the difference between GET and a
POST.

28
00:02:01,010 --> 00:02:04,849
If you want to hide the, the form contents
from the URL,

29
00:02:04,849 --> 00:02:09,081
sometimes you don't want to allow people
to see that.

30
00:02:09,081 --> 00:02:12,448
And it's just cleaner, anyway,

31
00:02:12,448 --> 00:02:17,902
to say slash the username like this than
have the URL

32
00:02:17,902 --> 00:02:22,910
have question mark username is equal to
chalkers.

33
00:02:22,910 --> 00:02:27,970
That doesn't look very nice, whereas this
looks a lot better.

34
00:02:27,970 --> 00:02:32,803
So that's the kind of feel that we're
trying to get for in our application.

35
00:02:32,803 --> 00:02:37,263
How do we get that information out of the
body of the request?

36
00:02:37,263 --> 00:02:43,834
So if we go back to Node's documentation,

37
00:02:43,834 --> 00:02:50,228
click on Docs, API Docs, and then HTTP.

38
00:02:50,228 --> 00:02:53,630
We know that the request is an incoming
message.

39
00:02:53,630 --> 00:03:00,430
And that means that it's got these
properties like http,

40
00:03:00,430 --> 00:03:05,050
headers rawHeaders, and something called
method.

41
00:03:05,050 --> 00:03:10,650
So we can check if it's a GET method,
DELETE method, PUT method, or POST.

42
00:03:10,650 --> 00:03:12,010
GET and POST are the most common ones.

43
00:03:12,010 --> 00:03:16,810
DELETE and PUT and PATCH are some that
you'll use in other instances.

44
00:03:16,810 --> 00:03:19,530
But we just wanna check out the GET.

45
00:03:19,530 --> 00:03:25,870
So if we back to our workspace, we can now
alter the code here.

46
00:03:25,870 --> 00:03:33,492
So if it matches slash, then we want to
check if it also matches GET,

47
00:03:33,492 --> 00:03:39,210
so if request.method.

48
00:03:39,210 --> 00:03:44,290
And I'm gonna do it toLowercase because,

49
00:03:44,290 --> 00:03:47,979
just in case, if a different browser or

50
00:03:47,979 --> 00:03:54,470
a different client sends GET incorrectly,
the server may still pick it up.

51
00:03:54,470 --> 00:03:58,668
So I'm just going to indent that so it
looks nice.

52
00:03:58,668 --> 00:04:01,660
And do get.

53
00:04:01,660 --> 00:04:05,780
So if the request is GET, then we show
what we normally show.

54
00:04:07,440 --> 00:04:11,439
But if it's anything else, so if it's
POST,

55
00:04:11,439 --> 00:04:16,471
basically, we want to do something to the
POST body data.

56
00:04:16,471 --> 00:04:22,101
[BLANK_AUDIO]

57
00:04:22,101 --> 00:04:28,050
Okay, so let's just copy our comments from
down here and put them in here.

58
00:04:28,050 --> 00:04:33,520
So if the URL is slash and POST, we wanna
redirect to the user.

59
00:04:33,520 --> 00:04:38,930
So we need to get this user out of the,
the POST body data.

60
00:04:40,684 --> 00:04:49,342
So what we need to do is get the POST data
from body.

61
00:04:49,342 --> 00:04:53,322
[BLANK_AUDIO]

62
00:04:53,322 --> 00:04:58,470
Extract the username, and then redirect to
the username.

63
00:04:58,470 --> 00:05:00,060
So those are the steps that we need to
take.

64
00:05:01,930 --> 00:05:05,830
So going back to our incomingMessage,

65
00:05:05,830 --> 00:05:12,101
let's check the different types of events
that occur on this.

66
00:05:12,101 --> 00:05:15,650
[BLANK_AUDIO]

67
00:05:15,650 --> 00:05:20,130
What it says, there is a close event.

68
00:05:20,130 --> 00:05:22,465
And it's a Readable stream, so let's have
a look at that.

69
00:05:22,465 --> 00:05:27,638
So a Readable stream has a data event.

70
00:05:27,638 --> 00:05:32,470
So because this incomingMessage is an
implementation of this,

71
00:05:32,470 --> 00:05:36,570
there are other types of events associated
with it.

72
00:05:36,570 --> 00:05:38,970
So you may need to dig deeper into this.

73
00:05:38,970 --> 00:05:46,730
But like when you create a client request,
when you're creating a scraper, for

74
00:05:46,730 --> 00:05:51,990
example, or an API reader, the response is
an incomingMessage to the client.

75
00:05:53,890 --> 00:05:58,698
So, but in this instance, we're creating a
server which has the request which is

76
00:05:58,698 --> 00:06:02,100
an incoming client, so it has a data
event.

77
00:06:02,100 --> 00:06:06,798
So when you're reading a response body
from a server reading

78
00:06:06,798 --> 00:06:11,230
like a script in an API, for example, you
listen to a data event.

79
00:06:11,230 --> 00:06:16,110
And the same goes for a request when the
request is receive,

80
00:06:16,110 --> 00:06:17,850
is an incoming event for the server.

81
00:06:17,850 --> 00:06:21,270
So they're like two sides of the same
coin.

82
00:06:21,270 --> 00:06:24,755
But depending on the context, the
incomingMessages is a response or

83
00:06:24,755 --> 00:06:25,920
a request.

84
00:06:25,920 --> 00:06:29,335
But since we're creating a server, the
request is an incomingMessage.

85
00:06:29,335 --> 00:06:38,074
So let's do request.on data.

86
00:06:38,074 --> 00:06:42,184
[BLANK_AUDIO]

87
00:06:42,184 --> 00:06:44,244
And that's gonna be the postBody.

88
00:06:44,244 --> 00:06:50,943
And let's console.log that.

89
00:06:50,943 --> 00:06:58,331
[BLANK_AUDIO]

90
00:06:58,331 --> 00:07:00,560
And let's see what happens when we do
that.

91
00:07:01,890 --> 00:07:07,750
So kill any servers that I'm running,
start it up again, go to 3000.

92
00:07:07,750 --> 00:07:11,890
It's, this is the GET request, so let's
try the POST request.

93
00:07:11,890 --> 00:07:14,359
So let's do chalkers and hit search.

94
00:07:14,359 --> 00:07:18,519
[BLANK_AUDIO]

95
00:07:18,519 --> 00:07:24,060
And we should see that there's a buffer.

96
00:07:24,060 --> 00:07:29,280
And remember what we were saying before,
how when you're reading data in from a,

97
00:07:29,280 --> 00:07:32,180
from a stream like like streaming from the
hard drive or

98
00:07:32,180 --> 00:07:35,260
streaming off the network, it's a type
buffer.

99
00:07:35,260 --> 00:07:37,870
So we need to convert this buffer into a
string.

100
00:07:37,870 --> 00:07:42,890
And we can do that by doing toString.

101
00:07:42,890 --> 00:07:48,220
So if you were to add this POST body to
another string,

102
00:07:48,220 --> 00:07:52,790
so if you had a string which was empty so

103
00:07:54,510 --> 00:08:00,470
let's call it body, and then plus that,
JavaScript

104
00:08:00,470 --> 00:08:05,750
coerces whatever's on this right-hand side
into the type of the thing preceding it.

105
00:08:05,750 --> 00:08:08,900
So in this case, it would be the string.

106
00:08:08,900 --> 00:08:13,910
So there is a method on it that we can
just use, and we can do that instead.

107
00:08:13,910 --> 00:08:15,830
So let's try that out now.

108
00:08:15,830 --> 00:08:19,990
So Ctrl+C to kill the app, then start it
up again.

109
00:08:22,400 --> 00:08:25,870
Go to the port and search again.

110
00:08:25,870 --> 00:08:26,670
So let's search.

111
00:08:28,930 --> 00:08:32,520
And as we can see, it says username equals
chalkers.

112
00:08:32,520 --> 00:08:38,370
So this is exactly like having it in the
URL,

113
00:08:38,370 --> 00:08:42,760
but it's actually hidden away in the body
of the request.

114
00:08:43,840 --> 00:08:46,990
So how do we get the information out?

115
00:08:46,990 --> 00:08:50,080
How do we extract the username from the
body?

116
00:08:51,422 --> 00:08:55,353
Because this isn't the same format as a
query string,

117
00:08:55,353 --> 00:09:00,063
what we can do is take a look at some Node
API documentation again.

118
00:09:00,063 --> 00:09:05,322
So, nodejs.org, Docs, API.

119
00:09:05,322 --> 00:09:08,670
And then you should, you can see there's
Query Strings.

120
00:09:08,670 --> 00:09:13,545
So I'll click on there, and it's stable
right now, so

121
00:09:13,545 --> 00:09:17,710
what we can do is we can look at parsing a
string.

122
00:09:17,710 --> 00:09:20,320
And so if we parse this string,

123
00:09:20,320 --> 00:09:26,640
we'd have foo dot foo bar, so username
equals chalkers.

124
00:09:26,640 --> 00:09:29,275
So when we parse it we get a,

125
00:09:29,275 --> 00:09:33,640
an object back that we can just access by
doing dot username.

126
00:09:33,640 --> 00:09:36,313
So let's try that out.

127
00:09:36,313 --> 00:09:40,419
So remember, when we include modules,

128
00:09:40,419 --> 00:09:44,523
that's include them at the top, so

129
00:09:44,523 --> 00:09:49,736
var querystring is equal to require
querystring.

130
00:09:49,736 --> 00:09:50,824
And then

131
00:09:50,824 --> 00:09:55,745
[BLANK_AUDIO]

132
00:09:55,745 --> 00:09:59,592
var query is equal to

133
00:09:59,592 --> 00:10:04,812
the querystring.parse.

134
00:10:04,812 --> 00:10:10,780
And then, actually, we need to do this
inside of the data callback

135
00:10:12,240 --> 00:10:15,990
or else we won't be able to get at that
POST body.

136
00:10:18,690 --> 00:10:23,912
So we want to convert the POST body
string,

137
00:10:23,912 --> 00:10:28,410
which is this query string here, and

138
00:10:28,410 --> 00:10:34,090
we'll get a dictionary back or a JSON
object.

139
00:10:34,090 --> 00:10:39,556
And let's just do response.write

140
00:10:39,556 --> 00:10:45,210
query.username and test that out.

141
00:10:45,210 --> 00:10:52,770
Don't forget to end the response, as well.

142
00:10:54,320 --> 00:10:56,810
And let's see if we're getting the
information out like we expect.

143
00:10:57,870 --> 00:10:58,638
So, kill.

144
00:10:58,638 --> 00:11:04,628
[BLANK_AUDIO]

145
00:11:04,628 --> 00:11:09,022
Start it up again, chalkers, search.

146
00:11:09,022 --> 00:11:14,753
And as you can see, we've got chalkers
printing out to the response.

147
00:11:14,753 --> 00:11:22,135
And now, we need to find out how to use
this to go to slash chalkers.

148
00:11:22,135 --> 00:11:24,519
[BLANK_AUDIO]