Как передать переменную в HTML страницу без запроса со стороны страницы

[Goldz]

Как запросить у сервера данные с помощью запроса я разобрался.
Поясните как послать данные с сервера в HTML страницу без запроса со стороны страницы.

 

[Vovka]

никак

 

[Goldz]

никак

Тогда скажите как данные приходящие в ком порт появляются на html странице?

 

[Vovka]

Тогда скажите как данные приходящие в ком порт появляются на html странице?

Покажите содержимое этой странички
А вообще гуглите на тему XMLHttpRequest

 

[Goldz]

<textarea name="TextArea1" id="TextArea1" style="position:absolute;left:464px;top:29px;width:327px;height:139px;z-index:16;" rows="8" cols="38" readonly autofocus spellcheck="false">
</textarea>

XMLHttpRequest формируется на странице и посылает запрос на сервер. Сервер отвечает. Ответ как-то обрабатывается страницей.
У ESP8266 есть Serial Port на который с разными интервалами приходят данные, или не приходят. Если приходят, то они должны отображаться в TextArea1

 

[Vovka]

Нужно все содержимое странички, а не фрагмент куда выводятся данные!

XMLHttpRequest формируется на странице и посылает запрос на сервер. Сервер отвечает. Ответ как-то обрабатывается страницей.

Т.е. станичка клиент или сервер?

Тогда скажите как данные приходящие в ком порт появляются на html странице?

У ESP8266 есть Serial Port на который с разными интервалами приходят данные, или не приходят. Если приходят, то они должны отображаться в TextArea1

Вот поэтому я и просил полное содержимое странички, чтобы показать, что там есть функция setInterval()
Надеюсь дальше сами сообразите...

 

[Goldz]

Нужно все содержимое странички, а не фрагмент куда выводятся данные!

Т.е. станичка клиент или сервер?



Вот поэтому я и просил полное содержимое странички, чтобы показать, что там есть функция setInterval()
Надеюсь дальше сами сообразите...

Нет такой функции. Страница клиент. Буду смотреть в сторону WebSocket. После победы отпишусь

 

[Ildarmustafin86]

Вырезка из кода

Спойлер: Arduino

#include <WebSocketsServer.h>
WebSocketsServer webSocket = WebSocketsServer(81);

void setup() {
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);
}

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
  switch (type) {
    case WStype_DISCONNECTED:
      Serial.printf("Разорвано Websocket-соединение с [%i]!\n", num);
      break;
    case WStype_CONNECTED:
      Serial.printf("Установлено Websocket-соединение с [%i]!\n", num);
      break;
  }
}

void send_values_by_websocket() {
   webSocket.broadcastTXT(jsonLive);
}

Спойлер: JS

window.onload = function() {
    liveValues();
}

function liveValues() {
    ws = new WebSocket("ws://" + window.location.hostname + ":81/");
    ws.onopen = function(event) {
        console.log("[WEBSOCKET] Websocket-соединение установлено...");
    };

    ws.onmessage = function(event) {
        //console.log("[message] Данные с сервера получены");
        let json = JSON.parse(event.data);
        //Обработка полученных данных
     };

    ws.onclose = function(event) {
        ws = null;
        console.log("[WEBSOCKET] Websocket-соединение разорвано cо статусом: " + event.code);
    };   
    ws.onerror = function(event) {
        console.log("[WEBSOCKET] Ошибка подключения...");
    };
};

 

[Goldz]

Вырезка из кода

Спойлер: Arduino

#include <WebSocketsServer.h>
WebSocketsServer webSocket = WebSocketsServer(81);

void setup() {
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);
}

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
  switch (type) {
    case WStype_DISCONNECTED:
      Serial.printf("Разорвано Websocket-соединение с [%i]!\n", num);
      break;
    case WStype_CONNECTED:
      Serial.printf("Установлено Websocket-соединение с [%i]!\n", num);
      break;
  }
}

void send_values_by_websocket() {
   webSocket.broadcastTXT(jsonLive);
}

Спойлер: JS

window.onload = function() {
    liveValues();
}

function liveValues() {
    ws = new WebSocket("ws://" + window.location.hostname + ":81/");
    ws.onopen = function(event) {
        console.log("[WEBSOCKET] Websocket-соединение установлено...");
    };

    ws.onmessage = function(event) {
        //console.log("[message] Данные с сервера получены");
        let json = JSON.parse(event.data);
        //Обработка полученных данных
     };

    ws.onclose = function(event) {
        ws = null;
        console.log("[WEBSOCKET] Websocket-соединение разорвано cо статусом: " + event.code);
    };  
    ws.onerror = function(event) {
        console.log("[WEBSOCKET] Ошибка подключения...");
    };
};

Пока Вы писали пост я кинулся проверить сокет.

#define DBG_OUTPUT_PORT Serial
#define FS_NO_GLOBALS
#include <FS.h>
#include <ESPAsyncWebServer.h>
#include <ESPAsyncWiFiManager.h>
//#include <ESP8266mDNS.h>
#include <SPI.h>
#include <ArduinoJson.h>
#include <SD.h>
#include <SPIFFSEditor.h>
#include <ESP8266FtpServer.h>
#include <EEPROM.h>
#include <WebSocketsServer.h>

Arduino IDE говорит
WebSocketsServer.h: No such file or directory
Гляньте,может быть чего не хватает?

 

[Ildarmustafin86]

Либу WebSocketsServer.h установи

 

[Ildarmustafin86]

Ты используешь асинхронный сервер что-ли?

 

[Goldz]

Ты используешь асинхронный сервер что-ли?

Так точно! WebSocketsServer.h отдельно найти не могу

 

[Ildarmustafin86]

контроллер esp8266?

Спойлер: Arduino

#include <ESPAsyncTCP.h>         // https://github.com/me-no-dev/ESPAsyncTCP
#include <ESPAsyncWebServer.h>   // https://github.com/me-no-dev/ESPAsyncWebServer

AsyncWebServer server(wifi.port);
AsyncWebSocket ws("/ws");
AsyncEventSource events("/events");

void loop() {
  yield();
  ws.cleanupClients();
}

void onWsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventType type, void * arg, uint8_t *data, size_t len) {
  byte id = client->id();
  if (type == WS_EVT_CONNECT) {
    Serial.printf("Установлено Websocket-соединение с ID = %i\n", id);
  } else if (type == WS_EVT_DISCONNECT) {
    Serial.printf("Разорвано Websocket-соединение с ID = %i\n", id);
    ws.close(id);
  }
}

void send_ws() {
  ws.textAll(configLive);
}

Спойлер: JS

window.onload = function() {
    liveValues();
}

function liveValues() {
    var ws = new WebSocket("ws://" + window.location.hostname + "/ws");
    ws.onopen = function() {
        console.log("[WEBSOCKET] Websocket connected...");
    };
    ws.onmessage = function(event) {
        //console.log("[message] Данные с сервера получены");
        let json = JSON.parse(event.data);
    };
    ws.onclose = function(event) {
        ws = null;
        //console.log("[WEBSOCKET] Websocket-соединение разорвано. Повторное подключение...");  
        console.log("[WEBSOCKET] Lost connection. Reconnect...");  

    };  
    ws.onerror = function(event) {
        //console.log("[WEBSOCKET] Ошибка подключения. Повторное подключение...");
        console.log("[WEBSOCKET] Connection error. Reconnect...");
    };
};

 

[Goldz]

контроллер esp8266?

Спойлер: Arduino

#include <ESPAsyncTCP.h>         // https://github.com/me-no-dev/ESPAsyncTCP
#include <ESPAsyncWebServer.h>   // https://github.com/me-no-dev/ESPAsyncWebServer

AsyncWebServer server(wifi.port);
AsyncWebSocket ws("/ws");
AsyncEventSource events("/events");

void loop() {
  yield();
  ws.cleanupClients();
}

void onWsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventType type, void * arg, uint8_t *data, size_t len) {
  byte id = client->id();
  if (type == WS_EVT_CONNECT) {
    Serial.printf("Установлено Websocket-соединение с ID = %i\n", id);
  } else if (type == WS_EVT_DISCONNECT) {
    Serial.printf("Разорвано Websocket-соединение с ID = %i\n", id);
    ws.close(id);
  }
}

void send_ws() {
  ws.textAll(configLive);
}

Спойлер: JS

window.onload = function() {
    liveValues();
}

function liveValues() {
    var ws = new WebSocket("ws://" + window.location.hostname + "/ws");
    ws.onopen = function() {
        console.log("[WEBSOCKET] Websocket connected...");
    };
    ws.onmessage = function(event) {
        //console.log("[message] Данные с сервера получены");
        let json = JSON.parse(event.data);
    };
    ws.onclose = function(event) {
        ws = null;
        //console.log("[WEBSOCKET] Websocket-соединение разорвано. Повторное подключение..."); 
        console.log("[WEBSOCKET] Lost connection. Reconnect..."); 

    }; 
    ws.onerror = function(event) {
        //console.log("[WEBSOCKET] Ошибка подключения. Повторное подключение...");
        console.log("[WEBSOCKET] Connection error. Reconnect...");
    };
};

Благодарю! После победы отпишусь живым примером