|
|
@@ -93,3 +93,76 @@ jsonPost('http://localhost:3000', {data: "someData", time: (new Date()).getTime(
|
|
|
|
|
|
|
|
|
|
|
|
+Теперь наша задача - разобраться с тем, откуда взять данные для отправки и отправлять их.
|
|
|
+Кстати, было бы неплохо в чате добавить еще и имя пользователя. Добавьте его в верстку (еще одно поле `input` с `id="nick"`)
|
|
|
+
|
|
|
+#### Отправляем настоящие данные
|
|
|
+
|
|
|
+Давайте договоримся, что данные которые мы отправляем, будут иметь следующую структуру:
|
|
|
+```javascript
|
|
|
+{
|
|
|
+ action: "ADD_MESSAGE", //при общении с сервером у нас будет несколько операций, какие?
|
|
|
+ nick: "Имя пользователя",
|
|
|
+ message: "Сообщение"
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+Добавьте в ваше ДЗ код, который, используя `jsonPost` будет отправлять реальный `nick` и `message` из полей ввода на сервер. Проверьте, что сервер в консоли пишет пришедшие данные.
|
|
|
+
|
|
|
+### Получение и хранение сообщений на сервере.
|
|
|
+
|
|
|
+Давайте подумаем, какие у нас есть типы данных и какой более всего подходит для хранения сообщений на сервере.
|
|
|
+
|
|
|
+```javascript
|
|
|
+...
|
|
|
+ var data = JSON.parse(body);
|
|
|
+ if (data.action == 'ADD_MESSAGE'){
|
|
|
+ //сохраняем новое сообщение
|
|
|
+ console.log()//убеждаемся, что все сохранилось
|
|
|
+ res.end(JSON.stringify({status: 'ok'}));
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ console.log('UNKNOWN ACTION')
|
|
|
+ console.log(data)
|
|
|
+ }
|
|
|
+...
|
|
|
+```
|
|
|
+
|
|
|
+### Выдача сообщений из сервера на клиент
|
|
|
+
|
|
|
+Для того, что бы клиент "спросил" набор сообщений, пусть будет структура данных следующего вида:
|
|
|
+```javascript
|
|
|
+{
|
|
|
+ action: 'GET_MESSAGES', //операция получения
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Сервер: выдача сообщений
|
|
|
+
|
|
|
+```javascript
|
|
|
+...
|
|
|
+ if (data.action == 'GET_MESSAGES'){
|
|
|
+ res.end(JSON.stringify({status: 'ok', data: ....})) //выдача сообщений в клиент
|
|
|
+ }
|
|
|
+...
|
|
|
+```
|
|
|
+
|
|
|
+### Клиент: обработка пришедших сообщений
|
|
|
+
|
|
|
+В силу наличия асинхронного ада в **JS**, данные приезжают не сразу, а передаются в функцию *впоследствии*. Один из подходов - использовать промисы:
|
|
|
+
|
|
|
+```javascript
|
|
|
+jsonPost('http://localhost:3000', { action: 'GET_MESSAGES'}).then( data => console.log(data) ) //данные будут в стрелочной функции в переменной data
|
|
|
+```
|
|
|
+
|
|
|
+### Отображения истории сообщений
|
|
|
+
|
|
|
+Теперь надо циклически обработать сообщения и добавить их в окно наших сообщений в чате.
|
|
|
+
|
|
|
+### Poll
|
|
|
+
|
|
|
+Используем `setInterval` для периодической проверки сообщений.
|
|
|
+
|
|
|
+### Как проверять?
|
|
|
+
|
|
|
+Откройте две вкладки с чатом и пообщайтесь сами с собой. Приятно же поговорить с умным человеком
|
