Hercules React Native Server Side - Server Side Proof of Concept

This challenge will be the start of a new project involving React Native.  The eventual goal is to have a way to build React Native apps for Hercule's embedded devices that communicate with the device over websockets.  The client has existing technology for this websocket communication, and a specific JSON-formatted protocol for messages to and from the server.  They would like to see if we can build a React Native piece that sits on a server and communicates with clients, sending them messages to draw the React Native components.

Basically, we are going to stream apps to a client and update the client based on actions that raise events from the client to the server.

Background

Running a websocket communication between client and a server in React Native does appear to be possible, but it doesn't appear to be well documented.  See the last couple minutes of this video where the presenter mentions it briefly:

https://www.youtube.com/watch?v=hDviGU-57lU

Requirements

The goal of this challenge is to implement a proof of concept with these simple requirements:

1.  The proof of concept will be implemented in React Native and deployed on Heroku
2.  The server will accept a web socket connection from the client
3.  The client will send a JSON formatted message to the server (onConnect below)
4.  The server will reply back with some JSON formatted details of a screen to draw
5.  The client will mock drawing the screen 
6.  The user can press a button and send an event to the server
7.  The server will respond back with updates to draw
8.  The client will mock drawing the updates

Note -  No actual drawing is required.  It's enough for the client to be a simple command line application that just outputs the JSON messages to the command line and accepts key presses as input.  The actual drawing and translation of the messages from React to the client's protocol will come later.  

Server

The server side "screens" will be implemented in React Native, using React classes.  Please pick a couple to use, like View, Text, and Switch.  They will just be sent to the client in JSON format, but the actual parameters don't matter at this point - we just want to see the communication between the client and server working, with serialized React screens being sent.

For instance, if a React Native app is defined like this:

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>

<TextInput
    keyboardType="default"
    returnKeyType="done"
    onKeyPress={this.handleKeyDown}
    placeholder="Enter text here..."
/>

    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

handleKeyDown: function(e) {
    console.log(e.nativeEvent.key);
},

The server might send a JSON message to the websocket client that looks like this.  This is just a suggested format - the actual format just has to encapsulate a good view and be readable for review.  The true format will come in a later challenge, so all we're doing now is validating.

{
    "app": {
        "name": "Hello World",
        "view": {
            "text": "Hello World!",
            "textInput": "Enter text here"
        }
    }
}

Client

The client will open a connection to a websocket on the server.  Once the connection is open, it will send a simple message, like this:

{
    "onConnect": {
        "name": "React client1"
    }
}

The server will respond with the view details described above.

Then, the client can send an event, like a key press.  The event could look something like this:

{
    "event": {
        "type": "keyDown",
        "key": "Enter"
    }
}���   

At which point the handleKeyDown callback would be called on the server.  An update to the text should then be sent from the server back to the client to complete the full loop.  This update to the text can just be something like below, but it should be fully implemented in React Native and then translated down for the client.

{
    "update": {
        "text": "Updated text"
    }
}

Submission

Your submission should just be the codebase with a README documenting:

1.  How to deploy the server-side to Heroku
2.  How to build and test the client side and see the messages being passed
3.  What the React Native app looks like

A video is required, but it only needs to cover the validation, not the setup.  Having the setup details only in the README is fine.

Links:

https://facebook.github.io/react-native/���

https://www.youtube.com/watch?v=hDviGU-57lU

Final Submission Guidelines

Please see above