allow to enqueue room messages before connecting. include change.prev…

…iousValue on 'replace' operations.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "colyseus.js",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "description": "Multiplayer Game Client for the Browser",
   "keywords": [
     "multiplayer",
@@ -29,8 +29,8 @@
   "dependencies": {
     "@gamestdio/clock": "^1.1.0",
     "@gamestdio/signals": "^1.0.0",
-    "@gamestdio/state-listener": "^3.0.0",
-    "@gamestdio/websocket": "^0.2.5",
+    "@gamestdio/state-listener": "^3.1.0",
+    "@gamestdio/websocket": "^0.2.8",
     "fossil-delta": "^1.0.0",
     "notepack.io": "^2.1.3"
   },

src/Client.ts

@@ -77,7 +77,7 @@ export class Client {
     protected connect(colyseusid: string) {
         this.id = colyseusid || '';
 
-        this.connection = this.createConnection();
+        this.connection = new Connection(this.buildEndpoint());
         this.connection.onmessage = this.onMessageCallback.bind(this);
         this.connection.onclose = (e) => this.onClose.dispatch(e);
         this.connection.onerror = (e) => this.onError.dispatch(e);
@@ -90,7 +90,7 @@ export class Client {
         };
     }
 
-    protected createConnection(path: string = '', options: any = {}) {
+    protected buildEndpoint(path: string = '', options: any = {}) {
         // append colyseusid to connection string.
         const params = [`colyseusid=${this.id}`];
 
@@ -101,7 +101,7 @@ export class Client {
             params.push(`${name}=${options[name]}`);
         }
 
-        return new Connection(`${this.hostname}/${path}?${params.join('&')}`);
+        return `${this.hostname}/${path}?${params.join('&')}`;
     }
 
     /**
@@ -129,7 +129,7 @@ export class Client {
             room.id = message[1];
             this.rooms[room.id] = room;
 
-            room.connect(this.createConnection(room.id, room.options));
+            room.connect(this.buildEndpoint(room.id, room.options));
             delete this.connectingRooms[ requestId ];
 
         } else if (code === Protocol.JOIN_ERROR) {

src/Connection.ts

@@ -1,25 +1,26 @@
 import WebSocketClient from '@gamestdio/websocket';
 import * as msgpack from './msgpack';
 
-import { Protocol } from './Protocol';
-
 export class Connection extends WebSocketClient {
 
     private _enqueuedCalls: any[] = [];
 
-    constructor(url, query: any = {}) {
-        super(url);
-
-        this.binaryType = 'arraybuffer';
+    constructor(url, autoConnect: boolean = true) {
+        super(url, undefined, { connect: autoConnect });
     }
 
     public onOpenCallback(event) {
         super.onOpenCallback();
 
+        this.binaryType = 'arraybuffer';
+
         if (this._enqueuedCalls.length > 0) {
             for (const [method, args] of this._enqueuedCalls) {
                 this[method].apply(this, args);
             }
+
+            // clear enqueued calls.
+            this._enqueuedCalls = [];
         }
     }
 
@@ -28,8 +29,6 @@ export class Connection extends WebSocketClient {
             return super.send( msgpack.encode(data) );
 
         } else {
-            console.warn(`colyseus.js: trying to send data while in ${ this.ws.readyState } state`);
-
             // WebSocket not connected.
             // Enqueue data to be sent when readyState == OPEN
             this._enqueuedCalls.push(['send', [data]]);

src/Room.ts

@@ -5,10 +5,8 @@ import { StateContainer } from '@gamestdio/state-listener';
 import * as fossilDelta from 'fossil-delta';
 import * as msgpack from './msgpack';
 
-import { Client } from './Client';
 import { Connection } from './Connection';
 import { Protocol } from './Protocol';
-import { setItem } from './Storage';
 
 export interface RoomAvailable {
     roomId: string;
@@ -43,21 +41,21 @@ export class Room<T= any> extends StateContainer<T & any> {
 
         this.name = name;
         this.options = options;
+        this.connection = new Connection(undefined, false);
 
-        this.onLeave.add(() => {
-            this.removeAllListeners();
-        });
+        this.onLeave.add(() => this.removeAllListeners());
     }
 
-    public connect(connection: Connection) {
-        this.connection = connection;
+    public connect(endpoint: string) {
+        this.connection.url = endpoint;
         this.connection.reconnectEnabled = false;
         this.connection.onmessage = this.onMessageCallback.bind(this);
         this.connection.onclose = (e) => this.onLeave.dispatch(e);
         this.connection.onerror = (e) => {
             console.warn(`Possible causes: room's onAuth() failed or maxClients has been reached.`);
             this.onError.dispatch(e);
         };
+        this.connection.open();
     }
 
     public leave(): void {

test/room_test.ts

@@ -18,7 +18,7 @@ describe("Room", function() {
   });
 
   it("should emit state change", function(done) {
-    room.onStateChange.add(function(data) {
+    room.onStateChange.add(function(data, previousState) {
       assert.deepEqual(data.messages, []);
       done();
     });