Abo
  • Services:
Anzeige
Raspberry Pi mit Touchscreen-Display und Bluetooth-Dongle
Raspberry Pi mit Touchscreen-Display und Bluetooth-Dongle (Bild: Fabian Hamacher/Golem.de)

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.

Anzeige

  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.

 Ein ferngesteuerter MusikplayerAnzeigen und Senden 

eye home zur Startseite
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...



Anzeige

Stellenmarkt
  1. Medion AG, Essen
  2. Bilfinger SE, Mannheim
  3. eQ-3 Entwicklung GmbH, Leer
  4. Rechenzentrum Region Stuttgart GmbH, Stuttgart


Anzeige
Spiele-Angebote
  1. (-20%) 39,99€
  2. 28,99€
  3. (-17%) 49,99€

Folgen Sie uns
       


  1. SD

    Analogabschaltung kommt auch bei Satellitenfernsehen

  2. ZBook G4

    HP stellt Grafiker-Workstations für unterwegs vor

  3. Messenger Lite

    Facebook bringt abgespeckte Messenger-App nach Deutschland

  4. Intel

    Edison-Module und Arduino-Board werden eingestellt

  5. Linux-Distribution

    Debian 9 verzichtet auf Secure-Boot-Unterstützung

  6. Markenrecht

    Apple verhindert Birnen-Logo

  7. Syberia 3 im Test

    Kate Walker erlebt den Absturz

  8. Space Launch System

    Nasa muss Erstflug der neuen Trägerrakete erneut verschieben

  9. CEO-Fraud

    Google und Facebook um 100 Millionen US-Dollar betrogen

  10. TKG-Änderungsgesetz

    Regierung will keinen Schutz vor Low-Speed und Abzocke



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Sonos Playbase vs. Raumfeld Sounddeck: Wuchtiger Wumms im Wohnzimmer
Sonos Playbase vs. Raumfeld Sounddeck
Wuchtiger Wumms im Wohnzimmer
  1. Playbase im Hands on Sonos bringt kraftvolles Lautsprechersystem fürs Heimkino

Elektromobilität: Wie kommt der Strom in die Tiefgarage?
Elektromobilität
Wie kommt der Strom in die Tiefgarage?
  1. e.GO Life Elektroauto aus Deutschland für 15.900 Euro
  2. Elektroauto VW testet E-Trucks
  3. Elektroauto Opel Ampera-E kostet inklusive Prämie ab 34.950 Euro

In eigener Sache: Die Quanten kommen!
In eigener Sache
Die Quanten kommen!
  1. In eigener Sache Golem.de führt kostenpflichtige Links ein
  2. In eigener Sache Golem.de sucht Marketing Manager (w/m)
  3. In eigener Sache Golem.de geht auf Jobmessen

  1. Re: Och man...

    Majin23 | 15:54

  2. Wenn der Kunde Äpfel und Birnen nicht...

    Salzbretzel | 15:53

  3. Re: Apfel mit Birne verglichen ;) [kwT]

    Neuro-Chef | 15:52

  4. Re: Wartungsmodems

    sneaker | 15:52

  5. Re: Das ist Kundenschutz

    neocron | 15:52


  1. 16:10

  2. 16:00

  3. 15:26

  4. 15:18

  5. 14:51

  6. 14:19

  7. 14:00

  8. 13:24


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel