Websocket öffnen

Wir beginnen mit dem einfachsten Teil: der Webanwendung. Im HTML-Teil definieren wir lediglich einige Buttons für die Funktionen des Players wie Play, Stop etc., außerdem zwei Anzeigefelder für den Namen des aktuellen Titels und die Lautstärke:

Stellenmarkt
  1. Mitarbeiter:in Marketing Schwerpunkt Digital/Web (m/w/d)
    Hochschule RheinMain, Wiesbaden
  2. Wissenschaftlicher Mitarbeiter / Wissenschaftliche Mitarbeiterin (d/m/w) am European Campus
    THD - Technische Hochschule Deggendorf, Pfarrkirchen
Detailsuche

Der Javascript-Teil besteht ebenfalls aus erfreulich wenig Zeilen. Sobald die Webseite geladen ist, wird die start()-Funktion aufgerufen und darin mit new Websocket('ws://localhost:8001/') eine Websocket-Verbindung geöffnet. Die Protokoll-Angabe ws steht kurz für Websocket, ansonsten entspricht der Parameter einer ganz normalen URL. Das Websocket-Objekt wird von jedem Browser bereitgestellt, der den Websocket-Standard gemäß dem W3C implementiert.

  1. function start() {
  2.  
  3. con = new WebSocket('ws://localhost:8001/');
  4.  
  5. con.onmessage = function(msg) {
  6.  
  7. var message = {track:'',volume:''};
  8.  
  9. try {
  10. message = JSON.parse(msg.data);
  11. } catch(e) {
  12. console.log(e);
  13. return;
  14. }
  15.  
  16. document.getElementById('track').innerHTML = message.track;
  17. document.getElementById('volume').innerHTML = message.volume;
  18. }

Dass wir die Angabe hart codieren, erfolgt hier wegen der Übersichtlichkeit, in der Praxis sollte die URL vom Benutzer gesetzt werden können. Dann läuft die Webanwendung auch auf anderen Rechnern, wenn sie übers Netzwerk vom Raspberry geladen wird.

Golem Akademie
  1. Einführung in die Programmierung mit Rust: virtueller Fünf-Halbtage-Workshop
    21.–25. März 2022, Virtuell
  2. Einführung in Unity: virtueller Ein-Tages-Workshop
    17. Februar 2022, Virtuell
Weitere IT-Trainings

Als Nächstes wird ein Event-Handler registriert: onmessage. Die zugewiesene Funktion wird aufgerufen, wenn der Server Daten zum Client schickt, hier dem Browser. Diese Funktion erhält als Parameter die Daten, die der Server geschickt hat.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed
 Ein ferngesteuerter MusikplayerAnzeigen und Senden 
  1.  
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. 11
  13. 12
  14.  


Anonymer Nutzer 28. Jul 2014

Ich würde sagen hier könnte man eleganter und auch verhältnismäßig preiswert mit Zigbee...

savejeff 24. Jul 2014

perfekt! die Artikel sind echt zeitlos. ich werde noch ein paar Artikel nachholen.

holminger 24. Jul 2014

Meine RasPis dienen einmal als AirPrint-Server für einen 15 Jahre alten Kyocera...

currock63 23. Jul 2014

die guten alten Zeiten der c't, als es noch in fast jeder Ausgabe etwas zum selber...



Aktuell auf der Startseite von Golem.de
Sam Zeloof
Student baut Chip mit 1.200 Transistoren

In seiner Garage hat Sam Zeloof den Z2 fertiggestellt und merkt scherzhaft an, Moore's Law schneller umgesetzt zu haben als Intel selbst.

Sam Zeloof: Student baut Chip mit 1.200 Transistoren
Artikel
  1. Xbox Cloud Gaming: Wenn ich groß bin, möchte ich gerne Netflix werden
    Xbox Cloud Gaming
    Wenn ich groß bin, möchte ich gerne Netflix werden

    Call of Duty, Fallout oder Halo: Neue Spiele bequem am Business-Laptop via Stream zocken, klingt zu gut, um wahr zu sein. Ist auch nicht wahr.
    Ein Erfahrungsbericht von Benjamin Sterbenz

  2. IBM: Watson Health anteilig für 1 Mrd. US-Dollar verkauft
    IBM
    Watson Health anteilig für 1 Mrd. US-Dollar verkauft

    Mit Francisco Partners greift eine große Investmentgruppe zu, das Geschäft mit Watson Health soll laut IBM darunter aber nicht leiden.

  3. Lego Star Wars UCS AT-AT aufgebaut: Das ist kein Mond, das ist ein Lego-Modell
    Lego Star Wars UCS AT-AT aufgebaut
    "Das ist kein Mond, das ist ein Lego-Modell"

    Ganz wie der Imperator es wünscht: Der Lego UCS AT-AT ist riesig und imposant - und eines der besten Star-Wars-Modelle aus Klemmbausteinen.
    Ein Praxistest von Oliver Nickel

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • MediaMarkt & Saturn: Heute alle Produkte versandkostenfrei • Corsair Vengeance RGB RT 16-GB-Kit DDR4-4000 114,90€ • Alternate (u.a. DeepCool AS500 Plus 61,89€) • Acer XV282K UHD/144 Hz 724,61€ • MindStar (u.a. be quiet! Pure Power 11 CM 600W 59€) • Sony-TVs heute im Angebot [Werbung]
    •  /