|
@@ -0,0 +1,95 @@
|
|
|
+# Часть вторая
|
|
|
+
|
|
|
+## Разработка FullStack
|
|
|
+
|
|
|
+Любая разработка итеративна, FullStack при этом итеративен в контексте клиента и сервера - создается какой-то этап на той или иной стороне,
|
|
|
+после чего пишется ответная часть на противоположной стороне. Такой себе пинг-понг.
|
|
|
+
|
|
|
+## Чат
|
|
|
+
|
|
|
+Давайте разберемся с тем, как должен работать чат.
|
|
|
+
|
|
|
+### Интерфейс пользователя
|
|
|
+
|
|
|
+Если вы справились с ДЗ, то вы уже имеете шаблон вашей страницы, в котором будет окно для сообщений чата, поле ввода для одного нового сообщения
|
|
|
+и кнопка отправки. Осталось это оживить - научить нашу страницу общаться с сервером, отправлять и принимать сообщения.
|
|
|
+
|
|
|
+### Отправка сообщений
|
|
|
+
|
|
|
+Для общения с сервером мы будем использовать **промисифицированную** функцию `jsonPost`. Не вдаваясь в подробности, она обеспечивает прием и передачу
|
|
|
+данных через интернет, используя **AJAX** (т. е. работает при этом незаметно для пользователя)
|
|
|
+
|
|
|
+```javascript
|
|
|
+ function jsonPost(url, data)
|
|
|
+ {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ var x = new XMLHttpRequest();
|
|
|
+ x.onerror = () => reject(new Error('jsonPost failed'))
|
|
|
+ x.open("POST", url, true);
|
|
|
+ x.send(JSON.stringify(data))
|
|
|
+
|
|
|
+ x.onreadystatechange = () => {
|
|
|
+ if (x.readyState == XMLHttpRequest.DONE && x.status == 200){
|
|
|
+ resolve(JSON.parse(x.responseText))
|
|
|
+ }
|
|
|
+ else if (x.status != 200){
|
|
|
+ reject(new Error('status is not 200'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+```
|
|
|
+
|
|
|
+Если вы скопируете этот код в консоль браузера, то сможете запустить эту функцию и отправить данные куда-нибудь.
|
|
|
+
|
|
|
+Первый параметр функции - адрес для отправки. Второй - тот или иной ассоциативный массив, который мы хотим послать на сервер.
|
|
|
+
|
|
|
+Для того, что бы проверить отправку, сделаем простенький бэк-энд на **nodejs**:
|
|
|
+
|
|
|
+- создаем папку проекта
|
|
|
+- создаем файл index.js
|
|
|
+
|
|
|
+```javascript
|
|
|
+http = require('http');
|
|
|
+
|
|
|
+server = http.createServer(function(req, res){
|
|
|
+ if (req.method == "POST"){
|
|
|
+ var body = '';
|
|
|
+ req.on('data', function (data) { //сбор информации, она может идти кусками
|
|
|
+ body += data;
|
|
|
+ });
|
|
|
+ req.on('end', function () { //приехали все данные
|
|
|
+ console.log("Body: " + body); //выводим
|
|
|
+ });
|
|
|
+
|
|
|
+//колдунство, которое позволяет обращаться к нашему серверу откуда угодно (с любого другого домена)
|
|
|
+ res.setHeader('Access-Control-Allow-Origin', '*');
|
|
|
+ res.setHeader('Access-Control-Request-Method', '*');
|
|
|
+ res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET, POST');
|
|
|
+ res.setHeader('Access-Control-Allow-Headers', '*');
|
|
|
+ res.writeHead(200, {'Content-Type': 'text/json'});
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+//localhost:3000
|
|
|
+port = 3000;
|
|
|
+host = '127.0.0.1';
|
|
|
+server.listen(port, host);
|
|
|
+console.log("Listen...");
|
|
|
+```
|
|
|
+
|
|
|
+Запускаем этот файл в папке где он лежит (cmd.exe):
|
|
|
+```sh
|
|
|
+node index.js
|
|
|
+```
|
|
|
+
|
|
|
+```javascript
|
|
|
+jsonPost('http://localhost:3000', {data: "someData", time: (new Date()).getTime()}) //отправляем данные на адрес localhost:3000 с объектом с двумя ключами - data и time
|
|
|
+```
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+и увидеть в консоли, что сервер данные получил:
|
|
|
+
|
|
|
+
|
|
|
+
|