Javascript eingabe von PC1 soll Ausgabe auf PC2 ändern

SirLoading · 22. März 2024

Hallo zusammen,
ich bin in JS nicht ganz so fit und habe da eine Frage.

Ich mache Livestreams und möchte mir einen Counterbauen, dieser soll vom Chat (Moderator) beeinflusst werden und im Stream angezeigt werden.

Wie setze ich das am besten um?
Die Ausgabe ist permanent aktiv / geladen.

Nun sagt der Moderator über einen Chat cmd z.B. Failcounter soll erhöht werden, dieser Befehl ruft eine Url auf.

Muss ich hier mit einer DB arbeiten?
Also Url erhöht Wert X um 1 und das JS in der Anzeige ruft alle Zeit Y Zeit dann den Wert in der DB ab und aktualisiert dann?

Gleiches sollte auch möglich sein, um einen Sound abzuspielen, oder?

Oder gibt es eine Möglichkeit ohne DB, was On the Fly geht?

Vielen Dank
Grüße

Lawnmower · 22. März 2024

Datenbank oder ggf reicht auch JSON Datei die vom Moderator geschrieben wird und die von den Clients dann per Ajax Abfrage im Hintergrund abrufen - so sollte das schlank + schnell bleiben und die Daten kämen schon strukturiert daher.

0x8100 · 22. März 2024

Python:

import flask


class Counter(object):

    def __init__(self):
        self.counter = 0

    def run(self):

        app = flask.Flask(__name__)

        @app.route("/", methods=["GET"])
        def index():
            html = """
            <!DOCTYPE html>
            <html>
            <head>
            </head>
            <body>
                <div id="counter"></div>
                
                <script>
                    var interval = 1000;
                    
                    function get_counter() {
                        const xhttp = new XMLHttpRequest();
                        xhttp.onload = function() {
                            document.getElementById("counter").innerHTML = this.responseText;
                        }
                        xhttp.open("GET", "counter", true);
                        xhttp.send();
                        
                        setTimeout(get_counter, interval);
                    };
                
                    get_counter();
                </script>
                
            </body>
            </html>
            """

            return html

        @app.route("/counter", methods=["GET", "POST"])
        def counter():

            match flask.request.method:
                case "GET":
                    return flask.jsonify(self.counter)
                case "POST":
                    self.counter += 1
                    return ""

        app.run(host='0.0.0.0', port=8080)


if __name__ == "__main__":
    Counter().run()

im browser http://127.0.0.1:8080 aufrufen (oder die ip des rechners) und nebenbei z.b. mit curl den counter erhöhen:

Code:

curl -X POST http://127.0.0.1:8080/counter

SirLoading · 22. März 2024

Vielen Dank für die schnellen Antworten!

Python wäre auch eine Idee gewesen, hier muss ich dann erst schauen wo ich das laufen lasse.
All-Inkl macht auf den Webhosts kein Python.

Wobei, mein Streamingserver (im WEB) via Nginx RTMP meine Streams verteilt, da müsste das dann auch gehen.

Könnte ich in das Script dann auch verschiedene Counter einbauen oder lieber das Script mehrfach ausführen?

Der ChatBot den ich nutze, der kann kein "curl", da kann ich nur eine Webseite aufrufen. (.html)
curl müsste aber via PHP gehen oder?
Also aufruf.php und dann dort den curl Befehl ausführen?

0x8100 · 22. März 2024

ich würde das script so erweitern, das es mehrere counter verwalten kann - da muss man nicht mehrere instanzen von laufen lassen. wenn der bot webseiten nur aufrufen kann (ohne die methode anzugeben), dann wäre das nur ein "get" und man müsste eine weitere route dafür einbauen:

Python:

import flask


class Counter(object):

    def __init__(self):
        self.counters = {}

    def run(self):

        app = flask.Flask(__name__)

        @app.route("/<counter_id>", methods=["GET"])
        def index(counter_id=0):
            html = """
            <!DOCTYPE html>
            <html>
            <head>
            </head>
            <body>
                <div id="counter"></div>
            
                <script>
                    var interval = 1000;
                
                    const queryString = window.location.search;
                    const urlParams = new URLSearchParams(queryString);
                
                    function get_counter() {
                        const xhttp = new XMLHttpRequest();
                        xhttp.onload = function() {
                            document.getElementById("counter").innerHTML = this.responseText;
                        }
                        xhttp.open("GET", "get-counter/%s", true);
                        xhttp.send();
                    
                        setTimeout(get_counter, interval);
                    };
            
                    get_counter();
                </script>
            
            </body>
            </html>
            """ % counter_id

            return html

        @app.route("/get-counter/<counter_id>", methods=["GET"])
        def get_counter(counter_id):
            return flask.jsonify(self.counters.get(counter_id, 0))

        @app.route("/incr-counter/<counter_id>", methods=["GET"])
        def incr_counter(counter_id):
            if counter_id not in self.counters:
                self.counters[counter_id] = 0

            self.counters[counter_id] += 1

            return ""

        app.run(host='0.0.0.0', port=8080)


if __name__ == "__main__":
    Counter().run()

jetzt hat jeder counter eine id, die im browser z.b. mit http://127.0.0.1:8080/123 aufgerufen werden kann. auf der anderen seite kann man jetzt mit einem simplen aufruf von http://127.0.0.1:8080/incr-counter/123 jetzt den counter erhöhen (kann man jetzt auch im browser benutzen und z.b. ein paar mal f5 drücken). ist ein counter mit einer bestimmten id noch nicht erhöht worden, kommt einfach 0 zurück. das erhöhen sorgt dafür, dass ein neuer counter angelegt wird.

edit: dieser ansatz legt neue counter mit id/namen an, die vom user und damit von aussen kommen. ein pöser purche könnte damit soviele counter anlegen bis der ram voll ist. also entweder baut man noch checks ein oder man hat vordefinierte counter und erstellt keine dynamisch. kommt darauf an, in welcher umgebung das laufen soll und wer zugriff hat.

SirLoading · 26. März 2024

Danke, ich teste das mal am Wochenende

sandreas · 28. März 2024

Guck dir mal long polling an:
https://github.com/panique/php-long-polling

Websockets unterstützt all-inkl vermutlich auch nicht.

SirLoading · 1. April 2024

sandreas schrieb:
Websockets unterstützt all-inkl vermutlich auch nicht.

Das stimmt so.
Nur habe ich noch einen ROOT Server für Multistreaming, da läuft es aber auch nicht.

Suche

Javascript eingabe von PC1 soll Ausgabe auf PC2 ändern

SirLoading

Lt. Junior Grade

Lawnmower

Maître de cuisine Pro

0x8100

Admiral

SirLoading

Lt. Junior Grade

0x8100

Admiral

SirLoading

Lt. Junior Grade

sandreas

Lieutenant

SirLoading

Lt. Junior Grade

Ähnliche Themen