Warum funktioniert Flask und Websockets nicht?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

... // FLASK
    var socket = io();

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = color;
    });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Python, Frontend, Python 3, Pycharm, Flask
Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Frontend, Python 3, Flask
Warum funktioniert mein Websockets- Server nicht?

Hallo,

ich möchte mithilfe von Websockets über JS auf Python zugreifen, das ist mein Code:

Python:

def send_message_to_browser(message):
    url = "http://localhost:8000/?wake_word=luna"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Nachricht an den Browser gesendet:", message)
        else:
            print("Fehler beim Senden der Nachricht an den Browser")
    except requests.RequestException as e:
        print("Fehler beim Senden der Nachricht an den Browser:", e)

JavaScript:

// WEBSOCKET
var socket = new WebSocket('ws://localhost:8000/?wake_word=luna');

// Debugging-Ausgabe zur Überprüfung der Verbindung
console.log("WebSocket wird hergestellt...");

// Ereignisbehandlungsfunktion für Verbindungsherstellung
socket.onopen = function(event) {
    // Debugging-Ausgabe zur Bestätigung der erfolgreichen Verbindung
    console.log("WebSocket-Verbindung hergestellt.");
};

// Ereignisbehandlungsfunktion für Nachrichtenempfang
socket.onmessage = function(event) {
    // Nachricht vom Server erhalten
    var message = event.data;

    // Debugging-Ausgabe
    console.log("Nachricht empfangen:", message);

    // Überprüfen, ob die empfangene Nachricht "luna" ist
    if (message === "luna") {
        // Ändern der Hintergrundfarbe der Div mit der ID "luna_wake_word" auf Rot
        $('#luna_wake_word').css("background-color", "red");
    }
};

// Fehlerbehandlungsfunktion für WebSocket-Verbindung
socket.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// Schließen der WebSocket-Verbindung
function closeWebSocket() {
    socket.close();
}

Doch immer, wenn ich das Programm starte und in die Konsole schaue kommt dieser Fehler:

WebSocket wird hergestellt...

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929 WebSocket connection to 'ws://localhost:8000/?wake_word=luna' failed: 

(anonym) @ index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1957 WebSocket Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Kann mir jemand helfen?

Freundliche Grüsse

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Python 3
Warum wird meine Verbindung abgelehnt (Domain)?
Homepage, Online-Shop, HTML, Webseite, Domain, Webentwicklung, Webhosting, Shopify, shopify-store
Welches CMS für Online-Shop?

Ich bin Fullstack-Programmierer und möchte einen Online-Shop für einen Verwandten bauen.

Er möchte darin eine Handvoll Artikel zum bestmöglichen Preis verkaufen. Um Lagerung und Versand der Artikel kümmert er sich. Er verwendet aufgrund der geringen Artikelzahl auch keine fertige Warenwirtschaft sondern macht die Verwaltung manuell per Excel.

Das Bezahlen der Waren soll rein über PayPal laufen. (Kein Stripe, weil kostet mehr). PayPal zu integrieren sollte also möglichst einfach gehen.

Außerdem sollen sich Kunden einen Kunden-Account machen können (natürlich mit automatischer Anmeldung via Token usw), damit ihre Daten beim nächsten Checkout automatisch vor-ausgefüllt werden, und um ihre bisherigen Käufe in einer Order-History einzusehen. Da das Authentication-Zeug kein Spaß zu implementieren ist sollte es schon irgendwie vom CMS gegeben sein.

Mein Verwandter will außerdem eine kleine Admin-Seite haben auf der er die Preise und Mengen seiner Artikel verwalten kann und neue Artikel hochladen kann. Außerdem will er sehen können, was er wann an wen verkauft hat (in Zukunft evtl. auch mit Excel-Export, Graphen zur Analyse, usw.). Seitenlayout usw. soll er auf seiner Admin-Seite aber nicht ändern können, um das soll ausschließlich ich mich kümmern.

Das CMS und die zugehörige Datenbank sollen auf einem vServer komplett selbst gehostet werden können (um Geld zu sparen). Fertiglösungen wie Shopify, Squarespace, Sanity, Webflow, usw. fallen also raus.

Die Website soll möglichst performant sein und maximale SEO-Möglichkeiten bieten.

Das Design des Frontends soll komplett individuell von mir gestaltet werden können. Ich möchte dafür TailwindCSS oder Bootstrap verwenden.

Meine Überlegungen:

- Wordpress + WooCommerce (sehr altbacken und ich hasse PHP :D)
- Headless Wordpress + Svelte / Astro (Vorteile wie bessere Performance & komplett separate Admin-Seite?)
- Magento + Next.js + React
- Payload + Next.js + React
- Strapi + Svelte / Astro

Was würdet ihr vorschlagen?

Homepage, Online-Shop, HTML, Webseite, CSS, WordPress, JavaScript, HTML5, CMS, Datenbank, PHP, Programmiersprache, Webdesign, Webentwicklung, Webserver, React
Phishing Webseite oder nicht?

Hallo,

ich habe vorhin auf der frontpage wenn ich den browser öffne bei MSN-News einen Artikel über Dieter angeklickt. Die URL sah aber verdächtig aus und auf Google finde ich zum besagten Thema auch nicht. Laut Virustotal ist da auch nichts verdächtiges aber ich mache mir trotzdem sorgen, weil dazu nichts berichtet wird und auf Google zur webseite nichts zu finden ist. Auf der Webseite selbst steht zwar dass es von der Tagesschau ist aber in der Url steht ein anderer Name. Handelt es sich um diesen Artikel bzw um diesen Link um eine Phishingwebseite?

https://rumorsabouttill.org/land/?offer=QuantumNeura%20AI&cep=ELW-tBnBP_ETQYJJRd7ClkSPufjYRzZSJYoEXZQl6iUiRiowUVewFICBqpTo1sb4n9IoVd_T9Z49doJsnjVsSMcfJHRyPF71pJX0BC9oUXR44FY0kaG-Pb070f7dh2wlF0ZVidE3gi5y3qyz_FoQXLp5fnUhm-VQuRNK44YWIGnSoPo8qAy0J_1Tx9v0sV2BFTi3p5RTshM-bKswZbI60Ff1OEgvDZOT4ffzmTXapk-dd94egmQ5SOgo8R24BsBzHuZEtA8aXt_TeYAYoytDZYMbAHOyCUpsxhSEmdfU88raOfskMO0_1x1bdseBI1m1UYFbcXKNtlR9tCgu-kzL8doHC23iZ19lTt4Dc3o11bh56apR17rtyA7tYfPkRvJepBucCgOAQVkiung7VLBvluMujvzTkVbcMkSDs-5kmug3F1nNW3atY9OkTU-KIBF13EqLHLpbZGWVtTt29aa_gCxk8lDH9-qMgAlqOXtlBcI-N7mMMAUapyPhmnlNyl7ZxEZjmGq1r6JHbtU2vrOGmA&lptoken=17d0126e063f402171cb&eng_click=07f0b6958643412fb7ad10aad0d779ce&eng_creative_id=1024109949&eng_post_id=1024109949&eng_source=216404&eng_subid=null&eng_website_id=216404&eng_widget_id=177982

Internet, Microsoft, MSN, App, Virus, IT, Webseite, Hacker, Hacking, Informatik, Malware, Phishing, Trojaner
Gibt es ein ähnliches (mobile) Spiel wie das was ich jetzt beschreibe?

Hi,

Ich hab eine Idee für eine richtig coole App und frag mich gibt es sowas vielleicht schon.

Also eine App wo man sich um ein Kind kümmern muss aber gar nicht wie so simples Tamagotchi sondern man sucht sich zuerst aus ob Mädchen oder junge und alter und kann dann mit ihm reden, also wie mit ChatGPT einer KI.

Dann muss man zb mit ihr zur schule, mit ihr Hausaufgaben machen usw alles was in echt.

Und man kann halt auch mit ihm reden mit KI stimme wie wenn man bei ChatGPT Sprachchat macht und man muss halt sie Erziehen dass sie ein liebes kind wird und kein freches balg und wenn man es nicht macht wird sie/er schlechte noten bekommen und man muss zu Elterngespräch in schule.

Oder wenn in RL Weihnachten ist dann auch bei dem KI kind, man macht ihm Geschenke und sie/er singt Weihnachtslieder und man spielt mit dem kind eben alles wie in echt und zieht es halt groß bloß dass die zeit ein bisschen schneller vorbei geht vielleicht 1 Monat = 1Jahr oder so.

Zb mit Einschulung, Grundschule, dann später Realschule oder so, Ausbildung oder Studium, sie oder er wird 18 und das game endet wenn er oder sie auszieht was ca. Ein jahr in RL dauern könnte und mit Geburtstag feiern, mit ihr/ihm Fernsehen, kuscheln und gute Nacht Geschichte erzählen usw.

Das wäre voll schön iwie.

Spiele, App, Kinder, Sims, Webseite, Gaming, Gamer, Handyspiele, künstliche Intelligenz, Python, Simulation, Simulator, Tamagotchi, Simulations Spiel, ChatGPT

Meistgelesene Fragen zum Thema Webseite