pubsub-js-client 0.6.1

package/README.md

@@ -0,0 +1,70 @@
+# pubsub-js-client
+
+This is the library to integrate with our new PubSub service.
+
+## Installation
+
+Make sure you are running node version `8.17.0` as more modern versions do not work.
+
+```bash
+make build
+```
+
+This generates `dist/pubsub.js` which is in AMD.
+
+## Browser parameters
+
+* `pubsub_log_level` Set this to `debug` to see all messages in console logs
+* `force_pubsub_tester` Set this to `false` to disable pubsub_tester messages
+
+## Client API
+
+##### Instantiation
+```javascript
+let driver = PubsubDriver.getInstance(environment); // environment can be "production" or "darklaunch"
+
+// Driver automatically connects to Pubsub on instantiation
+
+driver.on("connected", function () { ... });
+// Triggered when the driver first connects
+// Also triggered upon recovering from a disconnect
+driver.on("reconnected", function() { ... });
+// Triggered when the driver recovers from a disconnect
+driver.on("disconnected", function () { ... });
+// Triggered when the driver loses connection to the Pubsub
+// Driver automatically attempts to reconnect and re-listen on topics
+```
+##### Methods
+```javascript
+driver.Listen({
+  topic: "topic",
+  auth: "auth_token",
+  success: function (), // callback when Driver has successfully listened on the topic
+  failure: function (err), // callback when there was an error listening - either a permissions error, or a timeout
+  message: function (msg) // callback when a message is received on this topic
+});
+
+driver.Unlisten({
+  topic: "topic",
+  success: function (), // callback when the Driver has successfully unlistened on the topic
+  failure: function (err), // callback when there was an error unlistening
+  message: function (msg) // a reference to the callback used in the initial Listen(), to specify which callback to remove
+})
+```
+
+##### Example
+```javascript
+let driver = PubsubDriver.getInstance("production");
+driver.Listen({
+  topic: "pubsubtest.123456",
+  success: function () { console.log("successfully listened"); },
+  failure: function (err) { console.log("error listening: " + err); },
+  message: function (msg) { console.log("received message: " + msg); }
+});
+```
+```bash
+curl -v -X POST https://pubster.twitch.tv/publish -d '{"topics":["pubsubtest.123456"],"data":"arbitrary string"}'
+```
+
+##### Troubleshooting
+Try `let driver = PubsubDriver.default.getInstance("production");` (add `.default.`)

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "pubsub-js-client",
+  "version": "0.6.1",
+  "description": "Pubsub JS Client",
+  "main": "src/PubsubDriver.js",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.5.1",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.5.0",
+    "broccoli": "^0.16.3",
+    "broccoli-babel-transpiler": "^5.1.1",
+    "broccoli-cli": "^1.0.0",
+    "broccoli-es6modules": "^0.6.1",
+    "broccoli-funnel": "^0.2.3",
+    "broccoli-sourcemap-concat": "^0.4.4",
+    "jscs": "^1.13.1",
+    "jshint": "^2.9.1",
+    "webpack": "^1.12.13"
+  }
+}

package/src/IframeClient.js

@@ -0,0 +1,182 @@
+import EventsDispatcher from "./events";
+import logging from "./log";
+import util from "./util";
+import MyMap from "./mymap";
+
+const NONCE_LENGTH = 30;
+const RESPONSE_TIMEOUT = 30 * 1000; // 30 seconds
+const VERIFY_TIMEOUT = 1 * 1000; // 1 second
+const TWITCH_PROTOCOL = "pubsub";
+
+var logger = logging._getLogger("IframeClient");
+
+class IframeClient extends EventsDispatcher {
+  constructor (opts) {
+    super(opts);
+    this._parentUrl = opts.parentUrl;
+    this._pendingResponses = new MyMap();
+    this._listens = new EventsDispatcher();
+
+    window.addEventListener("message", this.receiveMessage.bind(this), false);
+  }
+
+  connect () {
+    window.parent.postMessage({
+      twitch_protocol: TWITCH_PROTOCOL,
+      type: "connect"
+    }, this._parentUrl);
+  }
+
+  verify () {
+    window.parent.postMessage({
+      twitch_protocol: TWITCH_PROTOCOL,
+      type: "verify"
+    }, this._parentUrl);
+    this._verifyTimeout = setTimeout(this._unverified.bind(this), VERIFY_TIMEOUT);
+  }
+
+  Listen (opts) {
+    // opts should include: topic, auth, success, failure, message
+    logger.debug("listening on " + opts.topic);
+    var nonce = this._generateNonce();
+    var msg = {
+      twitch_protocol: TWITCH_PROTOCOL,
+      type: "LISTEN",
+      nonce: nonce,
+      data: {
+        topics: [opts.topic],
+        auth_token: opts.auth
+      }
+    };
+    this._send(nonce, msg, opts);
+  }
+
+  Unlisten (opts) {
+    // opts should include: topic, success, failure, message
+    logger.debug("unlistening on " + opts.topic + "(" + this._listens.count(opts.topic) + " listeners)");
+
+    // If there are more than one callbacks waiting on this topic, we can just remove the specified one rather than sending an UNLISTEN
+    if (this._listens.count(opts.topic) > 1) {
+
+      if (opts.message) {
+        this._listens.off(opts.topic, opts.message);
+      }
+
+      if (opts.success) {
+        opts.success();
+      }
+
+      logger.debug("now have " + this._listens.count(opts.topic) + " listeners");
+      return;
+    }
+
+    var nonce = this._generateNonce();
+    var msg = {
+      twitch_protocol: TWITCH_PROTOCOL,
+      type: "UNLISTEN",
+      nonce: nonce,
+      data: {
+        topics: [opts.topic]
+      }
+    };
+    this._send(nonce, msg, opts);
+  }
+
+  _send (nonce, msg, opts) {
+    this._pendingResponses.set(nonce, {
+      timeout: setTimeout(this._onResponseTimeout.bind(this), RESPONSE_TIMEOUT, nonce),
+      topic: opts.topic,
+      auth: opts.auth,
+      message: msg,
+      callbacks: {
+        success: opts.success,
+        failure: opts.failure,
+        message: opts.message
+      }
+    });
+    window.parent.postMessage(msg, this._parentUrl);
+  }
+
+  receiveMessage (event) {
+    if (!event.data || event.data.twitch_protocol != TWITCH_PROTOCOL) {
+      return;
+    }
+    logger.debug("Received message: " + JSON.stringify(event.data));
+    switch (event.data.type) {
+    case "connected":
+      this._trigger("connected");
+      break;
+    case "disconnected":
+      this._trigger("disconnected");
+      break;
+    case "success":
+      this.handleResponse(true, event.data);
+      break;
+    case "failure":
+      this.handleResponse(false, event.data);
+      break;
+    case "message":
+      this.handleMessage(event.data.topic, event.data.message);
+      break;
+    case "verify":
+      this._verified();
+      break;
+    }
+  }
+
+  handleResponse (successful, resp) {
+    if (this._pendingResponses.has(resp.nonce)) {
+      var responseInfo = this._pendingResponses.get(resp.nonce);
+      logger.debug("ResponseInfo: " + JSON.stringify(responseInfo));
+      clearTimeout(responseInfo.timeout);
+      this._pendingResponses.remove(resp.nonce);
+
+      if (successful) {
+
+
+        if (responseInfo.callbacks.message) {
+          if (responseInfo.message.type === "LISTEN") {
+            this._listens.on(responseInfo.topic, responseInfo.callbacks.message, this);
+          } else if (responseInfo.message.type === "UNLISTEN") {
+            this._listens.off(responseInfo.topic, responseInfo.callbacks.message, this);
+          }
+        }
+
+        if (responseInfo.callbacks.success) {
+          responseInfo.callbacks.success();
+        }
+      } else {
+        if (responseInfo.callbacks.failure) {
+          responseInfo.callbacks.failure(resp.error);
+        }
+      }
+    }
+  }
+
+  handleMessage (topic, msg) {
+    logger.debug("received '" + msg + "' on topic " + topic);
+    this._listens._trigger(topic, msg);
+  }
+
+  _onResponseTimeout (nonce) {
+    logger.debug("response timed out: " + nonce);
+  }
+
+  _verified () {
+    logger.debug("Verified");
+    clearTimeout(this._verifyTimeout);
+    this._trigger("verified");
+  }
+
+  _unverified () {
+    window.removeEventListener("message", this.receiveMessage.bind(this), false);
+    this._trigger("unverified");
+  }
+
+  // Utility functions
+  _generateNonce () {
+    return util.generateString(NONCE_LENGTH);
+  }
+}
+
+export default IframeClient;

package/src/IframeHost.js

@@ -0,0 +1,174 @@
+import logging from "./log";
+
+const TWITCH_PROTOCOL = "pubsub";
+const ORPHAN_CHECK_INTERVAL = 10000;
+
+var logger = logging._getLogger("IframeHost");
+
+class IframeHost {
+  constructor (driver) {
+    this._driver = driver;
+    this._sources = [];
+    this._listeners = [];
+    this._driver.on("connected", this.handleConnected, this);
+    this._driver.on("disconnected", this.handleDisconnected, this);
+    window.addEventListener("message", this.receiveMessage.bind(this), false);
+
+    // Periodically check to see if we have any orphaned listeners
+    this._orphanedListenerCheckTimer = setInterval(this._checkOrphanedListeners.bind(this), ORPHAN_CHECK_INTERVAL);
+  }
+
+  destroy () {
+    clearInterval(this._orphanedListenerCheckTimer);
+  }
+
+  receiveMessage (event) {
+    if (!event.data || event.data.twitch_protocol != TWITCH_PROTOCOL || !event.source) {
+      return;
+    }
+    logger.debug("Received message: " + JSON.stringify(event.data));
+    switch (event.data.type) {
+    case "LISTEN":
+      this.handleListen(event.source, event.data.nonce, event.data.data);
+      break;
+    case "UNLISTEN":
+      this.handleUnlisten(event.source, event.data.nonce, event.data.data);
+      break;
+    case "connect":
+      this._sources.push(event.source);
+      this._driver.connect();
+      break;
+    case "verify":
+      event.source.postMessage({
+        twitch_protocol: TWITCH_PROTOCOL,
+        type: "verify"
+      }, "*");
+      break;
+    }
+  }
+
+  // Keeps track of which sources are listening to which topics
+  // Returns an object containing the source, topic, and onMessage callback
+  // If a listener already exists for the specified source and topic, returns null
+  _pushListener (source, topic) {
+    // If we've already got a listener for this source and topic we don't need to create another one
+    for (var i = 0; i < this._listeners.length; i++) {
+      if (this._listeners[i].source === source && this._listeners[i].topic === topic) {
+        return null;
+      }
+    }
+
+    var listener = {
+      source: source,
+      topic: topic,
+      message: function (msg) {
+        source.postMessage({twitch_protocol: TWITCH_PROTOCOL, type: "message", topic: topic, message: msg}, "*");
+      }
+    };
+
+    this._listeners.push(listener);
+
+    return listener;
+  }
+
+  // Untracks and returns the listener for the given source and topic
+  // If no listener is found for the specified source and topic, returns null
+  _popListener (source, topic) {
+    for (var i = 0; i < this._listeners.length; i++) {
+      if (this._listeners[i].source === source && this._listeners[i].topic === topic) {
+        return this._listeners.splice(i, 1)[0];
+      }
+    }
+
+    return null;
+  }
+
+  // Checks to see if any of the registered listeners have a source that has been deleted
+  // Calls Unlisten on any listeners that are found
+  _checkOrphanedListeners () {
+    for (var i = 0; i < this._listeners.length; i++) {
+      // source is a reference to the window that sent the postMessage
+      if (this._listeners[i].source.closed) {
+        this._cleanUpOrphanedListener(this._listeners.splice(i--, 1)[0]);
+      }
+    }
+  }
+
+  // Call Unlisten for the supplied listener with local logging as callback because the listener passed in has no source
+  _cleanUpOrphanedListener (listener) {
+    logger.debug("Cleaning up orphaned listener for topic: " + listener.topic);
+    this._driver.Unlisten({
+      topic: listener.topic,
+      success: (function () {
+        logger.debug("Success when cleaning up orphaned listener for topic: " + listener.topic);
+      }),
+      failure: (function (err) {
+        logger.debug("Error when cleaning up orphaned listener for topic: " + listener.topic + " Error: " + err);
+      }),
+      message: listener.message
+    });
+  }
+
+  handleListen (source, nonce, data) {
+    var listener = this._pushListener(source, data.topics[0]);
+
+    // We already have a listener for this source and topic so just send back the success message
+    if (!listener) {
+      source.postMessage({twitch_protocol: TWITCH_PROTOCOL, type: "success", nonce: nonce}, "*");
+      return;
+    }
+
+    this._driver.Listen({
+      topic: listener.topic,
+      auth: data.auth_token,
+      success: (function () {
+        source.postMessage({twitch_protocol: TWITCH_PROTOCOL, type: "success", nonce: nonce}, "*");
+      }),
+      failure: (function (err) {
+        source.postMessage({twitch_protocol: TWITCH_PROTOCOL, type: "failure", nonce: nonce, error: err}, "*");
+      }),
+      message: listener.message
+    });
+  }
+
+  handleUnlisten (source, nonce, data) {
+    var listener = this._popListener(source, data.topics[0]);
+
+    if (!listener) {
+      logger.debug("Failed to unlisten, could not find listener for topic " + data.topics[0]);
+      return;
+    }
+
+    this._driver.Unlisten({
+      topic: listener.topic,
+      auth: data.auth_token,
+      success: (function () {
+        source.postMessage({twitch_protocol: TWITCH_PROTOCOL, type: "success", nonce: nonce}, "*");
+      }),
+      failure: (function (err) {
+        source.postMessage({twitch_protocol: TWITCH_PROTOCOL, type: "failure", nonce: nonce, error: err}, "*");
+      }),
+      message: listener.message
+    });
+  }
+
+  handleConnected () {
+    for (var i = 0; i < this._sources.length; i++) {
+      this._sources[i].postMessage({
+        twitch_protocol: TWITCH_PROTOCOL,
+        type: "connected"
+      }, "*");
+    }
+  }
+
+  handleDisconnected () {
+    for (var i = 0; i < this._sources.length; i++) {
+      this._sources[i].postMessage({
+        twitch_protocol: TWITCH_PROTOCOL,
+        type: "disconnected"
+      }, "*");
+    }
+  }
+}
+
+export default IframeHost;

package/src/PubsubDriver.js

@@ -0,0 +1,177 @@
+
+import EventsDispatcher from "./events";
+import logging from "./log";
+import util from "./util";
+import IframeClient from "./IframeClient";
+import IframeHost from "./IframeHost";
+import WebsocketClient from "./WebsocketClient";
+import PubsubTest from "./PubsubTest";
+
+var logger = logging._getLogger("PubsubDriver");
+
+const SOCKET_CLOSED_RECONNECT_TIME = 1 * 1000; // 1 second
+const RESPONSE_TIMEOUT = 30 * 1000; // 30 seconds
+const ERR_RESPONSE_TIMEOUT = "response timeout";
+const NONCE_LENGTH = 30;
+const DEFER_TEST_TIME = 30 * 1000; // 30 seconds
+
+const twitchUrlRegexp = /^https?:\/\/([\w-]+\.)*twitch\.(tv|tech)(:\d+)?\/.*$/;
+
+var pctTester = 0.0;
+
+class PubsubDriver extends EventsDispatcher {
+
+  constructor (env) {
+    // opts should include: environment
+    super(env);
+
+    this._env = util.urlParams.pubsub_environment || env;
+
+    this._clientReady = false;
+    this._hasDisconnected = false;
+    this._queuedRequests = [];
+
+    this._numDisconnects = 0;
+
+    if (util.inIframe() && twitchUrlRegexp.test(document.referrer)) {
+      // check parent location, if ok, create iframe with specified domain
+      logger.debug("Driver is in an iframe");
+      this._client = new IframeClient({
+        parentUrl: document.referrer
+      });
+      this._clientType = "iframe-verified";
+    } else {
+      logger.debug("Driver is not in an iframe");
+      this._client = new WebsocketClient({
+        env: this._env
+      });
+      this._iframeHost = new IframeHost(this._client);
+      this._clientType = "ws";
+    }
+
+    // Pubsub Tester
+    if (util.urlParams.force_pubsub_tester === "true") {
+      pctTester = 1.0;
+    } else if (util.urlParams.force_pubsub_tester === "false") {
+      pctTester = 0.0;
+    }
+    if (Math.random() < pctTester) {
+      // Defer starting the test to avoid wasting resources during page load.
+      window.setTimeout(this.runTest.bind(this), DEFER_TEST_TIME);
+    }
+
+    this._client.on("unverified", this._clientUnverified, this);
+    this._client.on("verified", this._clientVerified, this);
+    this._client.verify();
+  }
+
+  runTest () {
+    this._tester = new PubsubTest({
+      env: this._env,
+      driver: this
+    });
+  }
+
+  connect () {
+    // return this._client.connect();
+  }
+
+  Listen (opts) {
+    if (this._clientReady) {
+      this._client.Listen(opts);
+    } else {
+      this._queuedRequests.push({type: "LISTEN", opts: opts});
+    }
+  }
+
+  Unlisten (opts) {
+    if (this._clientReady) {
+      this._client.Unlisten(opts);
+    } else {
+      this._queuedRequests.push({type: "UNLISTEN", opts: opts});
+    }
+  }
+
+  simulateReceivedMessage(topic, message) {
+    const msg = {
+      data: {message, topic},
+      type: "MESSAGE-SIMULATED"
+    };
+    this._client._onMessage(msg);
+  }
+
+  _flushQueuedRequests () {
+    logger.debug("Flushing " + this._queuedRequests.length + " queued requests");
+    while (this._queuedRequests.length > 0) {
+      var req = this._queuedRequests.shift();
+      switch (req.type) {
+      case "LISTEN":
+        this._client.Listen(req.opts);
+        break;
+      case "UNLISTEN":
+        this._client.Unlisten(req.opts);
+        break;
+      }
+    }
+  }
+
+  _clientConnected () {
+    logger.debug("Client connected");
+    this._client.on("disconnected", this._clientDisconnected, this);
+    this._trigger("connected");
+    if (this._hasDisconnected) {
+      this._trigger("reconnected");
+    }
+    this._clientReady = true;
+    this._flushQueuedRequests();
+  }
+
+  _clientDisconnected () {
+    logger.debug("Client disconnected");
+    this._trigger("disconnected");
+    this._clientReady = false;
+    this._numDisconnects += 1;
+    this._hasDisconnected = true;
+  }
+
+  _clientVerified () {
+    logger.debug("Client verified (type = " + this._clientType + ")");
+    this._client.on("connected", this._clientConnected, this);
+    this._client.connect();
+  }
+
+  _clientUnverified () {
+    // only triggered by iframe clients
+    logger.debug("Unverified IframeClient");
+    this._client.off("verified", this._clientVerified, this);
+    this._client.off("unverified", this._clientUnverified, this);
+
+    this._client = new WebsocketClient({
+        env: this._env
+      });
+    this._clientType = "iframe-unverified";
+
+    this._client.on("unverified", this._clientUnverified, this);
+    this._client.on("verified", this._clientVerified, this);
+    this._client.verify();
+  }
+}
+
+window.__Twitch__pubsubInstances = window.__Twitch__pubsubInstances || {
+  production: null,
+  staging: null,
+  darklaunch: null
+};
+
+function getInstance(env) {
+  if (env !== "production" && env !== "staging" && env !== "darklaunch") {
+    throw "Invalid Pubsub instance environment";
+  }
+  if (window.__Twitch__pubsubInstances[env] === null) {
+    // create driver
+    window.__Twitch__pubsubInstances[env] = new PubsubDriver(env);
+  }
+  return window.__Twitch__pubsubInstances[env];
+}
+
+export default {getInstance};