KOMPOOS.NL

websockets - HTML5

home » manuals » html5 » websockets.html

voorbeeld websockets

.....

uitleg html5 websocket voorbeeld

Het is nog een beetje te vroeg om webpagina's gebruik van de websockets te laten maken. Slecht een paar browser-versies werken (perfect) met websockets. Toch is het handig om alvast even te kijken of de websockets in een browser willen werken. Het lijkt mij het makkelijkste om gewoon deze pagina voor een test te gebruiken, maar als je wilt kan je de procedure op jouw eigen website plaatsen. Hieronder staat de benodigde code. Iedereen vindt het al vanzelfsprekend dat de code op de pagina's van de kompoos.nl (eigenlijk bíjna altijd) foutloos is. Dat geldt ook voor deze pagina. Alles valideert JSLint, W3C etc. etc.

html code zoals gebruikt op deze demo-pagina


<div id="websocket_div">.....</div>
<p>
<a onclick="start_websocket_procedure()" href="#">klik hier voor een websockets demo</a>
</p>

javascript voor het html5 websocket voorbeeld


<script>
/*global document: false */
/*global setTimeout: false */
/*global window: false */
/*global websocket: true */
/*global MozWebSocket: false */
/*global WebSocket: false */
var websocket_adres = "ws://echo.websocket.org/";
function schrijf_output(output_text) {
    document.getElementById("websocket_div").innerHTML = output_text;
}
schrijf_output("&#9619; websocket idle");
function onOpen() {
    schrijf_output("<span style='color:#0f0'>&#9619;</span> websocket aktief");
    websocket.close();
}
function onClose() {
    setTimeout(function () {
        schrijf_output("<span style='color:#fb0'>&#9619;</span> websocket gesloten");
    }, 2000);
    setTimeout(function () {
        schrijf_output("<span style='color:#f00'>&#9619;</span> websocket idle");
    }, 4000);
    setTimeout(function () {
        schrijf_output("<span style='color:#0ff'>&#9619;</span> websocket idle");
    }, 5000);
}
function onError(evt) {
    schrijf_output(evt.data);
}
function websocket_demonstratie() {
if (window.MozWebSocket) { websocket = new MozWebSocket(websocket_adres);
    schrijf_output("<span style='color:#0f0'>&#9619;</span> websocket Mozilla");
}
else { websocket =  new WebSocket(websocket_adres) ;
    schrijf_output("<span style='color:#0f0'>&#9619;</span> websocket aktief");
    } 
    websocket.onopen = function (evt) {
        onOpen(evt);
    };
    websocket.onclose = function (evt) {
        onClose(evt);
    };
    websocket.onerror = function (evt) {
        onError(evt);
    };
}
function start_websocket_procedure() {
    if (window.WebSocket || window.MozWebSocket) {
        websocket_demonstratie();
    } else {
        schrijf_output("<span style='color:#f90'>&#9619;</span> websocket geen support");
        setTimeout(function () {
            schrijf_output("<span style='color:#0ff'>&#9619;</span> websocket idle");
        }, 2000);
    }
}
</script>