WebSocket - Invia e ricevi messaggi
Il Messagel'evento si verifica solitamente quando il server invia alcuni dati. I messaggi inviati dal server al client possono includere messaggi di testo normale, dati binari o immagini. Ogni volta che vengono inviati dati, il fileonmessage viene attivata la funzione.
Questo evento funge da orecchio del cliente per il server. Ogni volta che il server invia dati, il fileonmessage l'evento viene attivato.
Il frammento di codice seguente descrive l'apertura della connessione del protocollo Web Socket.
connection.onmessage = function(e){
var server_message = e.data;
console.log(server_message);
}
È inoltre necessario tenere conto dei tipi di dati che possono essere trasferiti con l'aiuto di Web Sockets. Il protocollo Web socket supporta testo e dati binari. In termini di Javascript,text si riferisce a come una stringa, mentre i dati binari sono rappresentati come ArrayBuffer.
I Web socket supportano solo un formato binario alla volta. La dichiarazione dei dati binari viene eseguita esplicitamente come segue:
socket.binaryType = ”arrayBuffer”;
socket.binaryType = ”blob”;
stringhe
Le stringhe sono considerate utili, trattando formati leggibili dall'uomo come XML e JSON. Ogni voltaonmessage viene generato un evento, il client deve controllare il tipo di dati e agire di conseguenza.
Lo snippet di codice per determinare il tipo di dati come String è menzionato di seguito:
socket.onmessage = function(event){
if(typeOf event.data === String ) {
console.log(“Received data string”);
}
}
JSON (notazione oggetto JavaScript)
È un formato leggero per il trasferimento di dati leggibili dall'uomo tra i computer. La struttura di JSON è costituita da coppie chiave-valore.
Esempio
{
name: “James Devilson”,
message: “Hello World!”
}
Il codice seguente mostra come gestire un oggetto JSON ed estrarne le proprietà:
socket.onmessage = function(event) {
if(typeOf event.data === String ){
//create a JSON object
var jsonObject = JSON.parse(event.data);
var username = jsonObject.name;
var message = jsonObject.message;
console.log(“Received data string”);
}
}
XML
L'analisi in XML non è difficile, sebbene le tecniche differiscano da browser a browser. Il metodo migliore è analizzare utilizzando una libreria di terze parti come jQuery.
Sia in XML che in JSON, il server risponde come una stringa, che viene analizzata alla fine del client.
ArrayBuffer
Consiste in un dato binario strutturato. I bit inclusi sono dati in un ordine in modo che la posizione possa essere facilmente tracciata. Gli ArrayBuffer sono utili per memorizzare i file di immagine.
La ricezione dei dati utilizzando ArrayBuffers è abbastanza semplice. L'operatoreinstanceOf viene utilizzato al posto dell'operatore uguale.
Il codice seguente mostra come gestire e ricevere un oggetto ArrayBuffer -
socket.onmessage = function(event) {
if(event.data instanceof ArrayBuffer ){
var buffer = event.data;
console.log(“Received arraybuffer”);
}
}
Applicazione demo
Il codice di programma seguente mostra come inviare e ricevere messaggi utilizzando Web Socket.
<!DOCTYPE html>
<html>
<meta charset = "utf-8" />
<title>WebSocket Test</title>
<script language = "javascript" type = "text/javascript">
var wsUri = "ws://echo.websocket.org/";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};
}
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onMessage(evt) {
writeToScreen('<span style = "color: blue;">RESPONSE: ' +
evt.data+'</span>'); websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message); websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message; output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id = "output"></div>
</html>
L'output è mostrato di seguito.