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. Commerz Finanz GmbH, München
  3. cyberTECHNOLOGIES über ACADEMIC WORK, München, Eching
  4. Daimler AG, Stuttgart-Möhringen


Anzeige
Top-Angebote
  1. (-63%) 21,99€
  2. (-67%) 16,49€
  3. (-58%) 24,99€

Folgen Sie uns
       


  1. Videoüberwachung

    Erster Feldversuch mit Gesichtserkennung geplant

  2. Optane Memory

    Intel lässt den Festplatten-Beschleuniger wieder aufleben

  3. Cryptowars

    "Kein geheimer Ort für Terroristen"

  4. Trello

    Atlassian setzt alles auf eine Karte

  5. Endless Runway

    Der Flughafen wird rund

  6. Square Enix

    Gladiolus startet ohne die anderen Jungs in Final Fantasy 15

  7. All Walls Must Fall

    Strategie und Zeitreisen in Berlin

  8. Breitbandmessung

    Nutzer erhalten meist nicht versprochene Datenrate

  9. Azure Service Fabric

    Microsoft legt wichtige Cloud-Werkzeuge offen

  10. Internet of Things

    Fehler in Geschirrspüler ermöglicht Zugriff auf Webserver



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Mobile-Games-Auslese: Würfelkrieger und Kartendiebe für mobile Spieler
Mobile-Games-Auslese
Würfelkrieger und Kartendiebe für mobile Spieler

Synlight: Wie der Wasserstoff aus dem Sonnenlicht kommen soll
Synlight
Wie der Wasserstoff aus dem Sonnenlicht kommen soll
  1. Energieversorgung Tesla nimmt eigenes Solarkraftwerk in Hawaii in Betrieb

Android O im Test: Oreo, Ovomaltine, Orange
Android O im Test
Oreo, Ovomaltine, Orange
  1. Android O Alte Crypto raus und neuer Datenschutz rein
  2. Developer Preview Google veröffentlicht erste Vorschau von Android O
  3. Android O Google will Android intelligenter machen

  1. Re: FTTH? Glasfaserkunden?

    sneaker | 22:29

  2. Re: Geile Idee

    Heartless | 22:28

  3. Re: Wie soll das bei dem aktuellen Ausbau auch...

    Andre_af | 22:28

  4. Re: Scheitert an einem Grund

    Prinzeumel | 22:26

  5. Re: Befehl an die Platte: Rotiere so schnell wie...

    SuriViruS | 22:25


  1. 18:55

  2. 18:18

  3. 18:08

  4. 17:48

  5. 17:23

  6. 17:07

  7. 16:20

  8. 16:04


  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