Передача файлов на ESP по WebSocket

@Goldz · Регистрация: 08.06.2015

Студворк — интернет-сервис помощи студентам

Всем доброго дня! Нужна помощь!
Хочу передать файл с ПК на ESP сервер

Со стороны страницы выбираю файл и отправляю его на сервер ESP по websocket

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//*** websocket Setup ***
var connection;
connection = new WebSocket('ws://' + window.location.hostname + ':81/');
connection.onmessage = function (e)
{
//...............
}
//*** websocket Setup End ***
Button4.onclick = function(e)
{
 
var input = document.createElement('input');
input.type = 'file';
var reader = new FileReader();
 
input.onchange = e =>
{
var fileUp = e.target.files[0];
let fileLen=fileUp.size;
reader.readAsArrayBuffer(fileUp);
 
reader.onload = function loaded(evt) {
var binaryString = evt.target.result;
connection.send(binaryString);
}
 
}
input.click();
}

На стороне ESP

C++
1
2
3
4
5
6
7
8
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length)
{
Serial.print("WStype = "); Serial.println(type);
Serial.print("WS payload = ");
 
for(int i = 0; i < length; i++) { Serial.print((char) payload); }
Serial.println();
}

На мониторе порта вижу

WStype = 1
WS payload =
[0] Disconnected!

Т.е. ни чего не передано, соединение закрыто
Перелопатил массу сайтов, не помогло

Подскажите что не так делаю

Jabbson · 26.01.2023, 20:45

У меня лежал 8266, решил попробовать. До этого ни с 8266, ни с вебсокетами не работал, поэтому сразу хочу заметить, что код собран из кусочков набранных в "этих ваших интернетах" и изменений, которые показались мне логичными. Большинство ошибок не обработаны, добавьте.

Код

C++
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
 
const char* ssid = "..."; // change the ssid
const char* password = "..."; // change the password
 
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");
 
const char index_html[] PROGMEM = R"rawliteral(
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Upload Files</title>
  </head>
 
  <body>
    <h2>File Upload</h2>
    Select file
    <input type="file" id="filename" />
    <br />
    <input type="button" value="Connect" onclick="connect()" />
    <br />
    <input type="button" value="Upload" onclick="sendFile()" />
    <br />
    <input type="button" value="Disconnect" onclick="disconnect()" />
    <script>
      var ws;
 
      function connect() {
        ws = new WebSocket("ws://" + window.location.hostname + "/ws");
        ws.binaryType = "arraybuffer";
        alert("Connected to: " + "ws://" + window.location.hostname + "/ws");
      }
 
      function disconnect() {
        ws.close();
        alert("Disconnected");
      }
 
      function sendFile() {
        var file = document.getElementById("filename").files[0];
 
        if (!file) {
          alert("File needs to be selected");
          return;
        }
 
        if (file.size > 1000000) {
          alert("File should be smaller than 1MB");
          return;
        }
 
        var reader = new FileReader();
        var rawData = new ArrayBuffer();
 
        reader.onload = function (e) {
          rawData = e.target.result;
          ws.send(rawData);
          alert("File has been transferred.");
        };
 
        reader.readAsArrayBuffer(file);
      }
    </script>
  </body>
</html>
)rawliteral";
 
void onEvent(AsyncWebSocket* server, AsyncWebSocketClient* client, AwsEventType type, void* arg, uint8_t* data, size_t len) {
  AwsFrameInfo* info = (AwsFrameInfo*)arg;
 
  switch (type) {
  case WS_EVT_CONNECT:
    os_printf("client [%d] connected [%s]\n", client->id(), client->remoteIP().toString().c_str());
    break;
  case WS_EVT_DISCONNECT:
    os_printf("client [%d] disconnected\n", client->id());
    break;
  case WS_EVT_DATA:
    if (!info->index) {
      os_printf("client [%d] starts uploading\n\nData transferred:\n", client->id());
    }
    for (size_t i = 0; i < len; i++) {
      Serial.write(data[i]);
    }
    Serial.println();
 
    if (info->final) {
      os_printf("\nclient [%d] done uploading\n", client->id());
    }
    break;
 
  default:
    break;
  }
}
 
void setup() {
  Serial.begin(115200);
 
  WiFi.begin(ssid, password);
  Serial.println();
  Serial.print("Connecting to WiFi");
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");  
  }
 
  Serial.printf("\nLocal IP: %s\n", WiFi.localIP().toString().c_str());
 
  ws.onEvent(onEvent);
  server.addHandler(&ws);
  
  server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
    request->send_P(200, "text/html", index_html);
  });
 
  server.begin();
}
 
void loop() {
  ws.cleanupClients();
}

Если файл не выбрать или выбрать слишком большой (сейчас >1MB), то будет соответствующее сообщение. Подключение и отключение висит на соответствующих кнопках. Тестировал с текстовым файлом вот такого содержания:

Code
1
2
I AM YOUR TEXT FILE FOR TESTS!!!
Here is the second line.

Вывод с консоли:

Code
1
2
3
4
5
6
7
8
9
10
11
Connecting to WiFi.......
Local IP: 192.168.88.178
client [1] connected [192.168.88.203]
client [1] starts uploading
 
Data transferred:
I AM YOUR TEXT FILE FOR TESTS!!!
Here is the second line.
 
client [1] done uploading
client [1] disconnected

@Goldz · 27.01.2023, 06:43 **[ТС]**

Jabbson, огромное спасибо за скорость и качество !!!!!! Главная моя ошибка в незнании того что ESPAsyncWebServer имеет свой AsyncWebSocket. Я применял дополнительную библиотеку WebSocketsServer. Отсюда и все косяки.

Но как в пословице - дайте воды попить, а то так кушать хочется, аж переночевать не где. Осмелюсь попросить просветить меня темного в следующих вопросах.
1 - Как "собрать" полученный файл на стороне ESP на SD или LittleFS?
2 - Как отправить сообщение на страницу ?
В WebSocketsServer есть SEND а в AsyncWebSocket нет.
Пробовал client->text( response);. IDE говорит - base operand of '->' has non-pointer type 'WiFiClient', хотя в Вашем примере ошибка не возникает. Бред какой-то.

Использую библиотеки:

C++
1
2
3
4
5
6
7
8
#include <FTPServer.h>
#include <ESP8266WiFi.h> 
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <LittleFS.h>
#include <ArduinoJson.h>
#include <SoftwareSerial.h>
#include <iarduino_GPS_NMEA.h>

Jabbson · 27.01.2023, 18:52

Второй вопрос простой,

2 - Как отправить сообщение на страницу ?

для этого нам нужно изменить две вещи - добавить обработку сообщений на стороне браузера, и послать само сообщение.

Например, вот так добавим обработку к существующему коду функции connect().

HTML5
1
2
3
4
5
6
7
8
      function connect() {
        ws = new WebSocket("ws://" + window.location.hostname + "/ws");
        ws.binaryType = "arraybuffer";
        alert("Connected to: " + "ws://" + window.location.hostname + "/ws");
        ws.onmessage = function(event) {
          alert(`[Server MSG]: ${event.data}`);
        };
      }

теперь можно посылать сообщения через client->print, например в коде, где сервер больше не видит данных и печатает client [%d] done uploading", добавим сообщение, которое пойдет клиенту в браузер:

C++
1
2
3
4
    if (info->final) {
      os_printf("\nclient [%d] done uploading\n", client->id());
      client->printf("I received the data, we are done.");
    }

Вот как это выглядит в браузере:

по поводу записи файла - посмотрю, отпишусь. у меня лежал модуль sd карт для ардуин, заодно поиграюсь.

Jabbson · 27.01.2023, 19:00

или

C++
1
client->printf("I received the data (%d bytes), we are done.", len);

Jabbson · 28.01.2023, 02:06

Запись в файл тоже оказалась достаточно простой.

C++
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  case WS_EVT_DATA:
    if (!info->index) {
      os_printf("client [%d] starts uploading\n\nData transferred:\n", client->id());
    }
 
    for (size_t i = 0; i < len; i++) { // выводит на экран
      Serial.write(data[i]);
    }
 
    // new code start
    f = SD.open("new1.txt", O_WRITE); // выводит в файл
    f.write(data, len);
    f.close();
    // new code end
 
    if (info->final) {
      os_printf("\nclient [%d] done uploading\n", client->id());
      client->printf("I received the data (%d bytes), we are done.", len);
    }

теперь отключаю карту от ридера и пёхаю её в ноут.

Code
1
2
3
4
5
6
7
8
9
10
~ $ cd /Volumes/ARDSD
/Volumes/ARDSD $ ls -l
total 64
-rwxrwxrwx  1 jabbson  staff  60  1 Jan  2098 new1.txt
 
/Volumes/ARDSD $ cat new1.txt
I AM YOUR TEXT FILE FOR TESTS!!!!
Here is the second line…
 
/Volumes/ARDSD $

@Goldz · 29.01.2023, 13:56 **[ТС]**

Jabbson! Снимаю шляпу. Большое спасибо за помощь. Вопрос по поводу Websocket я уже задавал два года назад на другом форуме. Получил ответ что это в принципе не возможно. Видно чудеса бывают! Немного переработал скетч и получилось вот что:

C++
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FTPServer.h>
#include <LittleFS.h>
#include <ArduinoJson.h>
 
 
const char* ssid = "........."; // change the ssid
const char* password = "........"; // change the password
String Fws;//имя файла
size_t lenFws;//размер файла
size_t lenFp;//размер принятого блока
File ff; // записываемый файл
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");
FTPServer ftpSrv(LittleFS);
 
const char index_html[] PROGMEM = R"rawliteral(
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Upload Files</title>
  </head>
 
  <body>
    <h2>File Upload</h2>
    Select file
    <input type="file" id="filename" />
    <br />
    <input type="button" value="Connect" onclick="connect()" />
    <br />
    <input type="button" value="Upload" onclick="sendFile()" />
    <br />
    <input type="button" value="Disconnect" onclick="disconnect()" />
    <script>
      var ws;
 
      function connect() {
        ws = new WebSocket("ws://" + window.location.hostname + "/ws");
        ws.binaryType = "arraybuffer";
        alert("Connected to: " + "ws://" + window.location.hostname + "/ws");
      ws.onmessage = function(event) {
          alert(`[Server MSG]: ${event.data}`);
        };
      }
      
      function disconnect() {
        ws.close();
        alert("Disconnected");
      }
 
      function sendFile() {
        var file = document.getElementById("filename").files[0];
       let obj = new Object();
       obj.id = "FiCo";
       obj.Fws = file.name;
       obj.lenFws = file.size;
       let jsonString= JSON.stringify(obj);
       ws.send(jsonString);
        if (!file) {
          alert("File needs to be selected");
          return;
        }
 
        if (file.size > 1000000) {
          alert("File should be smaller than 1MB");
          return;
        }
 
        var reader = new FileReader();
        var rawData = new ArrayBuffer();
 
        reader.onload = function (e) {
          rawData = e.target.result;
          ws.send(rawData);
          alert("File has been transferred.");
        };
 
        reader.readAsArrayBuffer(file);
      }
    </script>
  </body>
</html>
)rawliteral";
 
void onEvent(AsyncWebSocket* server, AsyncWebSocketClient* client, AwsEventType type, void* arg, uint8_t* data, size_t len) {
  AwsFrameInfo* info = (AwsFrameInfo*)arg;
   switch (type) {
  case WS_EVT_CONNECT:
    os_printf("client [%d] connected [%s]\n", client->id(), client->remoteIP().toString().c_str());
    break;
  case WS_EVT_DISCONNECT:
    os_printf("client [%d] disconnected\n", client->id());
    break;
  case WS_EVT_DATA:
  if(info->opcode == WS_TEXT)
{
  String msg;
  for(size_t i=0; i < info->len; i++) {
          msg += (char) data[i];
        }
  
  Serial.println(msg);
  DynamicJsonDocument object(1024);
        deserializeJson(object, msg);
        if (object["id"]=="FiCo")
        {
        Fws =object["Fws"].as<String>();
        lenFws = object["lenFws"]; 
        object.clear(); 
        Serial.println(lenFws);
      Serial.println(Fws);
      if (LittleFS.exists(Fws)) LittleFS.remove(Fws);
      ff = LittleFS.open(Fws, "a"); // выводит в файл
      lenFp=0;
        }
}
  else
  {
    if (!info->index) {
  
      //os_printf("client [%d] starts uploading\n\nData transferred:\n", client->id());
    }
   // for (size_t i = 0; i < len; i++) {
   //   Serial.write(data[i]);
   // }
    ff.write(data, len);
    lenFp=lenFp+len;
        if (info->final) {
      //os_printf("\nclient [%d] done uploading\n", client->id());
      if (lenFp==lenFws)
    {
      ff.close();
      client->printf("Записано");
      Serial.println("Gotovo"); 
}
    }
  }
    break;
 
//  default:
//    break;
  }
}
 
void setup() {
  Serial.begin(74880);
 
  WiFi.begin(ssid, password);
  Serial.println();
  Serial.print("Connecting to WiFi");
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");  
  }
 
  Serial.printf("\nLocal IP: %s\n", WiFi.localIP().toString().c_str());
 bool fsok = LittleFS.begin();
  Dir dir = LittleFS.openDir("/");
  ws.onEvent(onEvent);
  server.addHandler(&ws);
  
  server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
    request->send_P(200, "text/html", index_html);
  });
  ftpSrv.begin("FTP", "12345678");
  server.begin();
}
 
void loop() {
  ws.cleanupClients();
  ftpSrv.handleFTP();
}

Это конечно прототип, но все работает и дает простор для мысли. Результат проверяю, по старой памяти по FTP FARом. В нем есть клиент и в полне удобоваримый цветной редактор.
При попытке записать файл размером большим чем свободное место в ESP происходит хард резет. Перед записью надо проверять свободное место в ESP.

Сижу ломаю голову где при записи взять данные для ProgressBarа. Может кто знает ?
Подскажите!

Jabbson · 29.01.2023, 21:47

Думаю, вот этот ответ даст Вам то, что нужно.

@Goldz · 30.01.2023, 05:37 **[ТС]**

Спасибо за ссылку. Уже успел разобраться сам!

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

Jabbson 5906 / 3358 / 1036 Регистрация: 03.11.2009 Сообщений: 10,008
	29.01.2023, 21:47
	Думаю, вот этот ответ даст Вам то, что нужно. 1

@Goldz 0 / 0 / 0 Регистрация: 08.06.2015 Сообщений: 26
	30.01.2023, 05:37 [ТС]
	Спасибо за ссылку. Уже успел разобраться сам! 0