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. THOMAS SABO GmbH & Co. KG, Lauf
  2. AKDB Anstalt für kommunale Datenverarbeitung in Bayern, München
  3. Murrplastik Verwaltungs- und Beteiligungs GmbH, Oppenweiler bei Stuttgart
  4. Dirk Rossmann GmbH, Burgwedel


Anzeige
Blu-ray-Angebote
  1. (u. a. Hobbit Trilogie Blu-ray 43,89€ und Batman Dark Knight Trilogy Blu-ray 17,99€)
  2. 74,99€ (Vorbesteller-Preisgarantie)

Folgen Sie uns
       


  1. Firefox

    Mozilla verärgert Nutzer mit ungefragter Addon-Installation

  2. Knights Mill

    Intel hat drei Xeon Phi für Deep Learning

  3. Windows 10

    Kritische Lücke in vorinstalliertem Passwortmanager

  4. Kaufberatung

    Die richtige CPU und Grafikkarte

  5. Bandai Namco

    Black Clover und andere Anime-Neuheiten

  6. Panono

    Crowdfunder können Kamera zu Produktionskosten kaufen

  7. Elon Musk

    The Boring Company baut einen Tunnel in Maryland

  8. Chinesischer Anbieter

    NIO will Elektro-SUV mit Wechsel-Akku anbieten

  9. Chipkarten-Hersteller

    Thales übernimmt Gemalto

  10. Porsche

    Betriebsratschef will E-Mails in der Freizeit löschen lassen



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Star Wars - Die letzten Jedi: Viel Luke und zu viel Unfug
Star Wars - Die letzten Jedi
Viel Luke und zu viel Unfug
  1. Star Wars Jedi Challenges im Test Lichtschwertwirbeln im Wohnzimmer
  2. Star Wars Neue Trilogie ohne Skywalker und Darth Vader angekündigt
  3. Electronic Arts Entwicklungsneustart für Star Wars Ragtag

360-Grad-Kameras im Vergleich: Alles so schön rund hier
360-Grad-Kameras im Vergleich
Alles so schön rund hier
  1. USB-C DxO zeigt Ansteckkamera für Android-Smartphones
  2. G1 X Mark III Erste Kompaktkamera mit APS-C-Sensor von Canon
  3. Ozo Nokia hat keine Lust mehr auf VR-Hardware

E-Ticket Deutschland bei der BVG: Bewegungspunkt am Straßenstrich
E-Ticket Deutschland bei der BVG
Bewegungspunkt am Straßenstrich
  1. Handy-Ticket in Berlin BVG will Check-in/Be-out-System in Bussen testen
  2. VBB Schwarzfahrer trotz Handy-Ticket

  1. Re: Derzeit sinnvollste Bestückung?

    Mithrandir | 14:10

  2. Re: Witzlos

    sTy2k | 14:10

  3. Wollt ihr jetzt Netzneutralität oder nicht?

    /mecki78 | 14:10

  4. Re: Crapware als Finanzierungsmodell

    Arsenal | 14:09

  5. Re: Nein liebe Telekom

    atikalz | 14:08


  1. 13:35

  2. 12:49

  3. 12:32

  4. 12:00

  5. 11:57

  6. 11:26

  7. 11:00

  8. 10:45


  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