Merge pull request #17 from kadirahq/fix-js-debug-issue

Remove socket.io so ws works without js debugging

README.md

@@ -80,8 +80,6 @@ In order to work with React Native Storybook, one or more devices should be conn
 ### iOS simulator
 
 - Start with `react-native run-ios`
-- Open the debugger menu `CMD+D`
-- Enable remote javascript debugging
 
 ### Android emulator
 
@@ -90,14 +88,10 @@ In order to work with React Native Storybook, one or more devices should be conn
 - Forward port 8081 `adb reverse tcp:8081 tcp:8081`
 - Forward port 9001 `adb reverse tcp:9001 tcp:9001`
 - Start with `react-native run-android`
-- Open the debugger menu `adb shell input keyevent 82`
-- Enable remote javascript debugging
 
 ### Android device
 
 - Connect your device with adb
 - Forward port 8081 `adb reverse tcp:8081 tcp:8081`
 - Forward port 9001 `adb reverse tcp:9001 tcp:9001`
 - Start with `react-native run-android`
-- Open the debugger menu `adb shell input keyevent 82`
-- Enable remote javascript debugging

dist/client/index.js

@@ -40,6 +40,6 @@ function PreviewComponent(_ref) {
   var host = _ref$host === undefined ? 'localhost' : _ref$host;
 
   return function () {
-    return _react2.default.createElement(_Preview2.default, { address: host + ':' + port, stories: _configure2.stories });
+    return _react2.default.createElement(_Preview2.default, { address: 'ws://' + host + ':' + port, stories: _configure2.stories });
   };
 }

dist/client/preview/components/Preview.js

@@ -30,54 +30,86 @@ var Preview = function (_Component) {
 
     _classCallCheck(this, Preview);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    for (var _len = arguments.length, props = Array(_len), _key = 0; _key < _len; _key++) {
+      props[_key] = arguments[_key];
     }
 
-    var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Preview)).call.apply(_Object$getPrototypeO, [this].concat(args)));
+    var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Preview)).call.apply(_Object$getPrototypeO, [this].concat(props)));
 
     _this.socket = null;
     _this.state = { selection: null };
     return _this;
   }
 
   _createClass(Preview, [{
+    key: 'selectStory',
+    value: function selectStory(_ref) {
+      var kind = _ref.kind;
+      var story = _ref.story;
+
+      this.setState({ selection: { kind: kind, story: story } });
+    }
+  }, {
+    key: 'sendInit',
+    value: function sendInit() {
+      this.socket.send(JSON.stringify({ type: 'init', data: { clientType: 'device' } }));
+    }
+  }, {
+    key: 'sendSetStories',
+    value: function sendSetStories() {
+      var stories = this.props.stories.dump();
+      // FIXME this will send stories list to all browser clients
+      //       these clients may or may not re render the list but
+      //       anyways it's best not to send unnecessary messages
+      this.socket.send(JSON.stringify({ type: 'setStories', data: { stories: stories } }));
+    }
+  }, {
+    key: 'handleMessage',
+    value: function handleMessage(message) {
+      switch (message.type) {
+        case 'getStories':
+          this.sendSetStories();
+          break;
+        case 'selectStory':
+          this.selectStory(message.data);
+          break;
+        default:
+          console.error('unknown message type:', message.type, message);
+      }
+    }
+  }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
       var _this2 = this;
 
-      // TODO use an official release of socket.io-client instead
-      // used a patched socket-io client until following happens
-      // - engine.io-parser releases a new version after this pull-request
-      //   https://github.com/socketio/engine.io-parser/pull/55
-      // - socket.io-client uses the patched engine.io-parser and releases
-      //   https://github.com/socketio/socket.io-client/issues/945
-      var io = require('../../_vendor/patched-socket.io.js');
-
       // new connection
-      this.socket = io(this.props.address, { jsonp: false });
+      this.socket = new WebSocket(this.props.address);
 
       // initial setup
-      this.socket.emit('init', { type: 'device' });
-      this.socket.emit('setStories', { stories: this.props.stories.dump() });
+      this.socket.onopen = function () {
+        _this2.sendInit();
+        _this2.sendSetStories();
+      };
 
       // listen for events
-      this.socket.on('getStories', function (msg) {
-        // FIXME this will send stories list to all browser clients
-        //       these clients may or may not re render the list but
-        //       anyways it's best not to send unnecessary messages
-        _this2.socket.emit('setStories', { stories: _this2.props.stories.dump() });
-      });
-      this.socket.on('selectStory', function (msg) {
-        var kind = msg.kind;
-        var story = msg.story;
+      this.socket.onmessage = function (e) {
+        var message = JSON.parse(e.data);
+        _this2.handleMessage(message);
+      };
 
-        _this2.setState({ selection: { kind: kind, story: story } });
-      });
+      // an error occurred
+      this.socket.onerror = function (e) {
+        console.warn('websocket connection error', e.message);
+      };
+
+      // connection closed
+      this.socket.onclose = function (e) {
+        console.warn('websocket connection closed', e.code, e.reason);
+      };
 
       // listen for story changes
       this.props.stories.on('change', function () {
-        _this2.socket.emit('setStories', { stories: _this2.props.stories.dump() });
+        _this2.sendSetStories();
       });
     }
   }, {

dist/server/index.js

@@ -16,9 +16,9 @@ var _express = require('express');
 
 var _express2 = _interopRequireDefault(_express);
 
-var _socket = require('socket.io');
+var _ws = require('ws');
 
-var _socket2 = _interopRequireDefault(_socket);
+var _ws2 = _interopRequireDefault(_ws);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -30,29 +30,35 @@ app.use(_express2.default.static(_path2.default.join(__dirname, 'public')));
 //  ------------------------------------------------------------------------  //
 
 var server = _http2.default.Server(app);
-var io = (0, _socket2.default)(server);
-
-io.on('connection', function (socket) {
-  socket.on('init', function (msg) {
-    var clientType = msg.type;
-    socket.join(clientType);
-
-    // device ==> browser
-    if (clientType === 'device') {
-      ['setStories', 'addAction', 'selectStory', 'applyShortcut'].forEach(function (type) {
-        socket.on(type, function (m) {
-          return io.sockets.in('browser').emit(type, m);
-        });
-      });
-    }
-
-    // browser ==> device
-    if (clientType === 'browser') {
-      ['getStories', 'selectStory'].forEach(function (type) {
-        socket.on(type, function (m) {
-          return io.sockets.in('device').emit(type, m);
-        });
+var wss = _ws2.default.Server({ server: server });
+
+wss.on('connection', function (socket) {
+  console.log('> new websocket connection');
+  socket.data = { clientType: null };
+
+  socket.on('message', function (data) {
+    try {
+      var message = JSON.parse(data);
+
+      // clients must init first
+      if (!socket.data.clientType) {
+        if (message.type === 'init') {
+          socket.data.clientType = message.data.clientType;
+          console.log('> initialize new "' + socket.data.clientType + '"');
+          return;
+        } else {
+          throw new Error('client must init first');
+        }
+      }
+
+      // forward
+      wss.clients.filter(function (client) {
+        return client.data.clientType !== socket.data.clientType;
+      }).forEach(function (client) {
+        return client.send(data);
       });
+    } catch (e) {
+      socket.close();
     }
   });
 });