Information Technology Reference
In-Depth Information
mer übermittelt wird. Dazu verwenden wir das
oninput
-Event des Textfeldes
und rufen für jeden Tastendruck die
sendmsg()
-Funktion auf, die wir etwas spä-
ter analysieren werden.
<h2>Nachrichten als Rundsendung</h2>
<textarea accesskey=t
oninput="sendmsg();"
onfocus="select()" rows=5 cols=40 id=ta
placeholder="Hier bitte Ihre Nachricht...">
</textarea>
<div id=broadcast></div>
<p id=status><p id=debug>
Der JavaScript-Abschnitt beginnt mit der Definition der bereits öfter verwende-
ten
$()
-Funktion, einer Anleihe aus der jQuery-Bibliothek. Sobald das gesamte
Dokument geladen ist, wird der Websocket initialisiert und der Variable
ws
zu-
gewiesen. Im vorliegenden Beispiel verwenden wir den Server
html5.komplett
.cc
auf dem speziellen Port
8887
. Die Angabe des Servers erfolgt mit einer URL,
wobei das Protokoll mit
ws://
abgekürzt wird. Ähnlich dem SSL-verschlüssel-
ten HTTPS gibt es auch für Websockets einen verschlüsselten Kanal, der mit
wss://
als Protokoll aufgerufen wird. Für unser Beispiel bleiben wir aber bei
der unverschlüsselten Variante. Der in der URL angegebene Pfad (
/bc
) ist für
unseren Websocket-Server nicht entscheidend, da der Server auf diesem Port
nur den einzigen Zweck hat, dieses Beispiel zu bedienen (mehr zum Server
folgt in Abschnitt 9.2.2, Der Broadcast-Server).
function $(a) { return document.getElementById(a); }
var ws, currentUser, ele;
window.onload = function() {
ws = new WebSocket("ws://html5.komplett.cc:8887/bc");
ws.onopen = function() {
$("status").innerHTML = 'online';
$("status").style.color = 'green';
ws.onmessage = function(e) {
var msg;
try {
msg = JSON.parse(e.data);
} catch (SyntaxError) {
$("debug").innerHTML = "Ungültige Nachricht";
return false;
}
Bei einer erfolgreichen Verbindung wird das
onopen
-Event des Websockets ak-
tiviert. Die anonyme Funktion in unserem Beispiel schreibt die Zeichenkette
