Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in read-only mode.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

HTML Grundgerüst und Template - HTML, Bootstrap & jQuery für dein Projekt

Tipps, Tricks & Tutorials

624

Anmelden zum Antworten

cooper zuletzt editiert von cooper
Ich bin momentan des Öfteren damit beschäftigt, kleine Javascript-Anwendungen zu programmieren, als Framework nutze ich das beliebte jQuery. Da diese Projekte immer gleich anfangen habe ich mir ein kleines HTML Template angelegt und gespeichert. Dieses Grundgerüst will ich hiermit mit euch teilen.

Das Template besteht aus den drei essentiellen Dateien die man für ein Webprojekt benötigt.
Zum einen natürlich die index.html - zum Stylen eine main.css und für Scripts eine main.js Datei.

Zusätzlich kommen ein paar Helferlein / Frameworks zum Einsatz, die für heutige Webprojekte fast unerlässlich sind, diese sind:
Nicht benötigte Bestandteile können natürlich ohne Probleme entfernt werden.

Open Graph Support

Zusätzlich dazu wird auch ein Favicon und ein Thumbnail Image auf Open Graph-Basis bereitgestellt. Das heißt ihr habt Out-Of-The-Box direkt auch eine moderne Site-Preview auf allen gängigen Seiten wie Twitter, Facebook, Discord & mehr like:

Das HTML Grundgerüst funktioniert 100% offline, da alle Dateien lokal eingebunden werden. Es wird auf kein CND zurückgegriffen.

Download
- Download .zip via Github
- oder via GitHub-CLI:
  git clone https://github.com/me-cooper/html-base.git
Die Ordnerstruktur
```
01_html-bootstrap-jquery
│   index.html
│
├───assets
│   └───head
│           favicon.png
│           thumbnail.jpg
│
├───css
│       bootstrap.min.css
│       bootstrap.min.css.map
│       main.css
│
└───js
        bootstrap.min.js
        bootstrap.min.js.map
        fontawesome-5.15.4.js
        jquery-3.6.0.min.js
        main.js
```
Die Dateien sind alle in separaten Ordnern, sodass das Template ohne Probleme als Ausgangsbasis für dein Webprojekt verwendet werden kann.
Eigene Styles und eigene Scripte können zusätzlich eingebunden werden, oder man verwendet dafür die Dateien main.css und main.js.

Suchst du auf die schnelle nur ein HTML-Template, dass alle bare Meta-Tags beinhaltet? Dann kannst du dir auch einfach den folgenden Content kopieren, dort ist der Rest der Dateien nicht eingebunden, und dient für Testzwecke.
```
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  <title>look at me</title>
  <link rel="icon" type="image/png" href="favicon.png"/>

  <meta name="description" content="look at me">
  <meta name="author" content="c00p">
  <meta property="og:image" content="https://OG-Image-Thumbnail.com">


  
  <link rel="stylesheet" href="main.css">

  
  <script src="main.js"></script>

</head>
<body>
 
  

  
  
</body>
</html>
```
Viel Spaß mit eurem Webprojekt.
1 Antwort Letzte Antwort
Antworten Zitieren 0

Ähnliche Themen

Der eigene Discord Bot mit discord.js
bot discord discord.js javascript programmieren
Tipps, Tricks & Tutorials • • cooper

1

0
Stimmen

1
Beiträge

1835
Aufrufe

Wenn es darum geht, den eigenen Discord Bot zu programmieren, sind zwei Programmiersprachen besonders im Trend: Python und Javascript in der Laufzeitumgebung Node.js. Und genau um letzteres geht es heute. In diesem Tutorial möchte ich zusammen mit euch den ersten eigenen Discord-Bot mithilfe von discord.js programmieren.

In der Anleitung werden wir ein Template verwenden, welches mir freundlicherweise von @AllerEchteNlmyr zur Verfügung gestellt wurde.
Vorbereitungen
Bevor der eigene Bot mit Javascript programmiert werden kann, muss Node.js auf deinem System installiert sein. Du kannst es prüfen, in dem du die Kommandozeile deines Computers aufrufst und folgenden Befehl in der Konsole absetzt:
node -v
Ich habe Node.js installiert und bekomme folgende Rückmeldung:
C:\Users\cooper>node -v v14.15.1
Falls du Node noch nicht installiert hast, solltest du das jetzt unbedingt tun. Eine Anleitung zur Installation unter Linux findest du hier: Installation und Update von Node.js und NPM unter Linux. Für die Installation unter Windows oder MacOS kannst du den Installer von Node.js verwenden: nodejs.org - Node.js Installer herunterladen
Das Bot-Verzeichnis
In Node.js gibt es viele Module, die man herunterladen und verwenden kann. Auch für unseren eigenen Bot werden wir ein solches Modul verwenden und erstellen. Dank eines Befehls via NPM geht das ziemlich einfach.

Erstellt zunächst einen Ordner in dem ihr den Bot speichern und programmieren möchtet.
Mein Ordner trägt den Namen makesmart-discord-bot.

In diesem Ordner müsst ihr die Konsole öffnen. Navigiert dazu entweder manuell - via Konsole - in den Ordner, oder öffnet die Konsole direkt aus dem geöffneten Ordner heraus:

Datei -> Windows PowerShell öffnen -> Windows PowerShell öffnen

makesmart_windows_powershell
PS D:\Users\cooper\Desktop\makesmart-discord-bot>
Um den eigenen Discord Bot zu initialisieren setzen wir folgenden Befehl in der Konsole ab: npm init.

Nach dem Absenden des Befehls werden euch einige Fragen zu eurem Paket gestellt. Unter anderem wird nach dem Namen und der Version gefragt. Da das unser eigenes Paket ist, können wir die Parameter alle selber bestimmen.
package name: (makesmart-discord-bot) makesmart-discord-bot version: (1.0.0) 1.0.0 description: Little discord bot from cooper@makesmart entry point: (index.js) index.js test command: git repository: keywords: author: license: (ISC) About to write to D:\Users\cooper\Desktop\makesmart-discord-bot\package.json: { "name": "makesmart-discord-bot", "version": "1.0.0", "description": "Little discord bot from cooper@makesmart", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes)
Mit der Eingabe von yes wird unser Paket initialisiert und die Datei package.json erstellt, mit Inhalt gefüllt und abschließend gespeichert.

Der Ordner makesmart-discord-bot ist nun nicht mehr leer sondern enthält Informationen zu unserem Paket in der package.json.
makesmart-discord-bot └───package.json Die Installation von discord.js
Um das discord.js Modul zu installieren, verwenden wir ebenfalls den Paketmanager NPM. Auch dieser Befehl wird wieder direkt innerhalb des Ordners makesmart-discord-bot ausgeführt.

Der Befehl zum installieren des Moduls lautet: npm install discord.js.
PS D:\Users\cooper\Desktop\makesmart-discord-bot> npm install discord.js npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN makesmart-discord-bot@1.0.0 No repository field. + discord.js@12.5.1 added 15 packages from 17 contributors and audited 15 packages in 3.292s found 0 vulnerabilities
In unserem Ordner wurde das Paket discord.js installiert. Das Paket sowie alle Abhängigkeiten befinden sich im Order node_modules.
makesmart-discord-bot └─── node-modules └─── package.json └─── package-lock.json
Wir haben unserer Ordnerstruktur soweit fertig und können uns dem Template widmen.
Das Template
Wie bereits erwähnt verwende ich in diesem Tutorial ein Template von @AllerEchteNlmyr. Das Template könnt ihr euch direkt hier herunterladen:

makesmart-discord-template.zip

Entpackt das Archiv und speichert alle Dateien in dem Order eures Bots. Das Verzeichnis sollte dann wie folgt aussehen:
makesmart-discord-bot ├───commands ├───node-modules └───utils └─── package.json └─── package-lock.json └─── index.js Discord Bot anlegen
Um einen Discord Bot zu programmieren, muss er zuerst über die Developer-Konsole von Discord angelegt werden. Das geht über diesen Link: https://discord.com/developers/applications

makesmart_discord_bot_new_application

Vergebt eurer App einen passenden Namen und erstellt sie. Anschließend kann links über das Menü der Bot innerhalb der Applikation erstellt werden.

makesmart_add_discord_bot.png

Um die Präsenz eines Users triggern zu können, muss ein Haken bei den folgenden Einstellungen aktiviert sein:
PRESENCE INTENT If your bot tracks presence data, you may need the presence intent to receive presence event data. [YES] SERVER MEMBERS INTENT If your bot tracks server members or downloads the entire member list, you may need the server members intent to receive member events and the member list. [YES]
Abschließend kann der Token des Bots kopiert und gespeichert werden.

makesmart_discord_bot_show_token.png

Zu guter letzt muss der Bot noch zum Server hinzugefügt werden. Geht dazu innerhalb der erstellen Applikation links im Menü auf OAuth2 und setzt einen Haken bei bot. Im Textfeld taucht ein Link aus, mit dem ihr den Bot auf euren Server einladen könnt.

Nachdem der Bot erstellt wurde, können für den Bot weitere Berechtigungen festgelegt werden.
Zum üben und probieren könnt ihr eurem eigenen Bot einfach die Berechtigung Administrator geben.
Der erste Start
Bevor der Bot das erste mal gestartet werden kann, muss der gerade eben kopierte Token in der config.json im Ordner utlis eingefügt werden.
{ "token": "NzgyNTcTNjc5MjY3ODk2MYQ1.X7OT2A.Ex4XlxDzN3kRZNAzRHP9BDht8II", "prefix": "ms." }
Der Value von prefix bestimmt, wie die commands des Bots aufgerufen werden. In diesem Fall würden die commands wie folgt aussehen:
ms.start ms.show ms.ban ms.poll
Nachdem der Token eingetragen und die Datei gespeichert wurde, kann der Bot das erste Mal gestartet werden. Das passiert wieder über die Konsole innerhalb des Bot-Ordners:
PS D:\Users\cooper\Desktop\makesmart-discord-bot> node index.js
Der Bot wurde erfolgreich eingeloggt und lauscht nun nach Befehlen im Chat:
PS D:\Users\cooper\Desktop\makesmart-discord-bot> node index.js Logged in as cooper-bot-tutorial#6189!
Egal was wir schreiben, es wird nichts passieren. Denn es wurde noch keine Aktion für einzelne Commands festgelegt. Lediglich der Prefix wurde definiert.
Der erste eigene Befehl
Öffnet den Ordner commands und darin die Datei command.js.
const Discord = require("discord.js"); const fs = require("fs"); const config = JSON.parse(fs.readFileSync("./utils/config.json", "utf8")); module.exports = { name: "command", description: "This is a command!", execute(message, args){ } }
Als leichtes Beispiel, werden wir innerhalb der Konsole ausgeben lassen, wenn wir eine Nachricht mit dem command command erhalten.

Das geht mithilfe von console.log("Nachricht mit command 'command' erhalten.");
const Discord = require("discord.js"); const fs = require("fs"); const config = JSON.parse(fs.readFileSync("./utils/config.json", "utf8")); module.exports = { name: "command", description: "This is a command!", execute(message, args){ console.log("Nachricht mit command 'command' erhalten."); } }
Damit der Bot den command auch erfasst, muss dieser in der Datei index.js festgelegt werden.
client.on("message", message => { if(!message.content.startsWith(config.prefix) || message.author.bot) return; const args = message.content.slice(config.prefix.length).split(/ +/); const command = args.shift().toLowerCase(); if(command === "help"){ client.commands.get("help").execute(message, args); } });
Ersetzt den Befehl help durch den in der commands/command.js definierten command.
if(command === "command"){ client.commands.get("command").execute(message, args); }
Vergesst nicht, das Programm in der Konsole mithilfe von Strg + C zu beenden, um es dann wieder mit node index.js zu starten, da die Änderungen sonst nicht wirksam werden.

Sobald wir innerhalb von Discord jetzt ms.command senden, erhalten wir die Ausgabe in der Konsole:
PS D:\Users\cooper\Desktop\makesmart-discord-bot> node index.js Logged in as cooper-bot-tutorial#6189! Nachricht mit command 'command' erhalten. Zusammenfassung Prefix
Der Prefix, mit dem die Funktionen des Bots aufgerufen werden, muss immer vorangestellt werden.

Egal ob ms.command, !command oder ?command, der Prefix wird in der Datei utils/config.json festgelegt.
{ "token": "NzgyNTcTNjc5MjY3ODk2MYQ1.X7OT2A.Ex4XlxDzN3kRZNAzRHP9BDht8II", "prefix": "ms." } Commands
Es ist ratsam, für jeden command eine eigene Datei anzulegen. Die Dateien für die commands werden automatisch von der index.js eingebunden. Die Dateien für die einzelnen commands befinden sich unter commands/*.

Der Name der Datei hat nichts mit dem command an sich zu tun. Die Paramater werden in der Datei nochmal einzeln definiert. Wobei der Wert von name der eigentliche command ist.
module.exports = { name: "meinCommand", description: "This is a command!", execute(message, args){ } } Command ausführen
Commands werden in der index.js ausgeführt. Wenn der Bot eine Nachricht erhält der mit einem command beginnt, wird die execute()-Funktion des jeweiligen commands aufgerufen.
if(command === "meinCommand"){ client.commands.get("meinCommand").execute(message, args); } const Discord = require("discord.js"); const fs = require("fs"); const config = JSON.parse(fs.readFileSync("./utils/config.json", "utf8")); module.exports = { name: "meinCommand", description: "This is a command!", execute(message, args){ console.log("Nachricht mit command 'meinCommand' erhalten."); } }
Weiteres wird folgen…

Wollt ihr wissen, wie ihr einen Discord-Bot mit Slash-Commands programmiert? Dann schaut euch gerne das Tutorial von @merlin an.
Tutorial: Der eigene Discord Bot mit Slash Commands
Websockets auf dem ESP8266 nutzen - Template
d1-mini esp8266 espasyncwebserver sockets webserver websockets
Tipps, Tricks & Tutorials • • cooper

1

0
Stimmen

1
Beiträge

413
Aufrufe

Hier möchte ich kurz ein Template teilen, mit dem ich mich gerade beschäftigt habe: Websockets auf dem ESP8266.

Also Grundlage sollte man wissen, wie man mit HTML Dateien auf dem ESP arbeiten kann. Hierzu kann dieses Template verwendet werden.

Außerdem reicht hier nicht nur Basis-Wissen über den ESP und seine Programmierung, sondern hier kommen viele einzelne Bausteine zusammen. Hier arbeiten der Server (ESP8266) und der Client (Javascript) Hand in Hand zusammen, und genau aus dem Grund sollte man auch Javascript zu gewissen Teilen beherrschen, da die Kommunikation immer aus einem Client und einem Server Part besteht. Aber okay. Weiter gehts.
Was macht dieser Code
Dieser Code dient aktuell in erster Linie als Snippet bzw. Template. Es wurde als nur minimal implementiert und mit einem kleinen Beispiel versehen. Im loop() findet man folgenden Part:
static bool state = false; if(state != digitalRead(15)){ state = digitalRead(15); Serial.println(state); notifyClients(String(state)); }
Als Input-Button wird am D1 Mini der Pin D8 verwendet - also GPIO15. Wenn man den Input mit einem Schalter / Taster betätigt, dann wird der Wert dementsprechend auf der Webseite des ESPs aktualisiert. Bei allen Clients in nahezu Echtzeit.

Außerdem bekommt man eine Meldung, wenn ein neuer Nutzer den Server besucht. Dies dient nur als Beispiel.

Anbei noch ein kleines Video, was der folgende Code genau macht, und wie es aussieht:

Die Serverseitigen Dateien wurden bearbeitet, um gleich ein praktisches Beispiel zu haben. Die Dateien im Folgendem könnt ihr 1:1 übernehmen und sie auf euren ESP (wie hier beschrieben) hochladen.
script.js $( document ).ready(function() { // Sobald das Dokument geladen ist console.log("I'm ready to makesmart!"); }); /* Websockets Beispiel */ let socket = new WebSocket(`ws://${window.location.hostname}/ws`); // Funktionen die genutzt werden können // Nachricht an den Server senden: socket.send("connection:success"); socket.onopen = function(e) { console.log("Websockets Verbindung hergstellt!"); socket.send("connection:new"); console.log(); }; socket.onmessage = function(event) { console.log('Nachricht vom Server erhalten:', event.data); if(event.data == "1"){ $("h1#state").hide(200, function() { $(this).html("ON").show(200); $(this).css("color", "green"); }); } if(event.data == "0"){ $("h1#state").hide(200, function() { $(this).html("OFF").show(200); $(this).css("color", "black"); }) } if(event.data == "user:welcome"){ $('#toast-title').html("Willkommen"); $('#toast-message').html("Willkommen auf dem Server!"); $('#notify-toast').slideDown(200); } if(event.data == "user:new"){ // Diese Meldung hier soll nur angezeigt werden, wenn keine andere Meldung angezeigt wird // Da sonst auch neue Nutzer diese Meldung bekommen, neue Nutzer sollen aber persönlich begrüßt werden if($("#notify-toast").is(":hidden")){ $('#toast-title').html("Neuer Nutzer"); $('#toast-message').html("Ein neuer Nutzer ist auf dem Server!"); $('#notify-toast').slideDown(200); } } }; socket.onclose = function(event) { if (event.wasClean) { console.log('Verbindung zum Server wurde geschlossen!'); } else { console.log('Verbindung verloren: Timeout!'); } }; socket.onerror = function(error) { console.log('[error]:', error.message); }; $('#close-toast').click(function(){ $('#notify-toast').slideUp(200); }); index.html <!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>makesmart HTML 5 Template</title> <meta name="description" content="makesmart HTML Template"> <meta name="author" content="cooper"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">  <link rel="stylesheet" href="assets/css/style.css">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="notify-toast"> <div class="toast-header"> <i class="fa fa-bell"></i> <strong class="mr-auto" id="toast-title">Neuer User</strong> <small>jetzt</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"></button> <span aria-hidden="true" class="pull-right" id="close-toast" style="cursor: pointer;">×</span> </button> </div> <div class="toast-body" id="toast-message"> Ein neuer Nutzer ist beigetreten! </div> </div> <center><h1 id="state">OFF</h1></center>  <script src="assets/js/script.js"></script> </body> </html> style.css h1#state{ font-weight: bolder; margin-top: 30px; } div.toast{ background-color: white; border: 1px solid gray; box-shadow: 5px 5px 5px -5px gray; width: 350px; margin-top: 10px; margin-left: 20px; border-radius: 3px; display: none; } div.toast-header{ background-color: white; border-bottom: 1px solid gray; padding: 5px; color: gray; border-radius: 3px; font-size: .9em; } div.toast-body{ background-color: rgb(243, 243, 243); padding: 10px 10px; font-size: 0.8em; border-radius: 3px; }
Nun kommt der eigentlich wichtige Part: Der Programmcode für den ESP. Ich habe alles kommentiert weil ich denke, dass damit alls erläutert wurde.
Der Programmcode
Auch hier müsst ihr wieder den Hostnamen und die Zugangsdaten vom WLAN anpassen.
// WLAN-Zugangsdaten const char* ssid = "SSID"; const char* password = "PSK"; // Hostname des ESPs -> http://spiffinger.local/ const char* espHostname = "spiffinger"; // // Einfacher Webserver der Dateien aus dem SPIFFS (Filesystem) ausliefert // CC by cooper @ makesmart.net // mehr Infos unter: https://my.makesmart.net/topic/206/ // void setupServerRoutes(); void setupFilePaths(); void onWsEvent(); void setupWebsockets(); void handleWebSocketMessage(); void notifyClients(); // WLAN #include <ESP8266WiFi.h> #include <ESP8266mDNS.h> // Webserver #include <ESPAsyncTCP.h> #include <ESPAsyncWebServer.h> // Filesystem #include <FS.h> // Standard HTTP-Port 80 AsyncWebServer server(80); // Websockets AsyncWebSocket ws("/ws"); // WLAN-Zugangsdaten const char* ssid = "SSID"; const char* password = "PSK"; // Hostname des ESPs -> http://spiffinger.local/ const char* espHostname = "spiffinger"; // Was passiert, wenn eine Seite nicht gefunden werden kann void notFound(AsyncWebServerRequest *request) { request->send(404, "text/html", "<center><h1>404 - error</h1></center>"); } void setup() { delay(500); Serial.begin(115200); Serial.println(); delay(500); // Dateisystem initialisieren if(SPIFFS.begin()){ Serial.println("Dateisystem: initialisiert"); }else{ Serial.println("Dateisystem: Fehler beim initialisieren"); } WiFi.mode(WIFI_STA); WiFi.begin(ssid, password); if (WiFi.waitForConnectResult() != WL_CONNECTED) { Serial.println("WLAN Verbindung fehlgeschlagen"); return; } Serial.print("Verbunden! IP-Adresse: "); Serial.println(WiFi.localIP()); // Starten des mDNS-Servers if (!MDNS.begin(espHostname)) { Serial.println("Fehler beim Staren des mDNS-Servers!"); } // Server Routen werden in einer eigenen Funktion definiert setupServerRoutes(); // Datei Routen werden in einer eigenen Funktion definiert setupFilePaths(); // Für die Websockets setupWebsockets(); server.begin(); } void loop() { // MDNS MDNS.update(); // Websockets ws.cleanupClients(); static bool state = false; if(state != digitalRead(15)){ state = digitalRead(15); Serial.println(state); notifyClients(String(state)); } } void setupServerRoutes(){ // Als Document-Root wird der Ordner "data" // Alle Pfade müssen relativ vom Ordner "data" definiert werden // Datei index.html wird ausgeliefert server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/index.html"); }); server.onNotFound(notFound); } void setupFilePaths(){ // In der index.html Datei wird eine .js und eine .css Datei verlinkt // diese können ohne die folgenden Zeilen nicht gefunden werden // Der erste Pfad bezieht sich auf die .html-Datei // dort ist als Pfad zur CSS-Datei "assets/css/style.css" hinterlegt server.on("/assets/css/style.css", HTTP_GET, [](AsyncWebServerRequest *request){ // also soll auch die Datei aus dem SPIFFS dementsprechend ausgeliefert werden request->send(SPIFFS, "/assets/css/style.css", "text/css"); }); server.on("/assets/js/script.js", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/assets/js/script.js", "text/javascript"); }); // Gleiches kann man auch mit Bildern anderen Dateien machen } void setupWebsockets(){ ws.onEvent(onWebsocketsEvent); server.addHandler(&ws); } void onWebsocketsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventType type, void * arg, uint8_t *data, size_t len){ if(type == WS_EVT_CONNECT){ // Eine neue Websockets Verbindung wurde hergestellt // Serial.println("Client Verbinung hergestellt!"); // Diese nachricht geht nur an den Client client->text("user:welcome"); } if(type == WS_EVT_DISCONNECT){ // Eine Websockets verbindung wurde getrennt // Serial.println("Client Verbindung beendet!"); } if(type == WS_EVT_DATA){ // Eine Websocket-Nachricht wurde empfangen // Serial.println("onWebsocketsEvent();"); handleWebSocketMessage(client, arg, data, len); } } void notifyClients(String msg){ ws.textAll(msg); } // Die zwei wichtigsten Funktionen um auf eine Nachricht zu antworten: // notifyClients("Nachricht an alle Clients"); // client->text("Nachricht an den Client von dem die Nachricht kommt"); void handleWebSocketMessage(AsyncWebSocketClient * client, void *arg, uint8_t *data, size_t len) { Serial.println("handleWebSocketMessage();"); AwsFrameInfo *info = (AwsFrameInfo*)arg; if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) { // message = Inhalt der Nachricht vom Websocket-CLient String message = String((char*)data); // Serial.println(message); if(message.indexOf("connection:new") >= 0){ //Serial.println("Ein neuer Client hat sich verbunden"); notifyClients("user:new"); } } }
Dieses “Tutorial” dient in erster Linie als Template bzw. Snippet um mit den Websockets zu starten. Ich denke aber, dass ich bei Zeiten das ganze hier mal noch ausbauen werde. Ich möchte dieses Template hier nur mal festhalten, da es sonst wieder in den Tiefen meiner Festplatte verschwindet. :heh:

Natürlich können anstatt eines einfachen Button-Input auch beliebige andere Werte und Daten per Sockets übertragen werden. Zum Beispiel Temperaturwerte, oder es könnten auch Funktionen auf dem ESP in Echzeit ausgeführt werden, etc. etc. etc.
Javascript Snippet: Amazon ASIN aus Amazon Link erhalten
javascript snippet
Tipps, Tricks & Tutorials • • cooper

1

0
Stimmen

1
Beiträge

43
Aufrufe

Falls jemand eine Javascript-Funktion braucht, um die Amazon ASIN aus einem Link zu extrahieren… use:
function getProductAsin(url){ var regex = RegExp("https://www.amazon.de/(.*?)?(dp|gp/product)/(\\w+/)?(\\w{10})"); var m = url.match(regex); if (m) { return m[4]; } }
Funktioniert mit beiden Link-Formaten von Amazon
https://www.amazon.de/xxx-x-xxx-xx/dp/ASIN/
https://www.amazon.de/gp/product/ASIN/
var asin = getProductAsin("https://www.amazon.de/Ryzen7-Garantie-16-Thread-Prozessor-Geforce/dp/B087JWMGT7/"); console.log(asin);
Output:
$: B087JWMGT7
Javascript await wartet nicht auf return von axios-Request
asyc await javascript programmieren
Fragen, Hilfe & Probleme • • cooper

4

0
Stimmen

4
Beiträge

46
Aufrufe

Danke 🙂 funzt! 👌
const axios = require('axios'); (async () => { const topicData = await getTopicData(apiUrl); console.log(topicData); })(); async function getTopicData(apiUrl){ return axios.get(apiUrl, { headers: { 'Authorization': `Bearer ${baerertoken}` } }) .then((res) => { return res.data; }) .catch((error) => { console.error(error); }) }
ESP8266 Webserver echte HTML Dateien ausliefern - Tutorial
css esp8266 espasyncwebserver html javascript webserver
Tipps, Tricks & Tutorials • • cooper

1

1
Stimmen

1
Beiträge

1139
Aufrufe

Vorbereitungen ESPAsyncWebserver installieren makesmart HTML-Template herunterladen Die Dateien entpacken und in einen Order names data packen. Sieht dann ungefähr so aus: / ├── data │ ├── assets │ │ ├── css │ │ │ └── style.css │ │ ├── img │ │ └── js │ │ └── script.js │ └── index.html └── webserver_filesystem.ino Den Order Data via Arduino IDE hochladen
Werkzeuge -> ESP8266 Sketch Data Upload
Bildschirmfoto 2021-05-21 um 22.30.38.png
Note: Der Upload funktioniert nur, wenn der serielle Monitor geschlossen ist. :heh:
Der Uploader sollte bei neueren Version der Arduino IDE schon standardmäßig vorhanden sein, ansonsten muss die Erweiterung manuell installiert werden.
Der Programmcode
WLAN-Daten und Hostname bearbeiten:
// WLAN-Zugangsdaten const char* ssid = "SSID"; const char* password = "PSK"; // Hostname des ESPs -> http://spiffinger.local/ const char* espHostname = "spiffinger";
Sketch hochladen:
// // Einfacher Webserver der Dateien aus dem SPIFFS (Filesystem) ausliefert // CC by cooper @ makesmart.net // mehr Infos unter: https://my.makesmart.net/topic/206/ // void setupServerRoutes(); void setupFilePaths(); // WLAN #include <ESP8266WiFi.h> #include <ESP8266mDNS.h> // Webserver #include <ESPAsyncTCP.h> #include <ESPAsyncWebServer.h> // Filesystem #include <FS.h> // Standard HTTP-Port 80 AsyncWebServer server(80); // WLAN-Zugangsdaten const char* ssid = "SSID"; const char* password = "PSK"; // Hostname des ESPs -> http://spiffinger.local/ const char* espHostname = "spiffinger"; // Was passiert, wenn eine Seite nicht gefunden werden kann void notFound(AsyncWebServerRequest *request) { request->send(404, "text/html", "<center><h1>404 error - Seite nicht gefunden</h1></center>"); } void setup() { delay(500); Serial.begin(115200); Serial.println(); delay(500); // Dateisystem initialisieren if(SPIFFS.begin()){ Serial.println("Dateisystem: initialisiert"); }else{ Serial.println("Dateisystem: Fehler beim initialisieren"); } WiFi.mode(WIFI_STA); WiFi.begin(ssid, password); if (WiFi.waitForConnectResult() != WL_CONNECTED) { Serial.println("WLAN Verbindung fehlgeschlagen"); return; } Serial.print("Verbunden! IP-Adresse: "); Serial.println(WiFi.localIP()); // Starten des mDNS-Servers if (!MDNS.begin(espHostname)) { Serial.println("Fehler beim Staren des mDNS-Servers!"); } // Server Routen werden in einer eigenen Funktion definiert setupServerRoutes(); // Datei Routen werden in einer eigenen Funktion definiert setupFilePaths(); server.begin(); } void loop() { MDNS.update(); } void setupServerRoutes(){ // Als Document-Root wird der Ordner "data" // Alle Pfade müssen relativ vom Ordner "data" definiert werden // Datei index.html wird ausgeliefert server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/index.html"); }); server.onNotFound(notFound); } void setupFilePaths(){ // In der index.html Datei wird eine .js und eine .css Datei verlinkt // diese können ohne die folgenden Zeilen nicht gefunden werden // Der erste Pfad bezieht sich auf die .html-Datei // dort ist als Pfad zur CSS-Datei "assets/css/style.css" hinterlegt server.on("/assets/css/style.css", HTTP_GET, [](AsyncWebServerRequest *request){ // also soll auch die Datei aus dem SPIFFS dementsprechend ausgeliefert werden request->send(SPIFFS, "/assets/css/style.css", "text/css"); }); server.on("/assets/js/script.js", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/assets/js/script.js", "text/javascript"); }); // Gleiches kann man auch mit Bildern anderen Dateien machen } Webserver mit HTML-Dateien feiern
Ausgabe im seriellen Monitor beachten:
22:21:26.396 -> Dateisystem: initialisiert 22:21:27.490 -> Verbunden! IP-Adresse: 192.168.178.89
Webseite öffnen und freuen, dass die HTML-Datei aus dem Dateisystem angezeigt wird.

Bildschirmfoto 2021-05-21 um 22.28.09.png

Die HTML-, CSS- und Javascript-Dateien können jetzt mit einem beliebigem Editor bearbeitet und im Browser gedebugged / designed und anschließend wieder mit Punkt 4 hochgeladen werden. Der Sketch muss dafür nicht immer wieder neu hochgeladen werden. 👍 Freuen dass jetzt auch echte HTML-Dateien mit CSS und Javascript über den Webserver auf dem ESP angezeigt werden können. :programmingparrot:

Wird noch ausgearbeitet und dient aktuell als Entwurf :heh:

HTML Grundgerüst und Template - HTML, Bootstrap & jQuery für dein Projekt

Open Graph Support

Download

Die Ordnerstruktur

Ähnliche Themen

Der eigene Discord Bot mit discord.js bot discord discord.js javascript programmieren Tipps, Tricks & Tutorials • • cooper

Websockets auf dem ESP8266 nutzen - Template d1-mini esp8266 espasyncwebserver sockets webserver websockets Tipps, Tricks & Tutorials • • cooper

Javascript Snippet: Amazon ASIN aus Amazon Link erhalten javascript snippet Tipps, Tricks & Tutorials • • cooper

Javascript await wartet nicht auf return von axios-Request asyc await javascript programmieren Fragen, Hilfe & Probleme • • cooper

ESP8266 Webserver echte HTML Dateien ausliefern - Tutorial css esp8266 espasyncwebserver html javascript webserver Tipps, Tricks & Tutorials • • cooper

Der eigene Discord Bot mit discord.js
bot discord discord.js javascript programmieren
Tipps, Tricks & Tutorials • • cooper

Websockets auf dem ESP8266 nutzen - Template
d1-mini esp8266 espasyncwebserver sockets webserver websockets
Tipps, Tricks & Tutorials • • cooper

Javascript Snippet: Amazon ASIN aus Amazon Link erhalten
javascript snippet
Tipps, Tricks & Tutorials • • cooper

Javascript await wartet nicht auf return von axios-Request
asyc await javascript programmieren
Fragen, Hilfe & Probleme • • cooper

ESP8266 Webserver echte HTML Dateien ausliefern - Tutorial
css esp8266 espasyncwebserver html javascript webserver
Tipps, Tricks & Tutorials • • cooper