Über Websockets kann man Binärdaten verschicken, leider ist dies nicht ganz so einfach wie es sein sollte. Das erste Problem ist, das es in JavaScript bis vor einiger Zeit keine „Binärtypen“ gab. Aber dank einiger Dinge ist es mittlerweile möglich Binärdaten per JavaScript und Websockets zu versenden. Mein Problem an der binären Datenübertragung war bisher, das es augenscheinlich nirgens ein komplettes Beispiel gibt, welche diese einfach mal demonstriert. Dabei ist das ganze relativ einfach:
<!DOCTYPE html>
<html>
<head>
<title>Websocket Binary Test</title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
websocket = new WebSocket("ws://echo.websocket.org");
websocket.binaryType = "arraybuffer"; //Binärtyp auf arraybuffer setzen
//OnOpen verdraten
websocket.onopen = function (e) {
//Array zusammenbauen
var message = new ArrayBuffer(9);
var dataViewMessage = new DataView(message);
dataViewMessage.setInt8(0, 25); //Command ID
dataViewMessage.setInt16(1, 11); //Account ID
dataViewMessage.setInt32(5, 43333020); //Anzahl der Credits
//message per Websocket wegschicken
websocket.send(message);
}
//OnMessage verdraten
websocket.onmessage = function (wsPackage) {
//Datentyp ermitteln
if(wsPackage.data instanceof ArrayBuffer) alert("ArrayBuffer");
else if(wsPackage.data instanceof Blob) alert("Blob");
else if(typeof wsPackage.data === "string") alert("string");
//Daten empfangen und auseinander bauen
var dataViewPackage = new DataView(wsPackage.data);
alert(dataViewPackage.getInt8(0));
alert(dataViewPackage.getInt16(1));
alert(dataViewPackage.getInt32(5));
}
</script>
</body>
</html>
Im den ersten Zeilen im Skriptteil wird zuerst ein Websocket angelegt, welches sich mit „ws://echo.websocket.org“ verbindet. Dieser Server gibt immer genau das zurück was er empfängt und eignet sich somit ausgezeichnet für diesen kleinen Test.
Danach wird der „binaryType“ des Websockets auf „arraybuffer“ gesetzt, da wir mit einem solchen arbeiten wollen. In der verknüpften „OnOpen“ Methode wird ein „ArrayBuffer“ mit der passenden Größe angelegt und mit diesem ein „DataView“ initialisiert. Mit diesem ist es dann möglich problemlos möglich die entsprechenden Werte in den „ArrayBuffer“ zu setzen.
Dies geschieht dann mit den Zeilen:
dataViewMessage.setInt8(0, 25); //Command ID dataViewMessage.setInt16(1, 11); //Account ID dataViewMessage.setInt32(5, 43333020); //Anzahl der Credits
Am Ende wird das ganze weggeschickt und anschließend wieder in der „OnMessage“ Funktion empfangen. Dort wird der Datentyp ermittelt (für den Fall das man mit mehreren Typen arbeitet) und anschließend wird das Paket wieder Binär auseinander genommen.
Weitere Informationen gibt es unter:
http://www.websocket.org/echo.html
http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/
https://developer.mozilla.org/en-US/docs/JavaScript_typed_arrays
http://msdn.microsoft.com/de-de/library/br212463%28v=vs.94%29.aspx
https://developer.mozilla.org/en-US/docs/JavaScript_typed_arrays/ArrayBuffer
http://stackoverflow.com/questions/11390021/transferring-files-with-javascript-through-websockets
