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

Goldz · 18 Янв 2021

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

Vovka · 18 Янв 2021

никак

Goldz · 18 Янв 2021

Vovka написал(а):
никак

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

Vovka · 18 Янв 2021

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

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

Goldz · 18 Янв 2021

HTML:

<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 · 18 Янв 2021

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

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

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

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

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

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

Goldz · 18 Янв 2021

Vovka написал(а):
Нужно все содержимое странички, а не фрагмент куда выводятся данные!

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

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

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

Ildarmustafin86 · 18 Янв 2021

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

C++:

#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);
}

JavaScript:

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 · 18 Янв 2021

Ildarmustafin86 написал(а):

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

C++:

#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);
}

JavaScript:

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] Ошибка подключения...");
    };
};

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

C:

#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 · 18 Янв 2021

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

Ildarmustafin86 · 18 Янв 2021

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

Goldz · 18 Янв 2021

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

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

Ildarmustafin86 · 18 Янв 2021

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

C++:

#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);
}

JavaScript:

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 · 18 Янв 2021

Ildarmustafin86 написал(а):

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

C++:

#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);
}

JavaScript:

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...");
    };
};

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

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

Goldz

Member

Vovka

Member

Goldz

Member

Vovka

Member

Goldz

Member

Vovka

Member

Goldz

Member

Ildarmustafin86

Active member

Goldz

Member

Ildarmustafin86

Active member

Ildarmustafin86

Active member

Goldz

Member

Ildarmustafin86

Active member

Goldz

Member