Abo
  • Services:

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:

Stellenmarkt
  1. Bosch Gruppe, Stuttgart
  2. Heitmann IT GmbH, Hamburg

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.

  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 
  1.  
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. 11
  13. 12
  14.  


Anzeige
Hardware-Angebote
  1. täglich neue Deals bei Alternate.de
  2. ab 119,98€ (Release 04.10.)
  3. 119,90€

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...


Folgen Sie uns
       


Huawei Mate 20 Pro - Hands on

Huaweis neues Mate 20 Pro hat eine neue Dreifachkamera, die zusätzlich zum Weitwinkel- und Teleobjektiv jetzt noch ein Ultraweitwinkelobjektiv bietet. In einem ersten Kurztest macht das neue Smartphone einen guten Eindruck.

Huawei Mate 20 Pro - Hands on Video aufrufen
Pixel 3 XL im Test: Algorithmen können nicht alles
Pixel 3 XL im Test
Algorithmen können nicht alles

Google setzt beim Pixel 3 XL alles auf die Kamera, die dank neuer Algorithmen nicht nur automatisch blinzlerfreie Bilder ermitteln, sondern auch einen besonders scharfen Digitalzoom haben soll. Im Test haben wir allerdings festgestellt, dass auch die beste Software keine Dual- oder Dreifachkamera ersetzen kann.
Ein Test von Tobias Költzsch

  1. Dragonfly Google schweigt zu China-Plänen
  2. Nach Milliardenstrafe Google will Android-Verträge offenbar anpassen
  3. Google Android Studio 3.2 unterstützt Android 9 und App Bundles

Neuer Echo Dot im Test: Amazon kann doch gute Mini-Lautsprecher bauen
Neuer Echo Dot im Test
Amazon kann doch gute Mini-Lautsprecher bauen

Echo Dot steht bisher für muffigen, schlechten Klang. Mit dem neuen Modell zeigt Amazon, dass es doch gute smarte Mini-Lautsprecher mit dem Alexa-Sprachassistenten bauen kann, die sogar gegen die Konkurrenz von Google ankommen.
Ein Test von Ingo Pakalski


    Apple Watch im Test: Auch ohne EKG die beste Smartwatch
    Apple Watch im Test
    Auch ohne EKG die beste Smartwatch

    Apples vierte Watch verändert das Display-Design leicht - zum Wohle des Nutzers. Die Uhr bietet immer noch mit die beste Smartwatch-Erfahrung, auch wenn eine der neuen Funktionen in Deutschland noch nicht funktioniert.
    Ein Test von Tobias Költzsch

    1. Skydio R1 Apple Watch zur Drohnensteuerung verwendet
    2. Smartwatch Apple Watch Series 4 mit EKG und Sturzerkennung
    3. Smartwatch Apple Watch Series 4 nur mit sechs Modellen

      •  /