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. TenneT TSO GmbH, Lehrte
  2. Hays AG, Raum Frankfurt
  3. über Hanseatisches Personalkontor Bremen, Stuttgart
  4. OPERATIONAL SERVICES GMBH & CO. KG, Berlin, Dresden, Frankfurt am Main, München


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

Folgen Sie uns
       


  1. News

    Facebook testet Abos für Nachrichten-Artikel

  2. Elon Musk

    Baut The Boring Company den Hyperloop?

  3. Mobilfunkausrüster

    Ericsson macht hohen Verlust

  4. Luminar

    Lightroom-Konkurrenz bringt sich in Stellung

  5. Kleinrechner

    Tim Cook verspricht Update für Mac Mini

  6. Elektrorennwagen

    VW will elektrisch auf den Pikes Peak

  7. Messung

    Über 23.000 Funklöcher in Brandenburg

  8. Star Wars Battlefront 2 Angespielt

    Sternenkrieger-Kampagne rund um den Todesstern

  9. Nach Wahlniederlage

    Netzpolitiker Klingbeil soll SPD-Generalsekrektär werden

  10. Adasky

    Autonome Autos sollen im Infrarot-Bereich sehen



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Dokumentarfilm Pre-Crime: Wenn Computer Verbrechen vorhersagen
Dokumentarfilm Pre-Crime
Wenn Computer Verbrechen vorhersagen

Programmiersprache für Android: Kotlin ist auch nur eine Insel
Programmiersprache für Android
Kotlin ist auch nur eine Insel
  1. Programmiersprache Fetlang liest sich "wie schlechte Erotikliteratur"
  2. CMS Drupal 8.4 stabilisiert Module
  3. Vespa Yahoos Big-Data-Engine wird Open-Source-Projekt

Core i7-8700K und Core i5-8400 im Test: Ein Sechser von Intel
Core i7-8700K und Core i5-8400 im Test
Ein Sechser von Intel
  1. Core i7-8700K Ultra Edition Overclocking-CPU mit Silber-IHS und Flüssigmetall
  2. Intel Coffee Lake Von Boost-Betteln und Turbo-Tricks
  3. Coffee Lake Intel verkauft sechs Kerne für unter 200 Euro

  1. Korrektur Renndaten

    hb1972 | 10:57

  2. Re: Wir haben hier so ein Ding in der Firma stehen...

    quineloe | 10:57

  3. Re: Singleplayer Teil ist ja schön und gut, aber...

    nachgefragt | 10:55

  4. Re: Alte Hardware

    quineloe | 10:54

  5. ACDsee Ultimate

    SirFartALot | 10:54


  1. 10:28

  2. 10:06

  3. 09:43

  4. 07:28

  5. 07:13

  6. 18:37

  7. 18:18

  8. 18:03


  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