HTTP: взаимодействие клиента и сервера

[Мурик]

А если серьезно, хотел бы я посмотреть на скрипт на пыхпыхе, который будет по CAN-шине и USB работать с железками

У вас сервер на микроконтроллере?

[Eddy_Em]

[uquote="Мурик",url="/forum/viewtopic.php?p=3847820#p3847820"]У вас сервер на микроконтроллере?[/uquote]
Нет, конечно: на компьютере. Связь с МК — по RS-232, USB или CAN, где как. И очень удобно, когда один демон крутится себе, работает с железом, а также принимает на открытый сокет запросы и обрабатывает их. Если нет нужды в быстрой реакции, то можно обойтись без асинхронности: просто 1 раз в 5..60 секунд от клиента слать POST-запрос демону на определенный порт и получать обновленные данные, ну или сразу же слать запрос с командами. А вот если хочется, чтобы не больше сотни миллисекунд была задержка, то только вебсокеты. Не шарахать же по 10 раз в секунду жирные POST- или GET-запросы, нагружая сеть и сервер (а если клиентов будет несколько десятков?)!

[DX168B]

Обычно уведомление клиента делают с помощью WebSocket, но я себе делал попроще:
JavaScript на странице раз в некоторое время запрашивал у сервера новые данные.
Заметьте, не страницу, а только данные. Получив их в виде JSON строки в качестве ответа, скрипт просто
присваивал полям на странице данные из JSON.
На JS запрос и заполнение можно написать в виде функции и вызывать ее как из
метода window.onload() (чтобы заполнить страницу данными после ее загрузки), так и из колбека таймера.

Например:
Создадим на стороне сервера обработчик такого запроса:

Код: Выделить всё

http://myserver.lan/GetDynamicData?DataSource=myDevice

Обработчик возьмет все данные с железки, соберет их в JSON строку (можно даже конкатенацией строк) вида:

Код: Выделить всё

{"data_1":127,"data_2":"что-то там..."} 

и вернет в качестве ответа.

В теле HTML документа разместим два элемента и присвоим им id:

Код: Выделить всё

<div id="DataOne"></div>
<div id="DataTwo"></div>

и код JavaScript:

Код: Выделить всё

// JSON request function
function fetch(url, method, callback, time_out){
    var xhr = new XMLHttpRequest();
    xhr.onloadend = function(){
        callback(xhr.status, xhr.responseText);
    }
    
    xhr.ontimeout = function(){
        callback(-1, null);
    }
    
    xhr.open(method, url, true);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.timeout = (time_out || 10) * 1000;
    xhr.send();
}

// Syntactical sugar
var $ = function(selector){
    return document.querySelector(selector);
}

// Refresh end
function DataReceived(mStatus, mResponse){
    // Если сервер вернул код 200
    if(mStatus == 200){
        // Парсим полученную в ответе JSON строку
        var rData = JSON.parse(mResponse);
        // Заполняем поля на странице
        $('#DataOne').innerText = rData.data_1;
        $('#DataTwo').innerText = rData.data_2;
    }
}

// Refresh start
function RefreshDynamicData(){
    // Шлем запрос серверу
    fetch('/GetDynamicData?DataSource=myDevice', 'GET', DataReceived, 10);
}

// Эта функция вызовется при загрузке страницы
window.onload = function(){
    // Вызовем функцию при загрузке страницы
    RefreshDynamicData();
    
    // Заводим периодический таймер, который будет дергать функцию раз в 15 секунд
    var Timer = setInterval(RefreshDynamicData, 15000);
}

Сей подход у меня пашет как на ESP8266 с библиотекой EspAsyncWebServer, так и на апаче.
Я для ESPшек так и леплю страницы. Отрабатываю на Апаче, пишу API сервера на PHP, которое
имитирует работу микроконтроллерного web сервера (функции-заглушки на php). По окончанию разработки выгружаю
все в spiffs микроконтроллера и пишу уже реальный api сервера на C++ для микроконтроллера.

[AAX]

Недавно тут было обсуждение похожей темы. Тоже активно участвовал Eddy_Em, пытался рассказывать, что миллионы веб-программистов зря едят свой хлеб, и что он пишет веб-странички исключительно на голом си. Слился он только когда я попросил ссылку на исходники такого веб-сервера
Не то, чтобы я был против того, чтобы кто-то в 2020-м писал серверные скрипты на С через CGI. Это как с секс-меньшинствами - меня слабо волнует, кто там кого через что любит, пока они не начинают гей-парады устраивать И пытаться мне доказывать, что мне нужно в письмах обращаться к нему Mrs Joe Schmoe
Анти-офф: если изменения важно показывать в реальном времени только когда браузер открыт, и клиент в него пялится - любая реализация websockets подойдёт. Например, на ненавистном PHP: https://github.com/ghedipunk/PHP-Websoc ... ockets.php. А на клиенте делается как-то так: https://developer.mozilla.org/en-US/doc ... plications.
Можно без websocket-ов обойтись, обычным полингом, через JS, чтоб не "мигало" Это вот по такому принципу принято делать: https://developer.mozilla.org/en-US/doc ... ttpRequest
А если нужно, чтобы информация об изменениях даже при закрытом браузере приходила - тут нужно уведомления, и они только через инет работают. https://developer.mozilla.org/en-US/doc ... I/Push_API. Но я не знаю, как ЭТО работает на телефонных браузерах. В быту использую айфоны. На айфонах это точно не работает - там свои уведомления. А на андроид-телефонах как-то не приходилось серфить инет

[Eddy_Em]

AAX, это где я слился? Исходники лежат на гитхабе. Свою CGI-шную библиотеку я почуть переделываю под новые нужды (причесываю + добавлю обертки для работы с сокетами). А работает это все у меня уже лет 8 как минимум…
P.S. Я нашел отличную компактную реализацию вебсокетов (libwebsockets слишком уж жирным стал), так что вообще все замечательно. Разве что эта библиотека не работает с SSL, поэтому аутентификация выполняется либо средствами CGI, либо проксированием SSL-канала средствами NGINX на незащищенный порт сетевого демона. А дальше все замечательно.
Пыхпых или нодеЖС использовать — это уж чересчур! Скажи еще, на брейнфаке бэкенд писать!

В быту использую айфоны

А, сорян. Меня говном поливает чувак с анальным зондом. Забавно.

[AAX]

[uquote="Eddy_Em",url="/forum/viewtopic.php?p=3854859#p3854859"]AAX, это где я слился?[/uquote]А вот тут: https://radiokot.ru/forum/viewtopic.php ... 8#p3753878. Копаться в 100500 проектах в попытке найти кусок кода, работающего с CGI - извините, я слишком стар для этой фигни
[uquote="Eddy_Em",url="/forum/viewtopic.php?p=3854859#p3854859"]

В быту использую айфоны

А, сорян. Меня говном поливает чувак с анальным зондом. Забавно.[/uquote]у меня в мыслях не было Вас ничем поливать. iOS чуть менее, чем полностью, является FreeBSD. Исходники по соответствующей лицензии открыты. Перед тем, как повторять вопли хомячков о том, что "Apple - пропиетарное дерьмо", есть смысл попробовать разобраться в предмете. Мне телефон в основном нужен для того, чтобы звонить, слушать музыку, платить и сёрфить инет. Исходя из предыдущей стилистики Ваших сообщений, могу предположить, что "анальным зондом" категорически не является телефон типа Nokia 3210 производства 1998 года. С него невозможно платить, слушать музыку, сёрфить инет, и трудно звонить последнее время, т.к. он не умеет LTE, а рудиментарная поддержка 2G современными сетями операторов сотовой связи функционирует странно, видимо, потому что практически не тестируется

[Eddy_Em]

AAX, ну, например:
- простейший файл-менеджер
- здесь вообще CGI на баше!
- библиотечка CGI (через месяц-другой обновлю ее: причешу, уберу русские комменты и добавлю функционал)
- а здесь - CGI на С и на баше
- видео через CGI
- а здесь я видео через вебсокеты отправлял
- здесь же используются POST-запросы на непривилегированный порт, что позволяет не долбаться с CGI, а держать лишь один демон, который и обрабатывает все запросы

Понятно, что у меня негусто примеров с вебом, т.к. GUI я терпеть не могу и заморачиваюсь с ними лишь в крайних случаях! CLI — самая универсальная штука. И наиболее юниксвейная.

[Eddy_Em]

Вебсокеты - это очень просто, если обертку вроде libonion использовать.
Я на днях раскурил libonion, добавил аутентификацию/авторизацию с нормальными ключами, а не на одну сессию браузера. Осталось еще посидеть над кодом часик, добавить туда вебсокеты — и можно клепать веб-морды.
С аутентификацией пришлось повозиться из-за того, что libonion не умеет секурные вебсокеты, т.е. передавать пароль/логин по вебсокету нельзя. И у меня так делается: открываем по https некий адрес, демон на libonion отправляет веб-страничку со всем нужным. Если пользователь не авторизован, у него нет сессионной куки, и ему предлагается ввести логин/пароль. Ввел — данные отправляются по шифрованному каналу, вычисляется SHA512 пароля и пара логин/хэш сравнивается с хранящимся в БД. Если все ОК, в другую БД заносится запись об открытии сессии, пользователю отправляется кука с сессионным. Теперь он может получить другой ключ - для вебсокета. Получает, отрывает вебсокет и работает (сразу после открывания вебсокета этот временный ключ будет удаляться, так что MITM не сможет перехватить).

[ARV]

Код: Выделить всё

var x = new XMLHttpRequest();

   x.onerror = function() {
	   var data = document.getElementById("data");
	   if (data != null) {
		    data.innerHTML = '<div class="err">Device not connected</div>';
	   }
   };

меня вот интересует: onerror не вызывается при просмотре странички с таким кодом (там еще есть, разумеется, и x.send(null);) на андроид-смартфоне (Chrome), в то время как в Chrome (и не только) на винде - вызывается.
тут либо какой-то нюанс, который мне неведом, либо баг браузера.

кто-то сможет пояснить, как с этим бороться?

[AAX]

Это происходит от того, что XMLHttpRequest.onerror не в стандарте.
https://developer.mozilla.org/en-US/doc ... ttpRequest - как надо обрабатывать события, возникающие при исполнении реквеста.
https://developer.mozilla.org/en-US/doc ... ttpRequest - стандарт, рекомендую использовать developer.mozilla.org в качестве референса, когда нужно что-то в вебе придумать. Там есть таблички, в которых указано, каким браузером и с какой версии поддерживается та или иная функция/атрибут.
UPD: первая ссылка была кривая, поправил

[ARV]

AAX, спасибо, поглядел - вроде бы что-то понял. попробую теперь реализовать...

[NStorm]

ARV, вы лучше разделите данные и представление. HTML шаблон странички отдельно, один раз загружается. Данных хранятся и обновляются с JSON'а отдельно. С JSON данными работать с JavaScript очень просто, к своему веб-серверу прикрутить сохранение или генерацию JSON "на лету" тоже не сложно.

[ARV]

лучше разделите данные и представление

так я и разделил. только с JSON-ом связываться не стал, тупо возвращаю нужный мне <div> и меняю по id его содержимое.

[NStorm]

Если не страдать красноглазием, то со стороны клиента лучше взять фреймворки, их куча сейчас. Писать на голом JS с нуля сейчас такой же моветон, как CGI скрипты на голом Си.
Из чего-то похожего делал вот такую штуку: https://nstorm.ru/b/
Удаленную управлялку кондиционером + датчик влажности и температуры. 114 строк всего HTML+JS с фреймворками и написалось быстро. У меня там поллинг раз в 5с (мне быстрее не надо) и в данном примере только обратно данные на сервер постятся, но тут уже можно легко догадаться как передалать. По ссылке страничка к железке не подключена, в реальной версии у меня данные с датчика с сервера поллятся еще, но стираничка подключенная к железке уже в другом месте и за паролем ) А тут весь исходник можно глянуть по Ctrl+U.

[ARV]

Если не страдать красноглазием

Код: Выделить всё

<script type="text/javascript" >
	 var x = new XMLHttpRequest();

   x.onerror = function() {
	   var data = document.getElementById("data");
	   if (data != null) {
		    data.innerHTML = '<div class="err">Device not connected</div>';
	   }
   };

	 x.onload = function (){
     var s = x.responseText;
     if(s.indexOf('ERROR') == 0){
       alert('Пардон!');
       return;
     }

	   var data = document.getElementById("data");
	   if (data != null) {
		    data.innerHTML = s;
	   }
	 };

	 function get_data(s) {
     if (s != ""){
        s = "data?" + s;
     } else {
        s = "data";
     };
		 x.open("GET", s, true);
		 x.send(null);
     timer = setTimeout(get_data, 333, "");
	 };

	 function change_mode() {
     clearTimeout(timer);
     get_data("mode");
	 };

	 var timer = setTimeout(get_data, 333, "");

	 function prn(){
     clearTimeout(timer);
     get_data("prn");
	 };
</script>

вы считаете, что изучить какой-то там фреймворк будет менее красноглазно, чем то, что я уже написал?

[NStorm]

ARV, фраза "если не страдать красноглазием" была отнесена не вам. Есть тут любители писать только на чистом Си CGI скрипты с нуля каждый раз.

А вы как хотите делайте, я просто предложил как вариант и пример дал. На самом деле фрэймворк особо не изучал, по примерам быстренько склепал что мне нужно было. Просто если еше понадобится интерфейс и развитие, с фреймворками проще. Просто загляните в исходники странички по моей ссылке, может интересно станет. Там довольно-таки очевидны многие вещи будут и без изучения AngularJS.

[Eddy_Em]

NStorm, любой фреймворк - лютое зло!
Я вот привел пример libonion - хорошая библиотека для веб-сервисов на компьютере. И писать CGI на С или С++ — ничуть не моветон! Это очень удобно. Намного удобней, чем пхытон какой-нибудь.

[ARV]

Это происходит от того, что XMLHttpRequest.onerror не в стандарте

короче, и та хрень, что в стандарте по рекомендованой ссылке (listener с event-ом типа "error") нихрена на мобильном браузере не работает.

выкрутился таймерами: при отправке запроса устанавливаю на 1,5 секунды, а при получении ответа сбрасываю таймер. если ответ не пришел, срабатывает таймер.

[AAX]

А можно полюбопытствовать версией android, chrome и кодом? Ежели есть какой-то лог серверных ответов (или как там error формируется), тож было бы полезно.

[ARV]

Хром последний, автообновляется регулярно. Андроид любой, тестировалось на версиях от 6 до 10. пока не сделал отдельные таймауты на "неответ" сервера, андроид не замечал, что ответы перестали приходить, т.е. метод error не срабатывал. я все описывал.

никаких логов не веду.

Добавлено after 1 minute 4 seconds:
да и какие логи, если "не ответ" возникает из-за выгрузки сервера? я выгружаю сервер, а браузеры продолжают по таймеру слать запросы... хром ловит error, анроид нет.