Websockets - HTML5 - page 253

online in grüner Farbe in eine Statuszeile am Ende des HTML-Dokuments. Für
jede Nachricht, die vom Websocket empfangen wird, löst dieser das onmessage -
Event aus. Die Variable e , die dieser Funktion zur Verfügung steht, enthält im
data -Attribut die Nutzdaten, die vom Server gesendet werden. In diesem Bei-
spiel werden die Daten mit JSON.parse in ein JavaScript-Objekt umgewandelt,
was bedeutet, dass der Server einen JSON -String schicken muss (mehr dazu
etwas später). Schlägt die Umwandlung fehl, wird die Funktion beendet, und es
wird eine entsprechende Fehlermeldung auf der HTML-Seite angezeigt.
Eine gültige Nachricht enthält ein JavaScript-Objekt mit Benutzername ( user ),
Nachrichtentext ( text ) und der Farbe, in der die Nachricht angezeigt werden
soll ( color ). Wie in Abbildung 9.1 zu sehen ist, schreibt jeder User in einer
eigenen Zeile und in einer eigenen Farbe. Um die Zuordnung zwischen Farben
und User kümmert sich der Server, das Zuweisen einer neuen Zeile ist auf dem
Client implementiert. Die folgende if -Abfrage überprüft, ob die letzte Nach-
richt vom gleichen User stammt wie die soeben erhaltene. Ist das der Fall, so
wird der innerHTML -Wert der Variable ele mit dem soeben erhaltenen Text be-
legt. Handelt es sich um einen anderen Benutzer oder um die erste Nachricht,
wird ein neuer Absatz mit dem Namen ele erzeugt und an das div -Element mit
der ID broadcast angehängt. Abschließend wird die Variable currentUser auf
den Wert des aktuellen Benutzers gesetzt.
if (currentUser == msg.user) {
ele.innerHTML = msg.text;
} else {
ele = document.createElement("p");
$("broadcast").appendChild(ele);
ele.style.color = msg.color;
ele.innerHTML = msg.text;
currentUser = msg.user;
}
};
};
function sendmsg() {
ws.send($("ta").value);
}
ws.onclose = function(e){
$("status").innerHTML = 'offline';
$("status").style.color = 'red';
};
window.onunload = function(){
ws.close();
};