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.
function start() { con = new WebSocket('ws://localhost:8001/'); con.onmessage = function(msg) { var message = {track:'',volume:''}; try { message = JSON.parse(msg.data); } catch(e) { console.log(e); return; } document.getElementById('track').innerHTML = message.track; document.getElementById('volume').innerHTML = message.volume; }
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.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
- ohne Werbung
- mit ausgeschaltetem Javascript
- mit RSS-Volltext-Feed
Ein ferngesteuerter Musikplayer | Anzeigen und Senden |
Ich würde sagen hier könnte man eleganter und auch verhältnismäßig preiswert mit Zigbee...
perfekt! die Artikel sind echt zeitlos. ich werde noch ein paar Artikel nachholen.
Meine RasPis dienen einmal als AirPrint-Server für einen 15 Jahre alten Kyocera...
die guten alten Zeiten der c't, als es noch in fast jeder Ausgabe etwas zum selber...