refactoring localStorage usage. integrate new 'allowReconnection' fea…

…ture from server. colyseus/colyseus#147

package.json

@@ -15,7 +15,6 @@
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "scripts": {
-    "start": "npm run build && node --harmony ./examples/server.js",
     "test": "mocha test/*.ts --require ts-node/register",
     "build": "webpack --env.production",
     "watch": "tsc -w",
@@ -43,15 +42,15 @@
     "@types/msgpack-lite": "^0.1.1",
     "benchmark": "^2.1.4",
     "chai": "^3.5.0",
-    "mocha": "^3.1.0",
+    "mocha": "^5.1.1",
     "msgpack-lite": "^0.1.20",
-    "nodemon": "^1.7.1",
+    "node-localstorage": "^1.3.1",
+    "nodemon": "^1.17.4",
     "ts-loader": "^2.3.7",
-    "ts-node": "^3.3.0",
+    "ts-node": "^6.0.3",
     "tslint": "^5.9.1",
     "typescript": "^2.8.1",
     "uglify-js": "^2.6.1",
-    "watchify": "^3.6.1",
     "webpack": "^3.6.0"
   }
 }

src/Client.ts

@@ -3,7 +3,8 @@ import * as msgpack from 'notepack.io';
 
 import { Connection } from './Connection';
 import { Protocol } from './Protocol';
-import { Room, RoomAvailable } from './Room';
+import { RECONNECTION_KEY, Room, RoomAvailable } from './Room';
+import { getItem, setItem } from './Storage';
 
 export class Client {
     public id?: string;
@@ -21,27 +22,11 @@ export class Client {
     protected requestId = 0;
 
     protected hostname: string;
-    protected storage: Storage = (typeof(cc) !== 'undefined' && cc.sys && cc.sys.localStorage)
-        ? cc.sys.localStorage  // compatibility with cocos creator
-        : window.localStorage; // regular browser environment
-
     protected roomsAvailableRequests: {[requestId: number]: (value?: RoomAvailable[]) => void} = {};
 
     constructor(url: string) {
         this.hostname = url;
-        const colyseusid: any = this.storage.getItem('colyseusid');
-
-        if (
-            typeof(Promise) === 'undefined' || // old browsers
-            !(colyseusid instanceof Promise)
-        ) {
-            // browser has synchronous return
-            this.connect(colyseusid);
-
-        } else {
-            // react-native is asynchronous
-            colyseusid.then((id) => this.connect(id));
-        }
+        getItem('colyseusid', (colyseusid) => this.connect(colyseusid));
     }
 
     public join<T>(roomName: string, options: any = {}): Room<T> {
@@ -57,7 +42,13 @@ export class Client {
 
         this.connectingRooms[ options.requestId ] = room;
 
-        this.connection.send([Protocol.JOIN_ROOM, roomName, options]);
+        getItem(RECONNECTION_KEY, (reconnectingSessionId) => {
+            if (reconnectingSessionId) {
+                options.sessionId = reconnectingSessionId;
+            }
+
+            this.connection.send([Protocol.JOIN_ROOM, roomName, options]);
+        });
 
         return room;
     }
@@ -123,7 +114,7 @@ export class Client {
         const code = message[0];
 
         if (code === Protocol.USER_ID) {
-            this.storage.setItem('colyseusid', message[1]);
+            setItem('colyseusid', message[1]);
 
             this.id = message[1];
             this.onOpen.dispatch();

src/Room.ts

@@ -8,6 +8,7 @@ import * as msgpack from 'notepack.io';
 import { Client } from './Client';
 import { Connection } from './Connection';
 import { Protocol } from './Protocol';
+import { setItem } from './Storage';
 
 export interface RoomAvailable {
     roomId: string;
@@ -16,6 +17,8 @@ export interface RoomAvailable {
     metadata?: any;
 }
 
+export const RECONNECTION_KEY = 'reconnection';
+
 export class Room<T= any> extends StateContainer<T & any> {
     public id: string;
     public sessionId: string;
@@ -34,6 +37,7 @@ export class Room<T= any> extends StateContainer<T & any> {
     public onLeave: Signal = new Signal();
 
     public connection: Connection;
+    protected allowReconnection: boolean;
     private _previousState: any;
 
     constructor(name: string, options?: any) {
@@ -43,7 +47,10 @@ export class Room<T= any> extends StateContainer<T & any> {
         this.name = name;
         this.options = options;
 
-        this.onLeave.add( () => this.removeAllListeners() );
+        this.onLeave.add(() => {
+            this.refreshAutoReconnection();
+            this.removeAllListeners();
+        });
     }
 
     public connect(connection: Connection) {
@@ -85,6 +92,8 @@ export class Room<T= any> extends StateContainer<T & any> {
 
         if (code === Protocol.JOIN_ROOM) {
             this.sessionId = message[1];
+            this.allowReconnection = message[2];
+            this.refreshAutoReconnection();
             this.onJoin.dispatch();
 
         } else if (code === Protocol.JOIN_ERROR) {
@@ -109,6 +118,12 @@ export class Room<T= any> extends StateContainer<T & any> {
         }
     }
 
+    protected refreshAutoReconnection() {
+        if (this.allowReconnection) {
+            setItem(RECONNECTION_KEY, this.sessionId);
+        }
+    }
+
     protected setState( encodedState: Buffer, remoteCurrentTime?: number, remoteElapsedTime?: number ): void {
         const state = msgpack.decode(encodedState);
         this.set(state);

src/Storage.ts

@@ -0,0 +1,23 @@
+const storage: Storage = (typeof (cc) !== 'undefined' && cc.sys && cc.sys.localStorage)
+    ? cc.sys.localStorage  // compatibility with cocos creator
+    : window.localStorage; // regular browser environment
+
+export function setItem(key: string, value: string) {
+    storage.setItem(key, value);
+}
+
+export function getItem(key: string, callback: Function) {
+    const value: any = storage.getItem('colyseusid');
+
+    if (
+        typeof (Promise) === 'undefined' || // old browsers
+        !(value instanceof Promise)
+    ) {
+        // browser has synchronous return
+        callback(value);
+
+    } else {
+        // react-native is asynchronous
+        value.then((id) => callback(id));
+    }
+}

src/index.ts

@@ -1,4 +1,4 @@
-import "./legacy";
+import './legacy';
 
 export { Client } from './Client';
 export { Protocol } from './Protocol';

src/legacy.ts

@@ -5,8 +5,8 @@
 /*
  * Support Android 4.4.x
  */
-if (!ArrayBuffer['isView']) {
-    ArrayBuffer.isView = function (a: any): a is ArrayBufferView {
-        return a !== null && typeof (a) === "object" && a['buffer'] instanceof ArrayBuffer;
+if (!ArrayBuffer.isView) {
+    ArrayBuffer.isView = (a: any): a is ArrayBufferView => {
+        return a !== null && typeof (a) === 'object' && a.buffer instanceof ArrayBuffer;
     };
-}
+}

test/util.ts

@@ -1 +1,4 @@
+import * as localStorage from "node-localstorage";
+
 (<any>global).WebSocket = {};
+(<any>global).window = { localStorage: localStorage };