Browse Source

ping pong

Ivan Asmer 6 years ago
parent
commit
ee87a95c2a
2 changed files with 98 additions and 0 deletions
  1. 95 0
      02.md
  2. 3 0
      README.md

+ 95 - 0
02.md

@@ -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
+```
+
+![client](http://shots.asmer.org.ua/2018_06_15__23_11_46.png)
+
+и увидеть в консоли, что сервер данные получил:
+
+![server](http://shots.asmer.org.ua/2018_06_15__23_11_05.png)
+

+ 3 - 0
README.md

@@ -366,3 +366,6 @@ send.onclick = function(){
 ```
 
 - поставьте nodejs на ваш компьютер.
+
+
+