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. Ratbacher GmbH, Raum Darmstadt
  2. Jobware Personalberatung, Raum Bielefeld
  3. Fresenius Kabi Deutschland GmbH, Bad Homburg
  4. NKM Noell Special Cranes GmbH, Würzburg, Veitshöchheim


Anzeige
Hardware-Angebote
  1. 56,08€ (Vergleichspreis ab ca. 65€)
  2. 18,99€ statt 39,99€

Folgen Sie uns
       


  1. Gruppenchat

    Skype for Business wird durch Microsoft Teams ersetzt

  2. Teardown

    iFixit findet größeren Akku in Apple Watch Series 3

  3. Coffee Lake

    Intel verkauft sechs Kerne für unter 200 Euro

  4. MacOS 10.13

    Apple gibt High Sierra frei

  5. WatchOS 4.0 im Test

    Apples praktische Taschenlampe mit autarkem Musikplayer

  6. Werksreset

    Unitymedia stellt Senderbelegung heute in Hessen um

  7. Aero 15 X

    Mehr Frames mit der GTX 1070 im neuen Gigabyte-Laptop

  8. Review Bombing

    Valve verbessert Transparenz bei Nutzerbewertungen auf Steam

  9. Big Four

    Kundendaten von Deloitte offenbar gehackt

  10. U2F

    Yubico bringt winzigen Yubikey für USB-C



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Bundestagswahl 2017: Viagra, Datenbankpasswörter und uralte Sicherheitslücken
Bundestagswahl 2017
Viagra, Datenbankpasswörter und uralte Sicherheitslücken
  1. Bundestagswahl 2017 Union und SPD verlieren, Jamaika-Koalition rückt näher
  2. Zitis Wer Sicherheitslücken findet, darf sie behalten
  3. Merkel im Bundestag "Wir wollen nicht im Technikmuseum enden"

Olympus Tough TG5 vs. Nikon Coolpix W300: Die Schlechtwetter-Kameras
Olympus Tough TG5 vs. Nikon Coolpix W300
Die Schlechtwetter-Kameras
  1. iZugar 220-Grad Fisheye-Objektiv für Micro Four Thirds vorgestellt
  2. Mobilestudio Pro 16 im Test Wacom nennt 2,2-Kilogramm-Grafiktablet "mobil"
  3. HP Z8 Workstation Mit 3 TByte RAM und 56 CPU-Kernen komplexe Bilder rendern

VR: Was HTC, Microsoft und Oculus mit Autos zu tun haben
VR
Was HTC, Microsoft und Oculus mit Autos zu tun haben
  1. Zukunft des Autos "Unsere Elektrofahrzeuge sollen typische Porsche sein"
  2. Concept EQA Mercedes elektrifiziert die Kompaktklasse
  3. GLC F-Cell Mercedes stellt SUV mit Brennstoffzelle und Akku vor

  1. Re: Die Atmen App...

    Sven68 | 07:56

  2. Re: Firewatch

    Zuryan | 07:56

  3. Re: Sockel-Chaos

    FreierLukas | 07:53

  4. Re: Kennt man auch von Amazo

    Zuryan | 07:50

  5. Re: Drecks-Laden

    ve2000 | 07:49


  1. 07:51

  2. 07:23

  3. 07:08

  4. 19:40

  5. 19:00

  6. 17:32

  7. 17:19

  8. 17:00


  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