opal-phoenix 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: df6879b1e256c3b413a8b7f32a6e589afc27b78f
-  data.tar.gz: 626bf02f1075747fc059e34ed2655aff671d5e09
+SHA256:
+  metadata.gz: 38ac7cf7be4678294fd06dc5f09bcb1b1b25e89c8f1f460f1667565a2db0b46e
+  data.tar.gz: 07e31ef83dbda2ff2997ab026f406bd0889eb3f43e7104ee3404b5f1dbde19da
 SHA512:
-  metadata.gz: 7118bbd0f3cdbaaa010695fa0e58513869dc3080651b7adec6cd8824c65058757a19c16119e9d4b2a78532e4c8b3280009cbcb6df4afe4de75c5cc011ef5fe02
-  data.tar.gz: c0e4fbf6f3941554b79aabba3699edb929ded07d9dfa8bb0eed631ce2cf0725db7b6f85a39e4ba033d69ad1e0dab799c4363e1ac8dc1820b5fbad292eac25b8d
+  metadata.gz: f6a758d3bd9f8760049a2c30000fc82d7ef80f2366cb7acd24d56ae673b87f099dca853b8fb2804cc35c2b9b4a27181ef7c62cf252089bdcf5046f927a8ff74b
+  data.tar.gz: fa341b8f9f8fb71ccfec3f977888e60b499cce11ad6c83092a9cea21cf15cf86ee8b161064105bc7a3fb62158b70cb6914aca9ff7880796cba990976dd1a8cfe

data/opal-phoenix.gemspec

@@ -1,17 +1,18 @@
 Gem::Specification.new do |s|
   s.name        = 'opal-phoenix'
-  s.version     = '0.0.7'
+  s.version     = '0.0.8'
   s.authors     = ['Michał Kalbarczyk']
   s.email       = 'fazibear@gmail.com'
   s.homepage    = 'http://github.com/fazibear/opal-phoenix'
   s.summary     = 'Phoenix client wrapper for opal'
   s.description = 'Phoenix client wrapper for opal'
+  s.license     = 'MIT'
 
   s.files         = `git ls-files`.split("\n")
   s.executables   = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
   s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
   s.require_paths = ['lib']
 
-  s.add_dependency 'opal'
-  s.add_development_dependency 'rake'
+  s.add_dependency 'opal', '~> 0'
+  s.add_development_dependency 'rake', '~> 0'
 end

data/opal/phoenix/push.rb

@@ -12,7 +12,7 @@ module Phoenix
 
     def callback(block)
       proc do |e|
-        block.call(Native(e))
+        block.call(Hash.new(e))
       end
     end
   end

data/opal/vendor/phoenix.js

@@ -1,185 +1,217 @@
-(function(exports){
+(function (global, factory) {
+typeof exports === 'object' ? factory(exports) :
+typeof define === 'function' && define.amd ? define(['exports'], factory) :
+factory(global.Phoenix = global.Phoenix || {});
+}(this, (function (exports) {
 "use strict";
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
-function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj; }
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-// Phoenix Channels JavaScript client
-//
-// ## Socket Connection
-//
-// A single connection is established to the server and
-// channels are multiplexed over the connection.
-// Connect to the server using the `Socket` class:
-//
-//     let socket = new Socket("/ws", {params: {userToken: "123"}})
-//     socket.connect()
-//
-// The `Socket` constructor takes the mount point of the socket,
-// the authentication params, as well as options that can be found in
-// the Socket docs, such as configuring the `LongPoll` transport, and
-// heartbeat.
-//
-// ## Channels
-//
-// Channels are isolated, concurrent processes on the server that
-// subscribe to topics and broker events between the client and server.
-// To join a channel, you must provide the topic, and channel params for
-// authorization. Here's an example chat room example where `"new_msg"`
-// events are listened for, messages are pushed to the server, and
-// the channel is joined with ok/error/timeout matches:
-//
-//     let channel = socket.channel("rooms:123", {token: roomToken})
-//     channel.on("new_msg", msg => console.log("Got message", msg) )
-//     $input.onEnter( e => {
-//       channel.push("new_msg", {body: e.target.val}, 10000)
-//        .receive("ok", (msg) => console.log("created message", msg) )
-//        .receive("error", (reasons) => console.log("create failed", reasons) )
-//        .receive("timeout", () => console.log("Networking issue...") )
-//     })
-//     channel.join()
-//       .receive("ok", ({messages}) => console.log("catching up", messages) )
-//       .receive("error", ({reason}) => console.log("failed join", reason) )
-//       .receive("timeout", () => console.log("Networking issue. Still waiting...") )
-//
-//
-// ## Joining
-//
-// Creating a channel with `socket.channel(topic, params)`, binds the params to
-// `channel.params`, which are sent up on `channel.join()`.
-// Subsequent rejoins will send up the modified params for
-// updating authorization params, or passing up last_message_id information.
-// Successful joins receive an "ok" status, while unsuccessful joins
-// receive "error".
-//
-//
-// ## Pushing Messages
-//
-// From the previous example, we can see that pushing messages to the server
-// can be done with `channel.push(eventName, payload)` and we can optionally
-// receive responses from the push. Additionally, we can use
-// `receive("timeout", callback)` to abort waiting for our other `receive` hooks
-//  and take action after some period of waiting. The default timeout is 5000ms.
-//
-//
-// ## Socket Hooks
-//
-// Lifecycle events of the multiplexed connection can be hooked into via
-// `socket.onError()` and `socket.onClose()` events, ie:
-//
-//     socket.onError( () => console.log("there was an error with the connection!") )
-//     socket.onClose( () => console.log("the connection dropped") )
-//
-//
-// ## Channel Hooks
-//
-// For each joined channel, you can bind to `onError` and `onClose` events
-// to monitor the channel lifecycle, ie:
-//
-//     channel.onError( () => console.log("there was an error!") )
-//     channel.onClose( () => console.log("the channel has gone away gracefully") )
-//
-// ### onError hooks
-//
-// `onError` hooks are invoked if the socket connection drops, or the channel
-// crashes on the server. In either case, a channel rejoin is attemtped
-// automatically in an exponential backoff manner.
-//
-// ### onClose hooks
-//
-// `onClose` hooks are invoked only in two cases. 1) the channel explicitly
-// closed on the server, or 2). The client explicitly closed, by calling
-// `channel.leave()`
-//
-//
-// ## Presence
-//
-// The `Presence` object provides features for syncing presence information
-// from the server with the client and handling presences joining and leaving.
-//
-// ### Syncing initial state from the server
-//
-// `Presence.syncState` is used to sync the list of presences on the server
-// with the client's state. An optional `onJoin` and `onLeave` callback can
-// be provided to react to changes in the client's local presences across
-// disconnects and reconnects with the server.
-//
-// `Presence.syncDiff` is used to sync a diff of presence join and leave
-// events from the server, as they happen. Like `syncState`, `syncDiff`
-// accepts optional `onJoin` and `onLeave` callbacks to react to a user
-// joining or leaving from a device.
-//
-// ### Listing Presences
-//
-// `Presence.list` is used to return a list of presence information
-// based on the local state of metadata. By default, all presence
-// metadata is returned, but a `listBy` function can be supplied to
-// allow the client to select which metadata to use for a given presence.
-// For example, you may have a user online from different devices with a
-// a metadata status of "online", but they have set themselves to "away"
-// on another device. In this case, they app may choose to use the "away"
-// status for what appears on the UI. The example below defines a `listBy`
-// function which prioritizes the first metadata which was registered for
-// each user. This could be the first tab they opened, or the first device
-// they came online from:
-//
-//     let state = {}
-//     Presence.syncState(state, stateFromServer)
-//     let listBy = (id, {metas: [first, ...rest]}) => {
-//       first.count = rest.length + 1 // count of this user's presences
-//       first.id = id
-//       return first
-//     }
-//     let onlineUsers = Presence.list(state, listBy)
-//
-//
-// ### Example Usage
-//
-//     // detect if user has joined for the 1st time or from another tab/device
-//     let onJoin = (id, current, newPres) => {
-//       if(!current){
-//         console.log("user has entered for the first time", newPres)
-//       } else {
-//         console.log("user additional presence", newPres)
-//       }
-//     }
-//     // detect if user has left from all tabs/devices, or is still present
-//     let onLeave = (id, current, leftPres) => {
-//       if(current.metas.length === 0){
-//         console.log("user has left from all devices", leftPres)
-//       } else {
-//         console.log("user left from a device", leftPres)
-//       }
-//     }
-//     let presences = {} // client's initial empty presence state
-//     // receive initial presence data from server, sent after join
-//     myChannel.on("presences", state => {
-//       Presence.syncState(presences, state, onJoin, onLeave)
-//       displayUsers(Presence.list(presences))
-//     })
-//     // receive "presence_diff" from server, containing join/leave events
-//     myChannel.on("presence_diff", diff => {
-//       Presence.syncDiff(presences, diff, onJoin, onLeave)
-//       this.setState({users: Presence.list(room.presences, listBy)})
-//     })
-//
-var VSN = "1.0.0";
+/**
+ * Phoenix Channels JavaScript client
+ *
+ * ## Socket Connection
+ *
+ * A single connection is established to the server and
+ * channels are multiplexed over the connection.
+ * Connect to the server using the `Socket` class:
+ *
+ * ```javascript
+ * let socket = new Socket("/socket", {params: {userToken: "123"}})
+ * socket.connect()
+ * ```
+ *
+ * The `Socket` constructor takes the mount point of the socket,
+ * the authentication params, as well as options that can be found in
+ * the Socket docs, such as configuring the `LongPoll` transport, and
+ * heartbeat.
+ *
+ * ## Channels
+ *
+ * Channels are isolated, concurrent processes on the server that
+ * subscribe to topics and broker events between the client and server.
+ * To join a channel, you must provide the topic, and channel params for
+ * authorization. Here's an example chat room example where `"new_msg"`
+ * events are listened for, messages are pushed to the server, and
+ * the channel is joined with ok/error/timeout matches:
+ *
+ * ```javascript
+ * let channel = socket.channel("room:123", {token: roomToken})
+ * channel.on("new_msg", msg => console.log("Got message", msg) )
+ * $input.onEnter( e => {
+ *   channel.push("new_msg", {body: e.target.val}, 10000)
+ *     .receive("ok", (msg) => console.log("created message", msg) )
+ *     .receive("error", (reasons) => console.log("create failed", reasons) )
+ *     .receive("timeout", () => console.log("Networking issue...") )
+ * })
+ *
+ * channel.join()
+ *   .receive("ok", ({messages}) => console.log("catching up", messages) )
+ *   .receive("error", ({reason}) => console.log("failed join", reason) )
+ *   .receive("timeout", () => console.log("Networking issue. Still waiting..."))
+ *```
+ *
+ * ## Joining
+ *
+ * Creating a channel with `socket.channel(topic, params)`, binds the params to
+ * `channel.params`, which are sent up on `channel.join()`.
+ * Subsequent rejoins will send up the modified params for
+ * updating authorization params, or passing up last_message_id information.
+ * Successful joins receive an "ok" status, while unsuccessful joins
+ * receive "error".
+ *
+ * ## Duplicate Join Subscriptions
+ *
+ * While the client may join any number of topics on any number of channels,
+ * the client may only hold a single subscription for each unique topic at any
+ * given time. When attempting to create a duplicate subscription,
+ * the server will close the existing channel, log a warning, and
+ * spawn a new channel for the topic. The client will have their
+ * `channel.onClose` callbacks fired for the existing channel, and the new
+ * channel join will have its receive hooks processed as normal.
+ *
+ * ## Pushing Messages
+ *
+ * From the previous example, we can see that pushing messages to the server
+ * can be done with `channel.push(eventName, payload)` and we can optionally
+ * receive responses from the push. Additionally, we can use
+ * `receive("timeout", callback)` to abort waiting for our other `receive` hooks
+ *  and take action after some period of waiting. The default timeout is 10000ms.
+ *
+ *
+ * ## Socket Hooks
+ *
+ * Lifecycle events of the multiplexed connection can be hooked into via
+ * `socket.onError()` and `socket.onClose()` events, ie:
+ *
+ * ```javascript
+ * socket.onError( () => console.log("there was an error with the connection!") )
+ * socket.onClose( () => console.log("the connection dropped") )
+ * ```
+ *
+ *
+ * ## Channel Hooks
+ *
+ * For each joined channel, you can bind to `onError` and `onClose` events
+ * to monitor the channel lifecycle, ie:
+ *
+ * ```javascript
+ * channel.onError( () => console.log("there was an error!") )
+ * channel.onClose( () => console.log("the channel has gone away gracefully") )
+ * ```
+ *
+ * ### onError hooks
+ *
+ * `onError` hooks are invoked if the socket connection drops, or the channel
+ * crashes on the server. In either case, a channel rejoin is attempted
+ * automatically in an exponential backoff manner.
+ *
+ * ### onClose hooks
+ *
+ * `onClose` hooks are invoked only in two cases. 1) the channel explicitly
+ * closed on the server, or 2). The client explicitly closed, by calling
+ * `channel.leave()`
+ *
+ *
+ * ## Presence
+ *
+ * The `Presence` object provides features for syncing presence information
+ * from the server with the client and handling presences joining and leaving.
+ *
+ * ### Syncing initial state from the server
+ *
+ * `Presence.syncState` is used to sync the list of presences on the server
+ * with the client's state. An optional `onJoin` and `onLeave` callback can
+ * be provided to react to changes in the client's local presences across
+ * disconnects and reconnects with the server.
+ *
+ * `Presence.syncDiff` is used to sync a diff of presence join and leave
+ * events from the server, as they happen. Like `syncState`, `syncDiff`
+ * accepts optional `onJoin` and `onLeave` callbacks to react to a user
+ * joining or leaving from a device.
+ *
+ * ### Listing Presences
+ *
+ * `Presence.list` is used to return a list of presence information
+ * based on the local state of metadata. By default, all presence
+ * metadata is returned, but a `listBy` function can be supplied to
+ * allow the client to select which metadata to use for a given presence.
+ * For example, you may have a user online from different devices with
+ * a metadata status of "online", but they have set themselves to "away"
+ * on another device. In this case, the app may choose to use the "away"
+ * status for what appears on the UI. The example below defines a `listBy`
+ * function which prioritizes the first metadata which was registered for
+ * each user. This could be the first tab they opened, or the first device
+ * they came online from:
+ *
+ * ```javascript
+ * let state = {}
+ * state = Presence.syncState(state, stateFromServer)
+ * let listBy = (id, {metas: [first, ...rest]}) => {
+ *   first.count = rest.length + 1 // count of this user's presences
+ *   first.id = id
+ *   return first
+ * }
+ * let onlineUsers = Presence.list(state, listBy)
+ * ```
+ *
+ *
+ * ### Example Usage
+ * ```javascript
+ * // detect if user has joined for the 1st time or from another tab/device
+ * let onJoin = (id, current, newPres) => {
+ *   if(!current){
+ *     console.log("user has entered for the first time", newPres)
+ *   } else {
+ *     console.log("user additional presence", newPres)
+ *   }
+ * }
+ * // detect if user has left from all tabs/devices, or is still present
+ * let onLeave = (id, current, leftPres) => {
+ *   if(current.metas.length === 0){
+ *     console.log("user has left from all devices", leftPres)
+ *   } else {
+ *     console.log("user left from a device", leftPres)
+ *   }
+ * }
+ * let presences = {} // client's initial empty presence state
+ * // receive initial presence data from server, sent after join
+ * myChannel.on("presence_state", state => {
+ *   presences = Presence.syncState(presences, state, onJoin, onLeave)
+ *   displayUsers(Presence.list(presences))
+ * })
+ * // receive "presence_diff" from server, containing join/leave events
+ * myChannel.on("presence_diff", diff => {
+ *   presences = Presence.syncDiff(presences, diff, onJoin, onLeave)
+ *   this.setState({users: Presence.list(room.presences, listBy)})
+ * })
+ * ```
+ * @module phoenix
+ */
+
+var global = typeof self !== "undefined" ? self : window;
+var VSN = "2.0.0";
 var SOCKET_STATES = { connecting: 0, open: 1, closing: 2, closed: 3 };
 var DEFAULT_TIMEOUT = 10000;
+var WS_CLOSE_NORMAL = 1000;
 var CHANNEL_STATES = {
   closed: "closed",
   errored: "errored",
   joined: "joined",
-  joining: "joining"
+  joining: "joining",
+  leaving: "leaving"
 };
 var CHANNEL_EVENTS = {
   close: "phx_close",
@@ -188,21 +220,21 @@ var CHANNEL_EVENTS = {
   reply: "phx_reply",
   leave: "phx_leave"
 };
+var CHANNEL_LIFECYCLE_EVENTS = [CHANNEL_EVENTS.close, CHANNEL_EVENTS.error, CHANNEL_EVENTS.join, CHANNEL_EVENTS.reply, CHANNEL_EVENTS.leave];
 var TRANSPORTS = {
   longpoll: "longpoll",
   websocket: "websocket"
 };
 
-var Push = (function () {
-
-  // Initializes the Push
-  //
-  // channel - The Channel
-  // event - The event, for example `"phx_join"`
-  // payload - The payload, for example `{user_id: 123}`
-  // timeout - The push timeout in milliseconds
-  //
+/**
+ * Initializes the Push
+ * @param {Channel} channel - The Channel
+ * @param {string} event - The event, for example `"phx_join"`
+ * @param {Object} payload - The payload, for example `{user_id: 123}`
+ * @param {number} timeout - The push timeout in milliseconds
+ */
 
+var Push = function () {
   function Push(channel, event, payload, timeout) {
     _classCallCheck(this, Push);
 
@@ -216,17 +248,24 @@ var Push = (function () {
     this.sent = false;
   }
 
+  /**
+   *
+   * @param {number} timeout
+   */
+
+
   _createClass(Push, [{
     key: "resend",
     value: function resend(timeout) {
       this.timeout = timeout;
-      this.cancelRefEvent();
-      this.ref = null;
-      this.refEvent = null;
-      this.receivedResp = null;
-      this.sent = false;
+      this.reset();
       this.send();
     }
+
+    /**
+     *
+     */
+
   }, {
     key: "send",
     value: function send() {
@@ -239,9 +278,17 @@ var Push = (function () {
         topic: this.channel.topic,
         event: this.event,
         payload: this.payload,
-        ref: this.ref
+        ref: this.ref,
+        join_ref: this.channel.joinRef()
       });
     }
+
+    /**
+     *
+     * @param {*} status
+     * @param {*} callback
+     */
+
   }, {
     key: "receive",
     value: function receive(status, callback) {
@@ -253,14 +300,43 @@ var Push = (function () {
       return this;
     }
 
-    // private
+    /**
+     * Updates the Push payload for subsequent resends
+     *
+     * @param {Object} payload
+     * @returns {Push}
+     */
+
+  }, {
+    key: "updatePayload",
+    value: function updatePayload(payload) {
+      this.payload = payload;
+    }
+
+    /**
+     * @private
+     */
+
+  }, {
+    key: "reset",
+    value: function reset() {
+      this.cancelRefEvent();
+      this.ref = null;
+      this.refEvent = null;
+      this.receivedResp = null;
+      this.sent = false;
+    }
+
+    /**
+     * @private
+     */
 
   }, {
     key: "matchReceive",
     value: function matchReceive(_ref) {
-      var status = _ref.status;
-      var response = _ref.response;
-      var ref = _ref.ref;
+      var status = _ref.status,
+          response = _ref.response,
+          ref = _ref.ref;
 
       this.recHooks.filter(function (h) {
         return h.status === status;
@@ -268,6 +344,11 @@ var Push = (function () {
         return h.callback(response);
       });
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "cancelRefEvent",
     value: function cancelRefEvent() {
@@ -276,19 +357,29 @@ var Push = (function () {
       }
       this.channel.off(this.refEvent);
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "cancelTimeout",
     value: function cancelTimeout() {
       clearTimeout(this.timeoutTimer);
       this.timeoutTimer = null;
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "startTimeout",
     value: function startTimeout() {
       var _this = this;
 
       if (this.timeoutTimer) {
-        return;
+        this.cancelTimeout();
       }
       this.ref = this.channel.socket.makeRef();
       this.refEvent = this.channel.replyEventName(this.ref);
@@ -304,11 +395,21 @@ var Push = (function () {
         _this.trigger("timeout", {});
       }, this.timeout);
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "hasReceived",
     value: function hasReceived(status) {
       return this.receivedResp && this.receivedResp.status === status;
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "trigger",
     value: function trigger(status, response) {
@@ -317,9 +418,17 @@ var Push = (function () {
   }]);
 
   return Push;
-})();
+}();
 
-var Channel = exports.Channel = (function () {
+/**
+ *
+ * @param {string} topic
+ * @param {Object} params
+ * @param {Socket} socket
+ */
+
+
+var Channel = exports.Channel = function () {
   function Channel(topic, params, socket) {
     var _this2 = this;
 
@@ -330,6 +439,7 @@ var Channel = exports.Channel = (function () {
     this.params = params || {};
     this.socket = socket;
     this.bindings = [];
+    this.bindingRef = 0;
     this.timeout = this.socket.timeout;
     this.joinedOnce = false;
     this.joinPush = new Push(this, CHANNEL_EVENTS.join, this.params, this.timeout);
@@ -346,22 +456,28 @@ var Channel = exports.Channel = (function () {
       _this2.pushBuffer = [];
     });
     this.onClose(function () {
-      _this2.socket.log("channel", "close " + _this2.topic);
+      _this2.rejoinTimer.reset();
+      _this2.socket.log("channel", "close " + _this2.topic + " " + _this2.joinRef());
       _this2.state = CHANNEL_STATES.closed;
       _this2.socket.remove(_this2);
     });
     this.onError(function (reason) {
+      if (_this2.isLeaving() || _this2.isClosed()) {
+        return;
+      }
       _this2.socket.log("channel", "error " + _this2.topic, reason);
       _this2.state = CHANNEL_STATES.errored;
       _this2.rejoinTimer.scheduleTimeout();
     });
     this.joinPush.receive("timeout", function () {
-      if (_this2.state !== CHANNEL_STATES.joining) {
+      if (!_this2.isJoining()) {
         return;
       }
-
-      _this2.socket.log("channel", "timeout " + _this2.topic, _this2.joinPush.timeout);
+      _this2.socket.log("channel", "timeout " + _this2.topic + " (" + _this2.joinRef() + ")", _this2.joinPush.timeout);
+      var leavePush = new Push(_this2, CHANNEL_EVENTS.leave, {}, _this2.timeout);
+      leavePush.send();
       _this2.state = CHANNEL_STATES.errored;
+      _this2.joinPush.reset();
       _this2.rejoinTimer.scheduleTimeout();
     });
     this.on(CHANNEL_EVENTS.reply, function (payload, ref) {
@@ -369,6 +485,11 @@ var Channel = exports.Channel = (function () {
     });
   }
 
+  /**
+   * @private
+   */
+
+
   _createClass(Channel, [{
     key: "rejoinUntilConnected",
     value: function rejoinUntilConnected() {
@@ -377,52 +498,127 @@ var Channel = exports.Channel = (function () {
         this.rejoin();
       }
     }
+
+    /**
+     * Join the channel
+     * @param {integer} timeout
+     * @returns {Push}
+     */
+
   }, {
     key: "join",
     value: function join() {
-      var timeout = arguments.length <= 0 || arguments[0] === undefined ? this.timeout : arguments[0];
+      var timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.timeout;
 
       if (this.joinedOnce) {
         throw "tried to join multiple times. 'join' can only be called a single time per channel instance";
       } else {
         this.joinedOnce = true;
+        this.rejoin(timeout);
+        return this.joinPush;
       }
-      this.rejoin(timeout);
-      return this.joinPush;
     }
+
+    /**
+     * Updates the params passed as the second argument to `new Channel("topic", params, socket)`
+     * Any subsequent reconnects on the channel will send the updated params to the `join` callback on the sever
+     *
+     * @param {Object} params
+     */
+
+  }, {
+    key: "updateJoinParams",
+    value: function updateJoinParams() {
+      var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      this.params = params;
+      this.joinPush.updatePayload(params);
+    }
+
+    /**
+     * Hook into channel close
+     * @param {Function} callback
+     */
+
   }, {
     key: "onClose",
     value: function onClose(callback) {
       this.on(CHANNEL_EVENTS.close, callback);
     }
+
+    /**
+     * Hook into channel errors
+     * @param {Function} callback
+     */
+
   }, {
     key: "onError",
     value: function onError(callback) {
-      this.on(CHANNEL_EVENTS.error, function (reason) {
+      return this.on(CHANNEL_EVENTS.error, function (reason) {
         return callback(reason);
       });
     }
+
+    /**
+     * Subscribes on channel events
+     *
+     * Subscription returns a ref counter, which can be used later to
+     * unsubscribe the exact event listener
+     *
+     * @example
+     * const ref1 = channel.on("event", do_stuff)
+     * const ref2 = channel.on("event", do_other_stuff)
+     * channel.off("event", ref1)
+     * // Since unsubscription, do_stuff won't fire,
+     * // while do_other_stuff will keep firing on the "event"
+     *
+     * @param {string} event
+     * @param {Function} callback
+     * @returns {integer} ref
+     */
+
   }, {
     key: "on",
     value: function on(event, callback) {
-      this.bindings.push({ event: event, callback: callback });
+      var ref = this.bindingRef++;
+      this.bindings.push({ event: event, ref: ref, callback: callback });
+      return ref;
     }
+
+    /**
+     * @param {string} event
+     * @param {integer} ref
+     */
+
   }, {
     key: "off",
-    value: function off(event) {
+    value: function off(event, ref) {
       this.bindings = this.bindings.filter(function (bind) {
-        return bind.event !== event;
+        return !(bind.event === event && (typeof ref === "undefined" || ref === bind.ref));
       });
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "canPush",
     value: function canPush() {
-      return this.socket.isConnected() && this.state === CHANNEL_STATES.joined;
+      return this.socket.isConnected() && this.isJoined();
     }
+
+    /**
+     * @param {string} event
+     * @param {Object} payload
+     * @param {number} [timeout]
+     * @returns {Push}
+     */
+
   }, {
     key: "push",
     value: function push(event, payload) {
-      var timeout = arguments.length <= 2 || arguments[2] === undefined ? this.timeout : arguments[2];
+      var timeout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.timeout;
 
       if (!this.joinedOnce) {
         throw "tried to push '" + event + "' to '" + this.topic + "' before joining. Use channel.join() before pushing events";
@@ -438,26 +634,31 @@ var Channel = exports.Channel = (function () {
       return pushEvent;
     }
 
-    // Leaves the channel
-    //
-    // Unsubscribes from server events, and
-    // instructs channel to terminate on server
-    //
-    // Triggers onClose() hooks
-    //
-    // To receive leave acknowledgements, use the a `receive`
-    // hook to bind to the server ack, ie:
-    //
-    //     channel.leave().receive("ok", () => alert("left!") )
-    //
+    /** Leaves the channel
+     *
+     * Unsubscribes from server events, and
+     * instructs channel to terminate on server
+     *
+     * Triggers onClose() hooks
+     *
+     * To receive leave acknowledgements, use the a `receive`
+     * hook to bind to the server ack, ie:
+     *
+     * @example
+     * channel.leave().receive("ok", () => alert("left!") )
+     *
+     * @param {integer} timeout
+     * @returns {Push}
+     */
 
   }, {
     key: "leave",
     value: function leave() {
       var _this3 = this;
 
-      var timeout = arguments.length <= 0 || arguments[0] === undefined ? this.timeout : arguments[0];
+      var timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.timeout;
 
+      this.state = CHANNEL_STATES.leaving;
       var onClose = function onClose() {
         _this3.socket.log("channel", "leave " + _this3.topic);
         _this3.trigger(CHANNEL_EVENTS.close, "leave");
@@ -476,88 +677,245 @@ var Channel = exports.Channel = (function () {
       return leavePush;
     }
 
-    // Overridable message hook
-    //
-    // Receives all events for specialized message handling
+    /**
+     * Overridable message hook
+     *
+     * Receives all events for specialized message handling
+     * before dispatching to the channel callbacks.
+     *
+     * Must return the payload, modified or unmodified
+     * @param {string} event
+     * @param {Object} payload
+     * @param {integer} ref
+     * @returns {Object}
+     */
 
   }, {
     key: "onMessage",
-    value: function onMessage(event, payload, ref) {}
+    value: function onMessage(event, payload, ref) {
+      return payload;
+    }
 
-    // private
+    /**
+     * @private
+     */
 
   }, {
     key: "isMember",
-    value: function isMember(topic) {
-      return this.topic === topic;
+    value: function isMember(topic, event, payload, joinRef) {
+      if (this.topic !== topic) {
+        return false;
+      }
+      var isLifecycleEvent = CHANNEL_LIFECYCLE_EVENTS.indexOf(event) >= 0;
+
+      if (joinRef && isLifecycleEvent && joinRef !== this.joinRef()) {
+        this.socket.log("channel", "dropping outdated message", { topic: topic, event: event, payload: payload, joinRef: joinRef });
+        return false;
+      } else {
+        return true;
+      }
+    }
+
+    /**
+     * @private
+     */
+
+  }, {
+    key: "joinRef",
+    value: function joinRef() {
+      return this.joinPush.ref;
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "sendJoin",
     value: function sendJoin(timeout) {
       this.state = CHANNEL_STATES.joining;
       this.joinPush.resend(timeout);
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "rejoin",
     value: function rejoin() {
-      var timeout = arguments.length <= 0 || arguments[0] === undefined ? this.timeout : arguments[0];
+      var timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.timeout;
+      if (this.isLeaving()) {
+        return;
+      }
       this.sendJoin(timeout);
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "trigger",
-    value: function trigger(triggerEvent, payload, ref) {
-      this.onMessage(triggerEvent, payload, ref);
+    value: function trigger(event, payload, ref, joinRef) {
+      var _this4 = this;
+
+      var handledPayload = this.onMessage(event, payload, ref, joinRef);
+      if (payload && !handledPayload) {
+        throw "channel onMessage callbacks must return the payload, modified or unmodified";
+      }
+
       this.bindings.filter(function (bind) {
-        return bind.event === triggerEvent;
+        return bind.event === event;
       }).map(function (bind) {
-        return bind.callback(payload, ref);
+        return bind.callback(handledPayload, ref, joinRef || _this4.joinRef());
       });
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "replyEventName",
     value: function replyEventName(ref) {
       return "chan_reply_" + ref;
     }
+
+    /**
+     * @private
+     */
+
+  }, {
+    key: "isClosed",
+    value: function isClosed() {
+      return this.state === CHANNEL_STATES.closed;
+    }
+
+    /**
+     * @private
+     */
+
+  }, {
+    key: "isErrored",
+    value: function isErrored() {
+      return this.state === CHANNEL_STATES.errored;
+    }
+
+    /**
+     * @private
+     */
+
+  }, {
+    key: "isJoined",
+    value: function isJoined() {
+      return this.state === CHANNEL_STATES.joined;
+    }
+
+    /**
+     * @private
+     */
+
+  }, {
+    key: "isJoining",
+    value: function isJoining() {
+      return this.state === CHANNEL_STATES.joining;
+    }
+
+    /**
+     * @private
+     */
+
+  }, {
+    key: "isLeaving",
+    value: function isLeaving() {
+      return this.state === CHANNEL_STATES.leaving;
+    }
   }]);
 
   return Channel;
-})();
-
-var Socket = exports.Socket = (function () {
-
-  // Initializes the Socket
-  //
-  // endPoint - The string WebSocket endpoint, ie, "ws://example.com/ws",
-  //                                               "wss://example.com"
-  //                                               "/ws" (inherited host & protocol)
-  // opts - Optional configuration
-  //   transport - The Websocket Transport, for example WebSocket or Phoenix.LongPoll.
-  //               Defaults to WebSocket with automatic LongPoll fallback.
-  //   timeout - The default timeout in milliseconds to trigger push timeouts.
-  //             Defaults `DEFAULT_TIMEOUT`
-  //   heartbeatIntervalMs - The millisec interval to send a heartbeat message
-  //   reconnectAfterMs - The optional function that returns the millsec
-  //                      reconnect interval. Defaults to stepped backoff of:
-  //
-  //     function(tries){
-  //       return [1000, 5000, 10000][tries - 1] || 10000
-  //     }
-  //
-  //   logger - The optional function for specialized logging, ie:
-  //     `logger: (kind, msg, data) => { console.log(`${kind}: ${msg}`, data) }
-  //
-  //   longpollerTimeout - The maximum timeout of a long poll AJAX request.
-  //                        Defaults to 20s (double the server long poll timer).
-  //
-  //   params - The optional params to pass when connecting
-  //
-  // For IE8 support use an ES5-shim (https://github.com/es-shims/es5-shim)
-  //
+}();
+
+var Serializer = {
+  encode: function encode(msg, callback) {
+    var payload = [msg.join_ref, msg.ref, msg.topic, msg.event, msg.payload];
+    return callback(JSON.stringify(payload));
+  },
+  decode: function decode(rawPayload, callback) {
+    var _JSON$parse = JSON.parse(rawPayload),
+        _JSON$parse2 = _slicedToArray(_JSON$parse, 5),
+        join_ref = _JSON$parse2[0],
+        ref = _JSON$parse2[1],
+        topic = _JSON$parse2[2],
+        event = _JSON$parse2[3],
+        payload = _JSON$parse2[4];
+
+    return callback({ join_ref: join_ref, ref: ref, topic: topic, event: event, payload: payload });
+  }
+};
 
+/** Initializes the Socket
+ *
+ *
+ * For IE8 support use an ES5-shim (https://github.com/es-shims/es5-shim)
+ *
+ * @param {string} endPoint - The string WebSocket endpoint, ie, `"ws://example.com/socket"`,
+ *                                               `"wss://example.com"`
+ *                                               `"/socket"` (inherited host & protocol)
+ * @param {Object} [opts] - Optional configuration
+ * @param {string} [opts.transport] - The Websocket Transport, for example WebSocket or Phoenix.LongPoll.
+ *
+ * Defaults to WebSocket with automatic LongPoll fallback.
+ * @param {Function} [opts.encode] - The function to encode outgoing messages.
+ *
+ * Defaults to JSON:
+ *
+ * ```javascript
+ * (payload, callback) => callback(JSON.stringify(payload))
+ * ```
+ *
+ * @param {Function} [opts.decode] - The function to decode incoming messages.
+ *
+ * Defaults to JSON:
+ *
+ * ```javascript
+ * (payload, callback) => callback(JSON.parse(payload))
+ * ```
+ *
+ * @param {number} [opts.timeout] - The default timeout in milliseconds to trigger push timeouts.
+ *
+ * Defaults `DEFAULT_TIMEOUT`
+ * @param {number} [opts.heartbeatIntervalMs] - The millisec interval to send a heartbeat message
+ * @param {number} [opts.reconnectAfterMs] - The optional function that returns the millsec reconnect interval.
+ *
+ * Defaults to stepped backoff of:
+ *
+ * ```javascript
+ * function(tries){
+ *   return [1000, 5000, 10000][tries - 1] || 10000
+ * }
+ * ```
+ * @param {Function} [opts.logger] - The optional function for specialized logging, ie:
+ * ```javascript
+ * function(kind, msg, data) {
+ *   console.log(`${kind}: ${msg}`, data)
+ * }
+ * ```
+ *
+ * @param {number} [opts.longpollerTimeout] - The maximum timeout of a long poll AJAX request.
+ *
+ * Defaults to 20s (double the server long poll timer).
+ *
+ * @param {Object} [opts.params] - The optional params to pass when connecting
+ *
+ *
+*/
+
+var Socket = exports.Socket = function () {
   function Socket(endPoint) {
-    var _this4 = this;
+    var _this5 = this;
 
-    var opts = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
     _classCallCheck(this, Socket);
 
@@ -566,7 +924,16 @@ var Socket = exports.Socket = (function () {
     this.sendBuffer = [];
     this.ref = 0;
     this.timeout = opts.timeout || DEFAULT_TIMEOUT;
-    this.transport = opts.transport || window.WebSocket || LongPoll;
+    this.transport = opts.transport || global.WebSocket || LongPoll;
+    this.defaultEncoder = Serializer.encode;
+    this.defaultDecoder = Serializer.decode;
+    if (this.transport !== LongPoll) {
+      this.encode = opts.encode || this.defaultEncoder;
+      this.decode = opts.decode || this.defaultDecoder;
+    } else {
+      this.encode = this.defaultEncoder;
+      this.decode = this.defaultDecoder;
+    }
     this.heartbeatIntervalMs = opts.heartbeatIntervalMs || 30000;
     this.reconnectAfterMs = opts.reconnectAfterMs || function (tries) {
       return [1000, 2000, 5000, 10000][tries - 1] || 10000;
@@ -575,18 +942,34 @@ var Socket = exports.Socket = (function () {
     this.longpollerTimeout = opts.longpollerTimeout || 20000;
     this.params = opts.params || {};
     this.endPoint = endPoint + "/" + TRANSPORTS.websocket;
+    this.heartbeatTimer = null;
+    this.pendingHeartbeatRef = null;
     this.reconnectTimer = new Timer(function () {
-      _this4.disconnect(function () {
-        return _this4.connect();
+      _this5.disconnect(function () {
+        return _this5.connect();
       });
     }, this.reconnectAfterMs);
   }
 
+  /**
+   * Returns the socket protocol
+   *
+   * @returns {string}
+   */
+
+
   _createClass(Socket, [{
     key: "protocol",
     value: function protocol() {
       return location.protocol.match(/^https/) ? "wss" : "ws";
     }
+
+    /**
+     * The fully qualifed socket url
+     *
+     * @returns {string}
+     */
+
   }, {
     key: "endPointURL",
     value: function endPointURL() {
@@ -600,6 +983,13 @@ var Socket = exports.Socket = (function () {
 
       return this.protocol() + "://" + location.host + uri;
     }
+
+    /**
+     * @param {Function} callback
+     * @param {integer} code
+     * @param {string} reason
+     */
+
   }, {
     key: "disconnect",
     value: function disconnect(callback, code, reason) {
@@ -615,12 +1005,15 @@ var Socket = exports.Socket = (function () {
       callback && callback();
     }
 
-    // params - The params to send when connecting, for example `{user_id: userToken}`
+    /**
+     *
+     * @param {Object} params - The params to send when connecting, for example `{user_id: userToken}`
+     */
 
   }, {
     key: "connect",
     value: function connect(params) {
-      var _this5 = this;
+      var _this6 = this;
 
       if (params) {
         console && console.log("passing params to connect is deprecated. Instead pass :params to the Socket constructor");
@@ -633,20 +1026,25 @@ var Socket = exports.Socket = (function () {
       this.conn = new this.transport(this.endPointURL());
       this.conn.timeout = this.longpollerTimeout;
       this.conn.onopen = function () {
-        return _this5.onConnOpen();
+        return _this6.onConnOpen();
       };
       this.conn.onerror = function (error) {
-        return _this5.onConnError(error);
+        return _this6.onConnError(error);
       };
       this.conn.onmessage = function (event) {
-        return _this5.onConnMessage(event);
+        return _this6.onConnMessage(event);
       };
       this.conn.onclose = function (event) {
-        return _this5.onConnClose(event);
+        return _this6.onConnClose(event);
       };
     }
 
-    // Logs the message. Override `this.logger` for specialized logging. noops by default
+    /**
+     * Logs the message. Override `this.logger` for specialized logging. noops by default
+     * @param {string} kind
+     * @param {string} msg
+     * @param {Object} data
+     */
 
   }, {
     key: "log",
@@ -654,51 +1052,83 @@ var Socket = exports.Socket = (function () {
       this.logger(kind, msg, data);
     }
 
-    // Registers callbacks for connection state change events
-    //
-    // Examples
-    //
-    //    socket.onError(function(error){ alert("An error occurred") })
-    //
+    /**
+     * Registers callbacks for connection open events
+     *
+     * @example socket.onOpen(function(){ console.info("the socket was opened") })
+     *
+     * @param {Function} callback
+     */
 
   }, {
     key: "onOpen",
     value: function onOpen(callback) {
       this.stateChangeCallbacks.open.push(callback);
     }
+
+    /**
+     * Registers callbacks for connection close events
+     * @param {Function} callback
+     */
+
   }, {
     key: "onClose",
     value: function onClose(callback) {
       this.stateChangeCallbacks.close.push(callback);
     }
+
+    /**
+     * Registers callbacks for connection error events
+     *
+     * @example socket.onError(function(error){ alert("An error occurred") })
+     *
+     * @param {Function} callback
+     */
+
   }, {
     key: "onError",
     value: function onError(callback) {
       this.stateChangeCallbacks.error.push(callback);
     }
+
+    /**
+     * Registers callbacks for connection message events
+     * @param {Function} callback
+     */
+
   }, {
     key: "onMessage",
     value: function onMessage(callback) {
       this.stateChangeCallbacks.message.push(callback);
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "onConnOpen",
     value: function onConnOpen() {
-      var _this6 = this;
+      var _this7 = this;
 
-      this.log("transport", "connected to " + this.endPointURL(), this.transport.prototype);
+      this.log("transport", "connected to " + this.endPointURL());
       this.flushSendBuffer();
       this.reconnectTimer.reset();
       if (!this.conn.skipHeartbeat) {
         clearInterval(this.heartbeatTimer);
         this.heartbeatTimer = setInterval(function () {
-          return _this6.sendHeartbeat();
+          return _this7.sendHeartbeat();
         }, this.heartbeatIntervalMs);
       }
       this.stateChangeCallbacks.open.forEach(function (callback) {
         return callback();
       });
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "onConnClose",
     value: function onConnClose(event) {
@@ -710,6 +1140,11 @@ var Socket = exports.Socket = (function () {
         return callback(event);
       });
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "onConnError",
     value: function onConnError(error) {
@@ -719,6 +1154,11 @@ var Socket = exports.Socket = (function () {
         return callback(error);
       });
     }
+
+    /**
+     * @private
+     */
+
   }, {
     key: "triggerChanError",
     value: function triggerChanError() {
@@ -726,6 +1166,11 @@ var Socket = exports.Socket = (function () {
         return channel.trigger(CHANNEL_EVENTS.error);
       });
     }
+
+    /**
+     * @returns {string}
+     */
+
   }, {
     key: "connectionState",
     value: function connectionState() {
@@ -740,41 +1185,68 @@ var Socket = exports.Socket = (function () {
           return "closed";
       }
     }
+
+    /**
+     * @returns {boolean}
+     */
+
   }, {
     key: "isConnected",
     value: function isConnected() {
       return this.connectionState() === "open";
     }
+
+    /**
+     * @param {Channel}
+     */
+
   }, {
     key: "remove",
     value: function remove(channel) {
       this.channels = this.channels.filter(function (c) {
-        return !c.isMember(channel.topic);
+        return c.joinRef() !== channel.joinRef();
       });
     }
+
+    /**
+     * Initiates a new channel for the given topic
+     *
+     * @param {string} topic
+     * @param {Object} chanParams - Parameters for the channel
+     * @returns {Channel}
+     */
+
   }, {
     key: "channel",
     value: function channel(topic) {
-      var chanParams = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+      var chanParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
       var chan = new Channel(topic, chanParams, this);
       this.channels.push(chan);
       return chan;
     }
+
+    /**
+     * @param {Object} data
+     */
+
   }, {
     key: "push",
     value: function push(data) {
-      var _this7 = this;
+      var _this8 = this;
 
-      var topic = data.topic;
-      var event = data.event;
-      var payload = data.payload;
-      var ref = data.ref;
+      var topic = data.topic,
+          event = data.event,
+          payload = data.payload,
+          ref = data.ref,
+          join_ref = data.join_ref;
 
       var callback = function callback() {
-        return _this7.conn.send(JSON.stringify(data));
+        _this8.encode(data, function (result) {
+          _this8.conn.send(result);
+        });
       };
-      this.log("push", topic + " " + event + " (" + ref + ")", payload);
+      this.log("push", topic + " " + event + " (" + join_ref + ", " + ref + ")", payload);
       if (this.isConnected()) {
         callback();
       } else {
@@ -782,7 +1254,10 @@ var Socket = exports.Socket = (function () {
       }
     }
 
-    // Return the next message ref, accounting for overflows
+    /**
+     * Return the next message ref, accounting for overflows
+     * @returns {string}
+     */
 
   }, {
     key: "makeRef",
@@ -802,7 +1277,14 @@ var Socket = exports.Socket = (function () {
       if (!this.isConnected()) {
         return;
       }
-      this.push({ topic: "phoenix", event: "heartbeat", payload: {}, ref: this.makeRef() });
+      if (this.pendingHeartbeatRef) {
+        this.pendingHeartbeatRef = null;
+        this.log("transport", "heartbeat timeout. Attempting to re-establish connection");
+        this.conn.close(WS_CLOSE_NORMAL, "hearbeat timeout");
+        return;
+      }
+      this.pendingHeartbeatRef = this.makeRef();
+      this.push({ topic: "phoenix", event: "heartbeat", payload: {}, ref: this.pendingHeartbeatRef });
     }
   }, {
     key: "flushSendBuffer",
@@ -817,28 +1299,36 @@ var Socket = exports.Socket = (function () {
   }, {
     key: "onConnMessage",
     value: function onConnMessage(rawMessage) {
-      var msg = JSON.parse(rawMessage.data);
-      var topic = msg.topic;
-      var event = msg.event;
-      var payload = msg.payload;
-      var ref = msg.ref;
-
-      this.log("receive", (payload.status || "") + " " + topic + " " + event + " " + (ref && "(" + ref + ")" || ""), payload);
-      this.channels.filter(function (channel) {
-        return channel.isMember(topic);
-      }).forEach(function (channel) {
-        return channel.trigger(event, payload, ref);
-      });
-      this.stateChangeCallbacks.message.forEach(function (callback) {
-        return callback(msg);
+      var _this9 = this;
+
+      this.decode(rawMessage.data, function (msg) {
+        var topic = msg.topic,
+            event = msg.event,
+            payload = msg.payload,
+            ref = msg.ref,
+            join_ref = msg.join_ref;
+
+        if (ref && ref === _this9.pendingHeartbeatRef) {
+          _this9.pendingHeartbeatRef = null;
+        }
+
+        _this9.log("receive", (payload.status || "") + " " + topic + " " + event + " " + (ref && "(" + ref + ")" || ""), payload);
+        _this9.channels.filter(function (channel) {
+          return channel.isMember(topic, event, payload, join_ref);
+        }).forEach(function (channel) {
+          return channel.trigger(event, payload, ref, join_ref);
+        });
+        _this9.stateChangeCallbacks.message.forEach(function (callback) {
+          return callback(msg);
+        });
       });
     }
   }]);
 
   return Socket;
-})();
+}();
 
-var LongPoll = exports.LongPoll = (function () {
+var LongPoll = exports.LongPoll = function () {
   function LongPoll(endPoint) {
     _classCallCheck(this, LongPoll);
 
@@ -880,7 +1370,7 @@ var LongPoll = exports.LongPoll = (function () {
   }, {
     key: "poll",
     value: function poll() {
-      var _this8 = this;
+      var _this10 = this;
 
       if (!(this.readyState === SOCKET_STATES.open || this.readyState === SOCKET_STATES.connecting)) {
         return;
@@ -888,11 +1378,11 @@ var LongPoll = exports.LongPoll = (function () {
 
       Ajax.request("GET", this.endpointURL(), "application/json", null, this.timeout, this.ontimeout.bind(this), function (resp) {
         if (resp) {
-          var status = resp.status;
-          var token = resp.token;
-          var messages = resp.messages;
+          var status = resp.status,
+              token = resp.token,
+              messages = resp.messages;
 
-          _this8.token = token;
+          _this10.token = token;
         } else {
           var status = 0;
         }
@@ -900,22 +1390,22 @@ var LongPoll = exports.LongPoll = (function () {
         switch (status) {
           case 200:
             messages.forEach(function (msg) {
-              return _this8.onmessage({ data: JSON.stringify(msg) });
+              return _this10.onmessage({ data: msg });
             });
-            _this8.poll();
+            _this10.poll();
             break;
           case 204:
-            _this8.poll();
+            _this10.poll();
             break;
           case 410:
-            _this8.readyState = SOCKET_STATES.open;
-            _this8.onopen();
-            _this8.poll();
+            _this10.readyState = SOCKET_STATES.open;
+            _this10.onopen();
+            _this10.poll();
             break;
           case 0:
           case 500:
-            _this8.onerror();
-            _this8.closeAndRetry();
+            _this10.onerror();
+            _this10.closeAndRetry();
             break;
           default:
             throw "unhandled poll status " + status;
@@ -925,12 +1415,12 @@ var LongPoll = exports.LongPoll = (function () {
   }, {
     key: "send",
     value: function send(body) {
-      var _this9 = this;
+      var _this11 = this;
 
       Ajax.request("POST", this.endpointURL(), "application/json", body, this.timeout, this.onerror.bind(this, "timeout"), function (resp) {
         if (!resp || resp.status !== 200) {
-          _this9.onerror(status);
-          _this9.closeAndRetry();
+          _this11.onerror(resp && resp.status);
+          _this11.closeAndRetry();
         }
       });
     }
@@ -943,9 +1433,9 @@ var LongPoll = exports.LongPoll = (function () {
   }]);
 
   return LongPoll;
-})();
+}();
 
-var Ajax = exports.Ajax = (function () {
+var Ajax = exports.Ajax = function () {
   function Ajax() {
     _classCallCheck(this, Ajax);
   }
@@ -953,24 +1443,24 @@ var Ajax = exports.Ajax = (function () {
   _createClass(Ajax, null, [{
     key: "request",
     value: function request(method, endPoint, accept, body, timeout, ontimeout, callback) {
-      if (window.XDomainRequest) {
+      if (global.XDomainRequest) {
         var req = new XDomainRequest(); // IE8, IE9
         this.xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback);
       } else {
-        var req = window.XMLHttpRequest ? new XMLHttpRequest() : // IE7+, Firefox, Chrome, Opera, Safari
+        var _req = global.XMLHttpRequest ? new global.XMLHttpRequest() : // IE7+, Firefox, Chrome, Opera, Safari
         new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
-        this.xhrRequest(req, method, endPoint, accept, body, timeout, ontimeout, callback);
+        this.xhrRequest(_req, method, endPoint, accept, body, timeout, ontimeout, callback);
       }
     }
   }, {
     key: "xdomainRequest",
     value: function xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback) {
-      var _this10 = this;
+      var _this12 = this;
 
       req.timeout = timeout;
       req.open(method, endPoint);
       req.onload = function () {
-        var response = _this10.parseJSON(req.responseText);
+        var response = _this12.parseJSON(req.responseText);
         callback && callback(response);
       };
       if (ontimeout) {
@@ -985,17 +1475,17 @@ var Ajax = exports.Ajax = (function () {
   }, {
     key: "xhrRequest",
     value: function xhrRequest(req, method, endPoint, accept, body, timeout, ontimeout, callback) {
-      var _this11 = this;
+      var _this13 = this;
 
-      req.timeout = timeout;
       req.open(method, endPoint, true);
+      req.timeout = timeout;
       req.setRequestHeader("Content-Type", accept);
       req.onerror = function () {
         callback && callback(null);
       };
       req.onreadystatechange = function () {
-        if (req.readyState === _this11.states.complete && callback) {
-          var response = _this11.parseJSON(req.responseText);
+        if (req.readyState === _this13.states.complete && callback) {
+          var response = _this13.parseJSON(req.responseText);
           callback(response);
         }
       };
@@ -1008,7 +1498,16 @@ var Ajax = exports.Ajax = (function () {
   }, {
     key: "parseJSON",
     value: function parseJSON(resp) {
-      return resp && resp !== "" ? JSON.parse(resp) : null;
+      if (!resp || resp === "") {
+        return null;
+      }
+
+      try {
+        return JSON.parse(resp);
+      } catch (e) {
+        console && console.log("failed to parse JSON response", resp);
+        return null;
+      }
     }
   }, {
     key: "serialize",
@@ -1041,76 +1540,101 @@ var Ajax = exports.Ajax = (function () {
   }]);
 
   return Ajax;
-})();
+}();
 
 Ajax.states = { complete: 4 };
 
 var Presence = exports.Presence = {
-  syncState: function syncState(state, newState, onJoin, onLeave) {
-    var _this12 = this;
+  syncState: function syncState(currentState, newState, onJoin, onLeave) {
+    var _this14 = this;
 
+    var state = this.clone(currentState);
+    state.presences = state.presences || {};
+    state.synced = true;
+    var pendingDiffs = state.pendingDiffs || [];
     var joins = {};
     var leaves = {};
 
-    this.map(state, function (key, presence) {
+    this.map(state.presences, function (key, presence) {
       if (!newState[key]) {
-        leaves[key] = _this12.clone(presence);
+        leaves[key] = presence;
       }
     });
     this.map(newState, function (key, newPresence) {
-      var currentPresence = state[key];
+      var currentPresence = state.presences[key];
       if (currentPresence) {
-        (function () {
-          var newRefs = newPresence.metas.map(function (m) {
-            return m.phx_ref;
-          });
-          var curRefs = currentPresence.metas.map(function (m) {
-            return m.phx_ref;
-          });
-          var joinedMetas = newPresence.metas.filter(function (m) {
-            return curRefs.indexOf(m.phx_ref) < 0;
-          });
-          var leftMetas = currentPresence.metas.filter(function (m) {
-            return newRefs.indexOf(m.phx_ref) < 0;
-          });
-          if (joinedMetas.length > 0) {
-            joins[key] = newPresence;
-            joins[key].metas = joinedMetas;
-          }
-          if (leftMetas.length > 0) {
-            leaves[key] = _this12.clone(currentPresence);
-            leaves[key].metas = leftMetas;
-          }
-        })();
+        var newRefs = newPresence.metas.map(function (m) {
+          return m.phx_ref;
+        });
+        var curRefs = currentPresence.metas.map(function (m) {
+          return m.phx_ref;
+        });
+        var joinedMetas = newPresence.metas.filter(function (m) {
+          return curRefs.indexOf(m.phx_ref) < 0;
+        });
+        var leftMetas = currentPresence.metas.filter(function (m) {
+          return newRefs.indexOf(m.phx_ref) < 0;
+        });
+        if (joinedMetas.length > 0) {
+          joins[key] = newPresence;
+          joins[key].metas = joinedMetas;
+        }
+        if (leftMetas.length > 0) {
+          leaves[key] = _this14.clone(currentPresence);
+          leaves[key].metas = leftMetas;
+        }
       } else {
         joins[key] = newPresence;
       }
     });
-    this.syncDiff(state, { joins: joins, leaves: leaves }, onJoin, onLeave);
+
+    state = this.syncDiff(state, { joins: joins, leaves: leaves }, onJoin, onLeave);
+
+    pendingDiffs.forEach(function (diff) {
+      state = _this14.syncDiff(state, { joins: diff.joins, leaves: diff.leaves }, diff.onJoin, diff.onLeave);
+    });
+    state.pendingDiffs = [];
+
+    return state;
   },
-  syncDiff: function syncDiff(state, _ref2, onJoin, onLeave) {
-    var joins = _ref2.joins;
-    var leaves = _ref2.leaves;
+  syncDiff: function syncDiff(currentState, _ref2, onJoin, onLeave) {
+    var joins = _ref2.joins,
+        leaves = _ref2.leaves;
+
+    var state = this.clone(currentState);
+    state.presences = state.presences || {};
+    state.pendingDiffs = state.pendingDiffs || [];
+
+    if (!state.synced) {
+      state.pendingDiffs.push({ joins: joins, leaves: leaves, onJoin: onJoin, onLeave: onLeave });
+      return state;
+    }
 
     if (!onJoin) {
-      onJoin = function () {};
+      onJoin = function onJoin() {};
     }
     if (!onLeave) {
-      onLeave = function () {};
+      onLeave = function onLeave() {};
     }
 
     this.map(joins, function (key, newPresence) {
-      var currentPresence = state[key];
-      state[key] = newPresence;
+      var currentPresence = state.presences[key];
+      state.presences[key] = newPresence;
       if (currentPresence) {
-        var _state$key$metas;
+        var _state$presences$key$;
 
-        (_state$key$metas = state[key].metas).unshift.apply(_state$key$metas, _toConsumableArray(currentPresence.metas));
+        var joinedRefs = state.presences[key].metas.map(function (m) {
+          return m.phx_ref;
+        });
+        var curMetas = currentPresence.metas.filter(function (m) {
+          return joinedRefs.indexOf(m.phx_ref) < 0;
+        });
+        (_state$presences$key$ = state.presences[key].metas).unshift.apply(_state$presences$key$, _toConsumableArray(curMetas));
       }
       onJoin(key, currentPresence, newPresence);
     });
     this.map(leaves, function (key, leftPresence) {
-      var currentPresence = state[key];
+      var currentPresence = state.presences[key];
       if (!currentPresence) {
         return;
       }
@@ -1122,13 +1646,15 @@ var Presence = exports.Presence = {
       });
       onLeave(key, currentPresence, leftPresence);
       if (currentPresence.metas.length === 0) {
-        delete state[key];
+        delete state.presences[key];
       }
     });
+    return state;
   },
-  list: function list(presences, chooser) {
+  list: function list(state, chooser) {
+    var presences = state.presences || {};
     if (!chooser) {
-      chooser = function (key, pres) {
+      chooser = function chooser(key, pres) {
         return pres;
       };
     }
@@ -1138,6 +1664,7 @@ var Presence = exports.Presence = {
     });
   },
 
+
   // private
 
   map: function map(obj, func) {
@@ -1150,21 +1677,25 @@ var Presence = exports.Presence = {
   }
 };
 
-// Creates a timer that accepts a `timerCalc` function to perform
-// calculated timeout retries, such as exponential backoff.
-//
-// ## Examples
-//
-//    let reconnectTimer = new Timer(() => this.connect(), function(tries){
-//      return [1000, 5000, 10000][tries - 1] || 10000
-//    })
-//    reconnectTimer.scheduleTimeout() // fires after 1000
-//    reconnectTimer.scheduleTimeout() // fires after 5000
-//    reconnectTimer.reset()
-//    reconnectTimer.scheduleTimeout() // fires after 1000
-//
-
-var Timer = (function () {
+/**
+ *
+ * Creates a timer that accepts a `timerCalc` function to perform
+ * calculated timeout retries, such as exponential backoff.
+ *
+ * @example
+ * let reconnectTimer = new Timer(() => this.connect(), function(tries){
+ *   return [1000, 5000, 10000][tries - 1] || 10000
+ * })
+ * reconnectTimer.scheduleTimeout() // fires after 1000
+ * reconnectTimer.scheduleTimeout() // fires after 5000
+ * reconnectTimer.reset()
+ * reconnectTimer.scheduleTimeout() // fires after 1000
+ *
+ * @param {Function} callback
+ * @param {Function} timerCalc
+ */
+
+var Timer = function () {
   function Timer(callback, timerCalc) {
     _classCallCheck(this, Timer);
 
@@ -1181,24 +1712,25 @@ var Timer = (function () {
       clearTimeout(this.timer);
     }
 
-    // Cancels any previous scheduleTimeout and schedules callback
+    /**
+     * Cancels any previous scheduleTimeout and schedules callback
+     */
 
   }, {
     key: "scheduleTimeout",
     value: function scheduleTimeout() {
-      var _this13 = this;
+      var _this15 = this;
 
       clearTimeout(this.timer);
 
       this.timer = setTimeout(function () {
-        _this13.tries = _this13.tries + 1;
-        _this13.callback();
+        _this15.tries = _this15.tries + 1;
+        _this15.callback();
       }, this.timerCalc(this.tries + 1));
     }
   }]);
 
   return Timer;
-})();
-
+}();
 
-})(typeof(exports) === "undefined" ? window.Phoenix = window.Phoenix || {} : exports);
+})));