А какая ide для программирования используется?
ардуино привык уже. пользуюсь редко, когда холодает 
Что? Где-то явно нет знаков препинания. Для передачи данных в браузер, JSON отличный вариант.
1 лайк
- Вы не понимаете отличия tcpsocket от websocket.
- Для реализации задачи достаточно под каждый датчик сформировать url и отдавать чистое значение, которое ляжет в нужное поле.
- Вы даже не понимаете принципы отладки. Попробуйте посмотреть что у вас запрашивает у модуля компьютер и что отдает модуль - tcpdump вам поможет.
Его html понимает прекрасно с javascript.
Но все равно - передавать массив пачкой это как раз и не помещается в websocket. Мало того, что реализации нормальной ws нет для esp (я переделывал библиотеку и ядро), так еще и это совсем лишнее, поскольку передавать каждый раз все значения совсем не надо, а только изменения. Да и всегда проще сделать обновление страницы, либо отдельного элемента по таймеру. Да и совать это в браузер не нужно скорее всего. Достаточно передавать значения устройствам исполнения, либо просто команды выдавать на конечное устройство.
Тогда не совсем понятно что допиливать надо.
Синтаксис будет один и тот же, что для ESP, что для других чипов которые поддерживаются в arduino IDE. Также на сайте библиотеки есть конструктор. Можно определить заранее какого размера у вас будет json. Да и код он вам набросает для arduino.
Выше написали всё правильно.
Надо определиться с размером и частотой передачи данных через вебсокет.
В каких-то пределах можно настроить параметры так как описано на гитхабе.
Для отладки можно использовать в google chrome отлатдчик открываемый по F12.
2 лайка
этот кусок принять в скрипте
А циклов обязательно 2 нужно?
схема такая: 2 микрухи CB4021 ПО 8 ВХОДОВ. подключены к есп по 3 пинам , это регистры они опрашиваются в цикле
#define LATCHPIN D2 //GREEN 9 chip CD4021
#define DATAPIN D3 //YELLOW 3 chip CD4021
#define CLOCKPIN D4 // GREY 10 chip CD4021
поэтому 2 switchVar т.н. простой расширитель DI входов можно регистры ещё добавлять помоему до 128
Я бы сначала считал все данные, обработал, а потом отправил скопом.
1 лайк
У Вас читается 1 бит, а потом вы передаете 7 значений в цикле, затем опять читаете 1 бит и опять в цикле 7 значений.
алгоритм передачи рабочий
приём в консоли был 0:0:0:0:0:0:0:0: и т.д.
и отправить м.б. ws.textAll(String(“1”);
#define LATCHPIN D2 //GREEN 9 chip CD4021
#define DATAPIN D3 //YELLOW 3 chip CD4021
#define CLOCKPIN D4 // GREY 10 chip CD4021
byte switchVar1 = 72; //01001000 регистр сдвига CD4021
byte switchVar2 = 159; //10011111
// cheek register СВ4021, contact with rezistors 1,5kOm
digitalWrite(LATCHPIN, 1);
delayMicroseconds(20);
digitalWrite(LATCHPIN, 0);
//--- 1 register СВ4021
switchVar1 = shiftIn(DATAPIN, CLOCKPIN);
for (int n = 0; n <= 7; n++) {
if (switchVar1 & (1 << n)) { // array[0-7]
ws.textAll(String("1"); //nclose
} else {
ws.textAll(String("0"); //nopen
}
}
//--- 2 register СВ4021
switchVar2 = shiftIn(DATAPIN, CLOCKPIN);
for (int n = 0; n <= 7; n++) {
if (switchVar2 & (1 << n)) { // array[7-15]
ws.textAll(String("1"); //nclose
} else {
ws.textAll(String("0"); //nopen
}
}
function connect() {
try {
ws = new WebSocket('ws://' + window.location.host + '/ws');
} catch (e) {
reconnect();
return;
}
ws.onopen = () => setConn(true);
ws.onmessage = e => {
const m = e.data || '';
if (m === 'ON') {
$s.className = 'status on';
$s.textContent = 'Светодиод включён';
} else if (m === 'OFF') {
$s.className = 'status off';
$s.textContent = 'Светодиод выключён';
}
else if (m.startsWith('p=')) { // затыкается на этом месте, не собирается стрктура опроса в цикле
var arrayS == e.data.split(:);
for (var i = 0; i < 11; i++) {
if (m === '1') {
$p.textContent = m.split(':')[1];
} else if (m === '0') {
$p.textContent = m.split(':')[1];
}
}
))))
А теперь вопрос - ЧТО БУДЕТ ПРОИСХОДИТЬ, ЕСЛИ БРАУЗЕР ЗАКРЫТ?
ничего, управления нету только сбор инфро с датчиков.
!упр светодиодом для теста!
Есть замечательный пример к библиотеке ESPAsyncWebServer - WebSocket.ino пробовали?
И в 32 сообщении вам еще раз напомнили, что надо данные собрать и потом отправлять, а не слать сообщения в цикле. Оно так не работает, во всяком случае у меня.
Вобщем пробуйте пример из библиотеки, не заработает надо смотреть почему, заработает надо думать что вам делать дальше, а так по кускам кода и вашим сообщениям вообще непонятно что у вас работает а что нет.
Либо как тут уже 100500 раз писали - выложите полный код который можно загрузить и скомпилировать, чтобы проверить его работоспособность.
Если код секретный, то сделайте небольшой пример с описанием что нужно от кода и что есть на данный момент.
const char htmlPage[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ESP WebSocket</title>
<style>
* {
/* margin: 0; */
background-color: black;
}
body {
font-family: system-ui, -apple-system, Arial, sans-serif;
max-width: 640px;
margin: 48px auto;
padding: 0 16px;
background: #f5f5f7;
}
h1 {
color: aqua;
font-family: sans-serif;
font-weight: normal;
margin: 3px;
}
th {
color: orangered;
font-family: sans-serif;
font-size: 15px;
padding-left: 8px;
padding-right: 8px;
border: 1px solid white;
border-radius: 10px;
}
td {
color: white;
font-family: cursive;
text-align: center;
text-decoration: center;
font-size: 20px;
padding: 1px 3px;
border: 1px solid #3e3e3e;
border-radius: 5px;
}
.form {
border: 3px solid grey;
/* background-color: cadetblue;*/
background-size: auto;
margin-bottom: 20px;
box-shadow: 5px 8px 20px 0px grey;
}
.card {
background: #fff;
padding: 24px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
h1 {
margin: 0 0 12px;
font-size: 24px;
}
.status {
font-size: 18px;
padding: 12px;
border-radius: 8px;
margin: 12px 0;
text-align: center;
}
.on {
background: #2e7d32;
color: #fff;
animation: animationO 10s infinite;
}
.off {
background: #c62828;
color: #fff;
}
button {
width: 100%;
padding: 14px 16px;
font-size: 16px;
border: 0;
border-radius: 10px;
cursor: pointer;
background: #1976d2;
color: #fff;
}
.meta {
margin-top: 12px;
color: #444;
font-size: 14px;
display: grid;
grid-template-columns: 120px 1fr;
gap: 4px 8px;
}
.mono {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
</style>
</head>
<script>
let ws = null,
timer = null;
const $s = document.getElementById('status')
const $c = document.getElementById('conn')
const $d = document.getElementById('sensor')
const $b = document.getElementById('btn')
const $t = document.getElementById('temp')
const $h = document.getElementById('humidity')
const $p = document.getElementById('pin_')
function setConn(x) {
$c.textContent = x ? 'подключено' : 'отключено';
$c.style.color = x ? 'green' : 'red'
}
function reconnect() {
if (timer) return;
timer = setTimeout(() => {
timer = null;
connect()
}, 2000)
}
function connect() {
try {
ws = new WebSocket('ws://' + window.location.host + '/ws');
} catch (e) {
reconnect();
return;
}
ws.onopen = () => setConn(true);
ws.onmessage = e => {
const m = e.data || '';
if (m === 'ON') {
$s.className = 'status on';
$s.textContent = 'Светодиод включён';
} else if (m === 'OFF') {
$s.className = 'status off';
$s.textContent = 'Светодиод выключён';
}
else if (m.startsWith('SENSOR:')) {
$d.textContent = m.split(':')[1];
} else if (m.startsWith('TEMP:')) {
$t.textContent = m.split(':')[1];
} else if (m.startsWith('HUMID:')) {
$h.textContent = m.split(':')[1];
}
};
ws.onclose = () => {
setConn(false);
$s.className = 'status off';
$s.textContent = 'Соединение потеряно';
console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
reconnect();
};
ws.onerror = function(err) {
console.error('Socket encountered error: ', err.message, 'Closing socket');
ws.close();
}
$b.addEventListener('click', () => {
if (ws && ws.readyState === WebSocket.OPEN) ws.send('TOGGLE');
else alert('Нет соединения')
});
connect();
</script>
<body>
<div class="card">
<h1>ESP WebSocket</h1>
<div id="status" class="status off">Соединение...</div>
<button id="btn">Переключить светодиод</button>
<div class="form">
<h1>СЕНСОРЫ</h2>
<table>
//таблица отображаемых данных
<tr>
<td>TEMP</td>
<td>HUMIDITY</td>
<td>SENSOR</td>
<td>SOCKET</td>
</tr>
<tr>
<td><span id="temp" class="mono"></span><span> °C</span></td>
<td><span id="humidity" class="mono"></span><span> %</span></td>
<td><span id="sensor" class="mono"></span><span> %</span></td>
<td><span id="conn" class="mono"></span></td>
</tr>
<tr>
<---- register ---->
<td><span id='pin_0'></span></td>
<td><span id='pin_1'></span></td>
<td><span id='pin_2'></span></td>
<td><span id='pin_3'></span></td>
<td><span id='pin_4'></span></td>
<td><span id='pin_5'></span></td>
<td><span id='pin_8'></span></td>
<td><span id='pin_9'></span></td>
<td><span id='pin_6'></span></td>
<td><span id='pin_7'></span></td>
<td><span id='pin_12'></span></td>
<td><span id='pin_13'></span></td>
</tr>
</table>
</div>
</body>
</html>
)rawliteral";
index.h
1 лайк
Доберусь до дома попробую запустить.
принял
ws.onmessage = e => {
const m = e.data || ‘’;
if (m === ‘ON’) {
$s.className = ‘status on’;
$s.textContent = ‘Светодиод включён’;
} else if (m === ‘OFF’) {
$s.className = ‘status off’;
$s.textContent = ‘Светодиод выключён’;
} else if (m.startsWith(‘SENSOR:’)) {
$d.textContent = m.split(‘:’)[1];
} else if (m.startsWith(‘TEMP:’)) {
$t.textContent = m.split(‘:’)[1];
} else if (m.startsWith(‘HUMID:’)) {
$h.textContent = m.split(‘:’)[1];
}
console.log(‘Message from server:’, e.data);
};
И результат в студию покажите.