JavaScript Integer in Enum umwandeln

In JavaScript ist es durchaus möglich Enums anzulegen:

var Protocol =
{ 
  PAMSG_REGISTER:0x0000, // D version, S username, S password, S email, S captcha response
  APMSG_REGISTER_RESPONSE:0x0002, // B error, S updatehost, S Client data URL, B Character slots
  PAMSG_UNREGISTER:0x0003, // S username, S password
}

Interessant wird es nun, wenn man versucht aus einer Zahl in diesem Beispiel der „2“ wieder einen Enum („APMSG_REGISTER_RESPONSE“) zu erzeugen. Hierbei hilft die Funktion „getEnumFromInteger“ welche wie folgt aussieht:

function getEnumFromInteger(enumWithValues, integer)
{
  var keys = Object.keys(enumWithValues);
    
  for (var i=0; i<keys.length; i++)
  {
    if(enumWithValues[keys[i]]==integer) return keys[i];
  }
    
  return null;
}

Damit wird der Enum durchiteriert und der entsprechende Schlüssel, welcher dem Integer entspricht, zurückgegeben.

UKI

Wenn man native Applikation entwickelt, ist die Wahl der Komponenten für die grafische Oberfläche schnell erledigt. Meinst nimmt man das UI Kit, welches dem „Plattform-Standard“ entspricht. Bei Webseiten bzw. Webbapplikationen ist die ganze Sache komplizierter. Hier gibt es eine Reihe von Lösungen, wie jQuery UI, JxLib, YUI und andere. Eine schöne Alternative zu den genannten Lösungen ist UKI.

Eine UKI Beispielanwendung

Die Bibliothek setzt dabei auf direkt auf Javascript auf und benötigt keine weiteren Frameworks. Das ganze ist unter http://ukijs.org/ zu finden. UKI ist dabei freie Software und steht unter der MIT-Lizenz.

OpenLayers

Bei OpenLayers handelt es sich um eine JavaScript-Biliothek zur Darstellung von Karten, im speziellen zur Darstellung von Geodaten. Die Bibliothek steht dabei unter der BSD-Lizenz (2er Klausel Version). So fußt z.B. das Frontend von OpenStreetMap.org auf dieser Bibliothek. Mit Hilfe der Bibliothek ist es ein leichtes Webanwendungen zu schreiben welche Web Feature Services oder Web Map Services nutzen. Auch das Einbinden von OpenStreetMap oder den Google Karten ist kein Problem. Wer vor hat in nächster Zeit so eine Anwendung zu schreiben, der sollte sich OpenLayer anschauen. Die offizielle Seite ist dabei unter http://openlayers.org/ zu finden.

Weitere Informationen gibt es unter:
http://de.wikipedia.org/wiki/BSD-Lizenz
http://de.wikipedia.org/wiki/OpenLayers

Private Funktionen in MooTools Klassen

Mit dem JavaScript Framework MooTools ist es möglich Klassen in JavaScript zu schreiben. In diesen Klassen kann man auch private Methoden definieren. Dazu hängt man ein „.protect()“ an die Methoden an, welche privat sein sollen. Aussehen könnte das ganze dann z.B. so:

var MessageIn = new Class({
  id: 0,
  parts: [],
	
  //Konstruktor
  initialize: function(message) {
    this.parts = this.splitCommand(message);
    this.id=parseInt(this.parts[0], 16);
    this.parts.splice(0, 1); //Erstes Element entfernen
  },
	
  //Methoden
  getPart: function(index) {		
    return this.parts[index];
  },
	
  //Private Methoden
  splitCommand: function(command) {
    ret=new Array();

    ...	

    return ret;
  }.protect()			
});

Dadurch kann die Methode „splitCommand“ nur noch durch die Klasse selbst und nicht mehr von außen aufgerufen werden.

Weitere Informationen gibt es unter:
http://de.wikipedia.org/wiki/MooTools

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