1
00:00:03,880 --> 00:00:06,815
Позвольте мне начать с

2
00:00:06,815 --> 00:00:11,165
краткого 10-минутного введения в «Основы сетевого взаимодействия».

3
00:00:11,165 --> 00:00:14,045
Учитывая тот факт, что у нас мало времени,

4
00:00:14,045 --> 00:00:16,355
я бы

5
00:00:16,355 --> 00:00:21,191
сосредоточился на предоставлении вам необходимых для понимания каждой из тем.

6
00:00:21,191 --> 00:00:26,240
Теперь, то, что мы рассматриваем в данном конкретном модуле, потребует,

7
00:00:26,240 --> 00:00:30,230
по крайней мере, элементарного понимания того, как

8
00:00:30,230 --> 00:00:34,255
работает компьютерная сеть, прежде чем мы поймем,

9
00:00:34,255 --> 00:00:36,700
почему нам нужно использовать HTTP, почему мы общаемся с сервером,

10
00:00:36,700 --> 00:00:42,485
в чем причина задержки, когда вы общаетесь с сервером и так далее.

11
00:00:42,485 --> 00:00:45,920
Кроме того, различные протоколы, о которых вы

12
00:00:45,920 --> 00:00:50,335
должны знать, прежде чем вы сможете даже общаться с сервером.

13
00:00:50,335 --> 00:00:53,540
Итак, имея в виду все это,

14
00:00:53,540 --> 00:00:58,945
10-минутное краткое введение в Основы работы с сетями.

15
00:00:58,945 --> 00:01:03,600
Мы начинаем понимать, что веб-приложения больше не являются автономными. У

16
00:01:03,600 --> 00:01:11,030
них всегда есть цитата конец цитаты Cloud бэкэнд, поддерживающий ваше веб-приложение.

17
00:01:11,030 --> 00:01:13,535
Теперь в эти дни все находится на облаке.

18
00:01:13,535 --> 00:01:15,500
Довольно скоро вы тоже окажетесь в Облаке,

19
00:01:15,500 --> 00:01:19,455
по крайней мере, на облаке девять с серебряной подкладкой.

20
00:01:19,455 --> 00:01:23,785
Но, учитывая, что нам

21
00:01:23,785 --> 00:01:29,090
нужна поддержка на стороне сервера, чтобы наше угловое приложение работало правильно,

22
00:01:29,090 --> 00:01:31,295
там вы бы разместили сервер.

23
00:01:31,295 --> 00:01:36,405
И в наши дни хостинг сервера очень

24
00:01:36,405 --> 00:01:42,575
легко сделать с помощью одного из облачных инфраструктурных сервисов,

25
00:01:42,575 --> 00:01:48,260
таких как Amazon Web Services, Heroku или Digital

26
00:01:48,260 --> 00:01:55,190
Ocean или многие другие, которые обеспечивают поддержку облачных серверов.

27
00:01:55,190 --> 00:01:59,235
Итак, что именно доступно на стороне сервера?

28
00:01:59,235 --> 00:02:06,744
Обычно у вас есть серверный интерфейс, который разговаривает с вашим угловым приложением,

29
00:02:06,744 --> 00:02:14,615
так что это логика сервера, а за кулисами логика сервера взаимодействует с

30
00:02:14,615 --> 00:02:23,665
постоянным хранилищем, таким как база данных, в которой хранятся и извлекаются ваши данные.

31
00:02:23,665 --> 00:02:26,130
Когда вы войдете в сетевой мир,

32
00:02:26,130 --> 00:02:31,064
вы довольно скоро будете бомбардированы 304 маленькими акронимами,

33
00:02:31,064 --> 00:02:36,230
вещами, которые, как вы думали, вы знали, что они были из обычного английского языка, или они имеют

34
00:02:36,230 --> 00:02:38,360
совершенно другое значение или

35
00:02:38,360 --> 00:02:42,375
цель, когда вы сталкиваетесь с ними в этом сетевом мире.

36
00:02:42,375 --> 00:02:44,470
Итак, давайте рассмотрим несколько из них.

37
00:02:44,470 --> 00:02:49,020
Таким образом, в сетевом мире вы услышите людей, говорящих по протоколу HTTP.

38
00:02:49,020 --> 00:02:53,215
Протокол, используемый для связи между клиентом и сервером.

39
00:02:53,215 --> 00:02:56,960
Это протокол уровня приложений, о котором мы кратко

40
00:02:56,960 --> 00:03:01,135
расскажем чуть больше в остальной части этой лекции.

41
00:03:01,135 --> 00:03:07,550
Протокол HTTP для его работы нуждается в URL-адресе, который будет предоставлен ему,

42
00:03:07,550 --> 00:03:09,715
Единый локатор ресурсов.

43
00:03:09,715 --> 00:03:15,205
Таким образом, это строка символов, разделенных косой чертой,

44
00:03:15,205 --> 00:03:22,355
с двоеточием HTTP или двоеточием HTTPS, прикрепленным перед ним.

45
00:03:22,355 --> 00:03:25,547
И я уверен, что если вы использовали World Wide Web,

46
00:03:25,547 --> 00:03:29,395
вы довольно знакомы с тем, как выглядят URL-адреса.

47
00:03:29,395 --> 00:03:33,230
Теперь, кроме того, вы услышите, как люди говорят о JSON,

48
00:03:33,230 --> 00:03:38,380
а не о вашем друге Джейсоне, а о JavaScript Object Notation.

49
00:03:38,380 --> 00:03:43,610
Таким образом, обозначение объектов JavaScript - это один из способов кодирования данных, которые

50
00:03:43,610 --> 00:03:49,660
отправляются со стороны сервера на сторону клиента или наоборот.

51
00:03:49,660 --> 00:03:54,320
А также вы услышите, как люди говорят о XML еще одном способе

52
00:03:54,320 --> 00:04:01,205
кодирования данных во время транспортировки между клиентом и сервером.

53
00:04:01,205 --> 00:04:08,375
Теперь вы также услышите, как люди говорят о протоколах более высокого уровня под названием SOAP,

54
00:04:08,375 --> 00:04:14,045
а не о том, с которым вы принимаете душ, но SOAP как протокол, который

55
00:04:14,045 --> 00:04:21,975
позволяет обмениваться данными между объектами распределения в их сети.

56
00:04:21,975 --> 00:04:25,295
А также, вы услышите, как люди говорят о REST,

57
00:04:25,295 --> 00:04:29,505
а не о том, что вы получаете слишком много прохождения этого конкретного курса,

58
00:04:29,505 --> 00:04:36,200
REST или репрезентационного государственного перевода. В этом

59
00:04:36,200 --> 00:04:40,970
модуле у меня будет более короткая лекция, специально посвященная REST.

60
00:04:40,970 --> 00:04:42,905
И в мире HTTP

61
00:04:42,905 --> 00:04:45,990
вы услышите, как люди говорят о GET, PUT

62
00:04:45,990 --> 00:04:50,210
, POST и DELETE, и вам будет интересно,

63
00:04:50,210 --> 00:04:52,200
что они все означают?

64
00:04:52,200 --> 00:04:55,250
Давайте узнаем немного об

65
00:04:55,250 --> 00:05:01,245
этом в этой лекции, а также лекции по REST, которую вы увидите немного позже.

66
00:05:01,245 --> 00:05:05,020
Одна важная вещь, которую вы должны понять, когда вы

67
00:05:05,020 --> 00:05:10,120
общаетесь с сервером, заключается в том, что связь с клиентским сервером

68
00:05:10,120 --> 00:05:15,130
вызывает неожиданное количество задержек или неопределенное количество задержки,

69
00:05:15,130 --> 00:05:21,340
пока данные либо извлекаются, либо загружаются на сервер с сайта клиента.

70
00:05:21,340 --> 00:05:23,270
Таким образом, это означает, что в приложении вашего клиентского сайта

71
00:05:23,270 --> 00:05:27,310
вам нужно держать пользователя в курсе того, что

72
00:05:27,310 --> 00:05:31,750
что-то происходит за кулисами и

73
00:05:31,750 --> 00:05:35,335
иметь возможность обрабатывать задержки и,

74
00:05:35,335 --> 00:05:41,020
возможно, не иметь возможности получить данные со стороны сервера.

75
00:05:41,020 --> 00:05:45,490
Вполне возможно, что при попытке подключиться к серверу

76
00:05:45,490 --> 00:05:47,765
подключение сервера может произойти сбой,

77
00:05:47,765 --> 00:05:53,920
сервер может возвращать неверные данные или может вызвать ошибку в связи.

78
00:05:53,920 --> 00:05:58,750
Все это должно быть обработано на клиентской стороне соответствующим образом, чтобы

79
00:05:58,750 --> 00:06:04,450
ваше приложение по-прежнему работало даже при наличии этих проблем.

80
00:06:04,450 --> 00:06:09,250
Переход к наиболее популярному протоколу уровня приложений,

81
00:06:09,250 --> 00:06:12,880
используемому для связи между клиентом и сервером, протоколу

82
00:06:12,880 --> 00:06:15,405
Hypertext Transfer Protocol.

83
00:06:15,405 --> 00:06:18,585
Но это протокол связи с клиентским сервером.

84
00:06:18,585 --> 00:06:20,800
Теперь это может иметь или не может

85
00:06:20,800 --> 00:06:23,532
иметь большого смысла для вас, если у вас нет достаточного фона в сети,

86
00:06:23,532 --> 00:06:28,480
но это протокол, который используется для кодирования сообщений, которые вы

87
00:06:28,480 --> 00:06:31,330
обменивались между вашим клиентским приложением, которое

88
00:06:31,330 --> 00:06:35,375
является угловым приложением в этом случае и на стороне сервера.

89
00:06:35,375 --> 00:06:38,620
Таким образом, этот протокол HTTP позволяет

90
00:06:38,620 --> 00:06:42,450
извлекать документы на основе гипертекста со стороны сервера,

91
00:06:42,450 --> 00:06:47,200
все чаще информация, загружаемая со стороны сервера,

92
00:06:47,200 --> 00:06:52,495
кодируется в одном из стандартных форматов кодирования, таких как JSON или XML.

93
00:06:52,495 --> 00:06:55,750
И для того, чтобы иметь возможность общаться с сервером,

94
00:06:55,750 --> 00:07:04,180
у вас есть поддержка от различных HTTP-действий или то, что мы называем HTTP-глаголами,

95
00:07:04,180 --> 00:07:07,135
HEAD, GET, POST,

96
00:07:07,135 --> 00:07:11,020
PUT, DELETE, TRACE, OPTIONS и CONNECT.

97
00:07:11,020 --> 00:07:14,080
Мы увидим, в частности, GET, PUT, POST

98
00:07:14,080 --> 00:07:24,395
и DELETE глаголы более подробно, когда мы рассмотрим протокол REST API немного позже.

99
00:07:24,395 --> 00:07:27,670
Как работает протокол HTTP?

100
00:07:27,670 --> 00:07:30,010
В протоколе HTTP

101
00:07:30,010 --> 00:07:35,215
вы отправляете запрос GET из клиентского приложения на сервер.

102
00:07:35,215 --> 00:07:39,780
И это кодируется в виде сообщения HTTP-запроса.

103
00:07:39,780 --> 00:07:43,760
Сообщение запроса обычно содержит URL-адрес

104
00:07:43,760 --> 00:07:48,995
в сообщении запроса, указывающий, что вы хотите, чтобы сервер отправил вам.

105
00:07:48,995 --> 00:07:52,660
И это обычно сообщение GET, если вы хотите,

106
00:07:52,660 --> 00:07:57,440
чтобы данные были загружены со стороны сервера.

107
00:07:57,440 --> 00:08:02,110
Вы также укажете, с каким конкретным сервером вы общаетесь.

108
00:08:02,110 --> 00:08:04,864
Когда сервер получает ваш запрос,

109
00:08:04,864 --> 00:08:09,325
сервер извлекает данные из своего хранилища данных,

110
00:08:09,325 --> 00:08:11,980
обычно базы данных на стороне сервера,

111
00:08:11,980 --> 00:08:14,250
а затем упаковывает эти данные в

112
00:08:14,250 --> 00:08:20,420
соответствующем формате и отправляет их обратно вам на стороне клиента.

113
00:08:20,420 --> 00:08:23,285
Если вы получаете стандартный

114
00:08:23,285 --> 00:08:25,240
код HTML, CSS и JavaScript со стороны сервера,

115
00:08:25,240 --> 00:08:27,310
то ваш браузер может отобразить это.

116
00:08:27,310 --> 00:08:30,144
Но с такими приложениями, как Angular,

117
00:08:30,144 --> 00:08:32,830
вы в основном

118
00:08:32,830 --> 00:08:39,700
подключаетесь к серверу, а затем извлекаете данные в виде JSON или XML большую часть времени.

119
00:08:39,700 --> 00:08:44,200
За исключением первоначальной загрузки всех ресурсов, необходимых

120
00:08:44,200 --> 00:08:49,245
для вашего углового приложения, которое будет выполняться в вашем браузере.

121
00:08:49,245 --> 00:08:51,090
Как мы видели ранее,

122
00:08:51,090 --> 00:08:59,139
HTTP-приложение требует отправки сообщений между клиентом и сервером.

123
00:08:59,139 --> 00:09:03,615
Сообщение запроса обычно отправляется от клиента на сервер, и

124
00:09:03,615 --> 00:09:09,500
сообщение запроса состоит из строки запроса плюс куча заголовков,

125
00:09:09,500 --> 00:09:14,170
где вы предоставляете дополнительную информацию для квалификации запроса.

126
00:09:14,170 --> 00:09:17,410
Мы увидим использование различных заголовков и настроек в заголовках

127
00:09:17,410 --> 00:09:23,425
, как мы проходим через некоторые из упражнений в этом конкретном модуле.

128
00:09:23,425 --> 00:09:27,045
Строка запроса и заголовки отделяются от тела

129
00:09:27,045 --> 00:09:31,280
сообщения запроса одной пустой строкой.

130
00:09:31,280 --> 00:09:34,300
Тело сообщения может содержать дополнительные данные,

131
00:09:34,300 --> 00:09:38,460
особенно если ваш клиент отправляет данные на сторону сервера.

132
00:09:38,460 --> 00:09:40,735
Например, при отправке формы

133
00:09:40,735 --> 00:09:45,190
информация внутри формы кодируется в

134
00:09:45,190 --> 00:09:51,115
формат JSON, а затем отправляется на сторону сервера со стороны клиента.

135
00:09:51,115 --> 00:10:00,374
Таким образом, это будет сделано с помощью POST или PUT сообщения.

136
00:10:00,374 --> 00:10:02,500
Глядя на немного более подробную информацию о сообщении запроса HTTP,

137
00:10:02,500 --> 00:10:06,140
типичное сообщение запроса в

138
00:10:06,140 --> 00:10:10,225
строке запроса будет содержать метод, который является либо GET, PUT, POST,

139
00:10:10,225 --> 00:10:13,735
DELETE или некоторые из других глаголов, которые вы видели ранее,

140
00:10:13,735 --> 00:10:19,260
а затем URL-адрес и версия Протокол HTTP, который вы используете для связи с клиентом на стороне сервера.

141
00:10:19,260 --> 00:10:23,250
Поле заголовка обычно содержит имя поля заголовка,

142
00:10:23,250 --> 00:10:27,310
двоеточие и значение этого поля заголовка.

143
00:10:27,310 --> 00:10:30,020
И содержимое тела, как я уже упоминал,

144
00:10:30,020 --> 00:10:36,090
может быть закодировано либо в формате JSON, либо в формате XML.

145
00:10:36,090 --> 00:10:39,355
Ниже приведен пример

146
00:10:39,355 --> 00:10:46,040
типичного сообщения HTTP-запроса, которое может быть отправлено на сервер от клиента.

147
00:10:46,040 --> 00:10:48,000
Поэтому в этом конкретном сообщении запроса

148
00:10:48,000 --> 00:10:52,540
мы просим сервер сохранить страницу index.html со

149
00:10:52,540 --> 00:10:55,150
стороны сервера на стороне клиента, чтобы ее

150
00:10:55,150 --> 00:10:58,100
можно было отобразить в браузере на стороне клиента.

151
00:10:58,100 --> 00:11:03,790
Такой запрос обычно имеет пустое тело в сообщении запроса.

152
00:11:03,790 --> 00:11:06,460
Большая часть информации будет закодирована

153
00:11:06,460 --> 00:11:11,755
в строке запроса плюс заголовки сообщения запроса.

154
00:11:11,755 --> 00:11:15,935
Когда клиент отправляет запрос на сервер.

155
00:11:15,935 --> 00:11:22,120
Сервер обрабатывает запрос, а затем отправляет ответ на клиентскую сторону.

156
00:11:22,120 --> 00:11:26,150
Ответное сообщение организовано снова, три части,

157
00:11:26,150 --> 00:11:30,850
строка состояния, где

158
00:11:30,850 --> 00:11:35,648
хранится некоторая информация о том, как запрос был обработан и что отправляется обратно клиенту,

159
00:11:35,648 --> 00:11:40,270
заголовки будут содержать дополнительные сведения о том, что

160
00:11:40,270 --> 00:11:45,145
содержится в ответном сообщении, а затем , за которой следует пустая строка,

161
00:11:45,145 --> 00:11:49,355
а затем фактическое тело сообщения.

162
00:11:49,355 --> 00:11:55,405
Пример того, что обычно содержится в ответном сообщении HTTP,

163
00:11:55,405 --> 00:11:59,875
в этом случае это ответное сообщение возвращается с 200,

164
00:11:59,875 --> 00:12:03,260
который является кодом состояния сообщения.

165
00:12:03,260 --> 00:12:07,420
Если вы видите 200 в строке запроса как код состояния,

166
00:12:07,420 --> 00:12:11,770
это означает, что ваш запрос был успешным, и сервер может

167
00:12:11,770 --> 00:12:16,920
вернуть запрошенные данные со стороны сервера.

168
00:12:16,920 --> 00:12:22,180
И тогда заголовок будет содержать дополнительные указания

169
00:12:22,180 --> 00:12:25,165
на сторону клиента, включая информацию о

170
00:12:25,165 --> 00:12:29,425
том, как кодируется фактическое тело сообщения.

171
00:12:29,425 --> 00:12:31,705
Затем тело может содержать,

172
00:12:31,705 --> 00:12:34,565
если вы запросили страницу index.html,

173
00:12:34,565 --> 00:12:39,670
тело сообщения будет содержать HTML-код для

174
00:12:39,670 --> 00:12:45,515
страницы index.html, как вы видите в этом примере.

175
00:12:45,515 --> 00:12:53,955
Одна из частей информации в строке состояния, которую я называю кодом состояния.

176
00:12:53,955 --> 00:12:58,080
Если сервер сможет правильно обработать ваш запрос,

177
00:12:58,080 --> 00:13:01,852
он отправит обратно ответ с кодом состояния 200,

178
00:13:01,852 --> 00:13:04,330
что означает, что все в порядке на стороне сервера, и

179
00:13:04,330 --> 00:13:07,685
сторона сервера возвращает данные правильно.

180
00:13:07,685 --> 00:13:12,055
Если сервер не может обработать запрос по какой-либо причине,

181
00:13:12,055 --> 00:13:14,800
то эта информация будет закодирована

182
00:13:14,800 --> 00:13:20,020
в коде состояния в строке состояния ответного сообщения.

183
00:13:20,020 --> 00:13:24,160
Различные коды состояния, обычно встречающиеся при

184
00:13:24,160 --> 00:13:28,355
получении ответа от сервера включают 201,

185
00:13:28,355 --> 00:13:30,985
что означает, что при попытке создать

186
00:13:30,985 --> 00:13:34,540
объект на стороне сервера он был успешно создан,

187
00:13:34,540 --> 00:13:39,100
или 301, что означает, что все, что вы запрашиваете, перемещено постоянно

188
00:13:39,100 --> 00:13:42,365
в новое местоположение, и URL-адрес

189
00:13:42,365 --> 00:13:46,965
нового местоположения этого ресурса будет возвращен на клиентскую сторону.

190
00:13:46,965 --> 00:13:52,775
400 и 500 обычно указывают на то, что на стороне сервера есть некоторая проблема.

191
00:13:52,775 --> 00:13:57,310
404 - это то, что вы часто сталкиваетесь, когда

192
00:13:57,310 --> 00:14:02,260
запрашиваете что-то, что не существует на стороне сервера.

193
00:14:02,260 --> 00:14:05,620
Аналогичным образом 500 означает, что сервер просто сдается,

194
00:14:05,620 --> 00:14:10,390
он не может обработать ваш запрос, а затем отправляет обратно внутреннюю ошибку сервера.

195
00:14:10,390 --> 00:14:14,445
Это два распространенных кода ошибок, с которыми вы столкнетесь.

196
00:14:14,445 --> 00:14:20,355
Остальные имеют конкретное значение, как указано в этой таблице.

197
00:14:20,355 --> 00:14:24,483
Есть больше, чем коды состояния, которые я дал вам в этой таблице,

198
00:14:24,483 --> 00:14:27,963
но это некоторые из наиболее распространенных кодов состояния, с которыми вы

199
00:14:27,963 --> 00:14:32,835
столкнетесь в ответном сообщении, поступающем со стороны сервера.

200
00:14:32,835 --> 00:14:37,420
Еще один момент, который я упомянул, заключается в том, что сервер может кодировать

201
00:14:37,420 --> 00:14:46,880
данные в определенном формате, таком как XML или расширенный язык разметки или JSON,

202
00:14:46,880 --> 00:14:50,845
формат нотации объектов JavaScript.

203
00:14:50,845 --> 00:14:53,950
Теперь, как правило, в этом конкретном курсе,

204
00:14:53,950 --> 00:14:57,700
мы будем иметь дело с данными, которые кодируются в основном в JSON.

205
00:14:57,700 --> 00:15:02,875
Большинство клиентских приложений,

206
00:15:02,875 --> 00:15:06,680
включая мобильные приложения в эти дни, как правило, связываются с

207
00:15:06,680 --> 00:15:16,515
сервером, и формат обмена данными по умолчанию является JSON.

208
00:15:16,515 --> 00:15:22,125
Вот почему я потрачу несколько минут, объясняя вам о JSON.

209
00:15:22,125 --> 00:15:27,785
Обозначение объектов JavaScript или JSON представляет собой легкий формат обмена данными.

210
00:15:27,785 --> 00:15:33,100
Причина, по которой формат данных JSON особенно

211
00:15:33,100 --> 00:15:38,685
интересен нам в этом курсе, заключается в том, что обозначение объектов JavaScript,

212
00:15:38,685 --> 00:15:40,710
как следует из названия,

213
00:15:40,710 --> 00:15:46,840
очень легко сопоставляется с объектом JavaScript, который вы используете с любым кодом JavaScript.

214
00:15:46,840 --> 00:15:50,430
Таким образом,

215
00:15:50,430 --> 00:15:53,725
преобразование объекта JavaScript в нотацию JSON и наоборот очень просто.

216
00:15:53,725 --> 00:15:57,420
Обозначение JSON - это то, что мы называем

217
00:15:57,420 --> 00:16:01,815
самоописательной и очень легкой для понимания нотацией.

218
00:16:01,815 --> 00:16:05,103
В формате JavaScript Object Notation

219
00:16:05,103 --> 00:16:11,040
данные структурированы очень чистым, определенным образом.

220
00:16:11,040 --> 00:16:14,693
Это структурировано как набор пар имен, значений,

221
00:16:14,693 --> 00:16:19,610
и это структурировано как упорядоченный список значений.

222
00:16:19,610 --> 00:16:23,375
Вы можете увидеть пример этого с правой стороны здесь.

223
00:16:23,375 --> 00:16:30,750
Мы фактически использовали эти данные JSON в нашем угловом приложении уже ранее.

224
00:16:30,750 --> 00:16:35,570
Итак, теперь вы видите, почему данные структурированы таким образом.

225
00:16:35,570 --> 00:16:41,220
И вы также понимаете, что очень легко иметь дело с

226
00:16:41,220 --> 00:16:47,850
этими данными в вашем JavaScript или вашем коде TypeScript в вашем угловом приложении.

227
00:16:47,850 --> 00:16:55,000
С помощью этого я завершаю краткий обзор основ сети.