Разместить веб-сервер на esp32d, на котором есть гиперссылка, которая запускает песню ardiuno через buzzer

Я хотел бы использовать свой ESP32D для создания точки беспроводного доступа и размещения html-страницы, на которой есть гиперссылка и несколько других вещей, которые запускают песню arduino (rickroll) и воспроизводят ее через зуммер.

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

html-файл https://pastebin.com/sGmPPVYG

(Arduino-song)https://github.com/robsoncouto/arduino-songs/blob/master/nevergonnagiveyouup/nevergonnagiveyouup.ino

, 👍-1

Обсуждение

Просто для ясности гиперссылка должна заставить песню воспроизводиться, @JaydenE55

это может помочь ... http://www.martyncurrey.com/esp8266-and-the-arduino-ide-part-6-javascript-and-ajax/, @jsotola

это более современная технология ... https://randomnerdtutorials.com/esp32-websocket-server-arduino/, @jsotola

Re “_Rick Roll!/a>_”: вы имеете в виду “Rick Roll!</a>”., @Edgar Bonet


1 ответ

1

Это частичный ответ. Я предполагаю, что вы уже знаете, как создать веб -сервер на вашем ESP32 и как реагировать на запросы клиентов. Если нет, то в Интернете есть учебные пособия. Здесь я специально остановлюсь на вопросе гиперссылки.

Вы написали:

<a href="trigger">Click Here To Trigger The Rick Roll!/a>

Не только закрывающий тег неверен (он должен быть </a></a>), но и такая ссылка, скорее всего, не то, что вам нужно. Семантика гиперссылки такова: “ найдите этот ресурс и отобразите его здесь, заменив текущую страницу”. Если у вас нет отображаемого ресурса (веб-страницы, изображения...) на вашем сервере с именем “триггер”, вам не нужна гиперссылка. Вам нужен кликабельный элемент, который может выглядеть как гиперссылка и при нажатии на который запускается запрос на сервер, но без замены текущей страницы.

Поэтому я бы начал с замены ссылки на общий контейнер:

<div id="trigger">Click Here To Trigger The Rick Roll!</div>

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

#trigger {
  color: blue;
  cursor: pointer;
}

Затем в теге <script><сценарий> добавьте желаемое поведение:

window.onload = () => {
    document.getElementById("trigger").onclick = () => {
        fetch("trigger", { method: "POST" });
    };
};

Когда пользователь нажимает на элемент, клиент отправляет “СООБЩЕНИЕ”. запросите у сервера ресурс “триггер”, и сервер может отреагировать на это воспроизведением песни. Вместо этого вы могли бы использовать запрос “GET” , но это нарушило бы семантику “GET”, которая заключается в получении ресурса с сервера, не влияя на его состояние.

,
Смотрите также: