WebSockets - Nachrichten senden und empfangen
Das MessageEreignis tritt normalerweise auf, wenn der Server einige Daten sendet. Vom Server an den Client gesendete Nachrichten können Nur-Text-Nachrichten, Binärdaten oder Bilder enthalten. Immer wenn Daten gesendet werden, wird dieonmessage Funktion wird ausgelöst.
Dieses Ereignis fungiert als Client-Ohr für den Server. Immer wenn der Server Daten sendet, wird deronmessage Ereignis wird ausgelöst.
Das folgende Codefragment beschreibt das Öffnen der Verbindung des Web Socket-Protokolls.
connection.onmessage = function(e){
var server_message = e.data;
console.log(server_message);
}Es muss auch berücksichtigt werden, welche Arten von Daten mit Hilfe von Web Sockets übertragen werden können. Das Web-Socket-Protokoll unterstützt Text und Binärdaten. In Bezug auf Javascript,text wird als Zeichenfolge bezeichnet, während Binärdaten wie dargestellt werden ArrayBuffer.
Web-Sockets unterstützen jeweils nur ein Binärformat. Die Deklaration von Binärdaten erfolgt explizit wie folgt:
socket.binaryType = ”arrayBuffer”;
socket.binaryType = ”blob”;Saiten
Zeichenfolgen werden als nützlich angesehen, wenn sie mit lesbaren Formaten wie XML und JSON verarbeitet werden. Wann immeronmessage Wenn ein Ereignis ausgelöst wird, muss der Client den Datentyp überprüfen und entsprechend handeln.
Das Code-Snippet zum Bestimmen des Datentyps als String wird unten erwähnt -
socket.onmessage = function(event){
if(typeOf event.data === String ) {
console.log(“Received data string”);
}
}JSON (JavaScript-Objektnotation)
Es ist ein leichtes Format zum Übertragen von lesbaren Daten zwischen den Computern. Die Struktur von JSON besteht aus Schlüssel-Wert-Paaren.
Beispiel
{
name: “James Devilson”,
message: “Hello World!”
}Der folgende Code zeigt, wie ein JSON-Objekt behandelt und seine Eigenschaften extrahiert werden.
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
Das Parsen in XML ist nicht schwierig, obwohl sich die Techniken von Browser zu Browser unterscheiden. Die beste Methode ist das Parsen mit einer Drittanbieter-Bibliothek wie jQuery.
Sowohl in XML als auch in JSON antwortet der Server als Zeichenfolge, die am Client-Ende analysiert wird.
ArrayBuffer
Es besteht aus strukturierten Binärdaten. Die eingeschlossenen Bits werden in einer Reihenfolge angegeben, damit die Position leicht verfolgt werden kann. ArrayBuffers sind praktisch, um die Bilddateien zu speichern.
Das Empfangen von Daten mit ArrayBuffers ist ziemlich einfach. Der BetreiberinstanceOf wird anstelle des gleichen Operators verwendet.
Der folgende Code zeigt, wie ein ArrayBuffer-Objekt behandelt und empfangen wird.
socket.onmessage = function(event) {
if(event.data instanceof ArrayBuffer ){
var buffer = event.data;
console.log(“Received arraybuffer”);
}
}Demo-Anwendung
Der folgende Programmcode zeigt, wie Sie Nachrichten mit Web Sockets senden und empfangen.
<!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>Die Ausgabe wird unten gezeigt.
