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. ROMA KG, Burgau
  2. flexis AG, Stuttgart
  3. GIGATRONIK Stuttgart GmbH, Stuttgart
  4. Stadtwerke München GmbH, München


Anzeige
Blu-ray-Angebote
  1. (u. a. Hobbit Trilogie Blu-ray 44,97€, Batman Dark Knight Trilogy Blu-ray 17,99€)
  2. 6,99€
  3. 2,99€ (ohne Prime bzw. unter 29€ Einkauf zzgl. 3€ Versand)

Folgen Sie uns
       


  1. Nokia 3, 5 und 6

    HMD Global bringt drei Nokia-Smartphones mit Android

  2. Moto G5 und Moto G5 Plus im Hands on

    Lenovos kompakte Mittelklasse ist zurück

  3. Handy-Klassiker

    HMD Global bringt das Nokia 3310 zurück

  4. Galaxy Tab S3 im Hands on

    Samsung präsentiert Oberklasse-Tablet mit Eingabestift

  5. Galaxy Book im Hands on

    Samsung bringt neuen 2-in-1-Computer

  6. Mobilfunk

    "5G muss weit mehr als LTE bieten"

  7. UHS-III

    Neuer (Micro-)SD-Karten-Standard schafft über 600 MByte/s

  8. Watch 2 im Hands on

    Huaweis neue Smartwatch soll bis zu 21 Tage lang durchhalten

  9. LG G6 im Hands on

    Schlankes Smartphone hat zwei Kameralinsen

  10. P10 und P10 Plus im Hands on

    Huaweis neues P10 kostet 600 Euro



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Bodyhacking: Ich, einfach unverbesserlich
Bodyhacking
Ich, einfach unverbesserlich

Intel C2000: Weiter Unklarheit zur Häufung von NAS-Ausfällen
Intel C2000
Weiter Unklarheit zur Häufung von NAS-Ausfällen
  1. Super Bowl Lady Gaga singt unter einer Flagge aus Drohnen
  2. Lake Crest Intels Terminator-Chip mit Terabyte-Bandbreite
  3. Compute Card Intel plant Rechnermodul mit USB Type C

XPS 13 (9360) im Test: Wieder ein tolles Ultrabook von Dell
XPS 13 (9360) im Test
Wieder ein tolles Ultrabook von Dell
  1. Die Woche im Video Die Selbstzerstörungssequenz ist aktiviert
  2. XPS 13 Convertible im Hands on Dells 2-in-1 ist kompakter und kaum langsamer

  1. Re: Gedrosselte Geschwindigkeit anpassen?

    Reci | 22:28

  2. Re: Was ist denn das bitte?

    User_x | 22:23

  3. Re: Datenrate und Latenz sind für den Nutzer eher...

    ChMu | 22:22

  4. Festival Handy

    ArcherV | 22:22

  5. Re: Anscheinend gibt es keine gesetzlichen Vorgaben.

    plutoniumsulfat | 22:19


  1. 21:13

  2. 20:32

  3. 20:15

  4. 19:00

  5. 19:00

  6. 18:45

  7. 18:10

  8. 17:48


  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