Binärdaten über Websockets verschicken

Ü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