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:

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.

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
Super Nintendo
Fan bringt verbessertes Zelda 3 für Windows, MacOS und Linux

Aus 80.000 Zeilen C-Code besteht die per Reverse Engineering generierte Version von Zelda 3. Die bringt einige Verbesserungen und 16:9.

Super Nintendo: Fan bringt verbessertes Zelda 3 für Windows, MacOS und Linux
Artikel
  1. Claudia Plattner: IT-Expertin wird neue BSI-Chefin
    Claudia Plattner  
    IT-Expertin wird neue BSI-Chefin

    Die neue Chefin des BSI hat mehr technische Expertise als ihr geschasster Vorgänger. Zuletzt arbeitete Claudia Plattner bei der EZB.

  2. Verbrennerverbot: Umwelthilfe scheitert mit Klimaklage gegen BMW
    Verbrennerverbot
    Umwelthilfe scheitert mit Klimaklage gegen BMW

    Verbände wie die Deutsche Umwelthilfe oder Greenpeace wollen ein Verbrennerverbot ab 2030 gerichtlich durchsetzen. Ein weiteres Urteil weist dies nun zurück.

  3. Linux: Alte Computer zu neuem Leben erwecken
    Linux
    Alte Computer zu neuem Leben erwecken

    Computer sind schon nach wenigen Jahren Nutzungsdauer veraltet. Doch mit den schlanken Linux-Distributionen AntiX-Linux, Q4OS oder Simply Linux erleben ältere PC-Systeme einen zweiten Frühling.
    Von Erik Bärwaldt

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 • DAMN-Deals: AMD CPUs zu Tiefstpreisen (u. a. R7 5800X3D 324€)• MindStar: Zotac RTX 4070 Ti 949€, XFX RX 6800 519€ • WSV-Finale bei MediaMarkt (u. a. Samsung 980 Pro 2 TB Heatsink 199,99€) • RAM im Preisrutsch • Powercolor RX 7900 XTX 1.195€ • PCGH Cyber Week nur noch kurze Zeit [Werbung]
    •  /