Show HN: Build a React Native real-time chat app in 5 minutes (without Xcode)

Build a real-time chat app with Siphon

We’re going to build a simple real-time chat application using React Native.
Follow the quickstart tutorial first if
you haven’t yet set up your machine to use Siphon.

Install the command-line tool

Create a new Siphon app

Navigate to a suitable directory (anywhere is fine) and type the following
command to create a new app:

$ siphon create chat-app

You can call it anything you like, but for the rest of this tutorial we will refer to the app as chat-app.

A new directory containing the basic app template will be created on your local machine and the files will be pushed to our servers.

Open up the Siphon Sandbox app on your iOS device and tap the new app icon to run it.

Add a simple user interface

We’re going to alter the template app that we just created. Open up the file called
chat-app/index.ios.js in your favourite editor.

Lets add a minimal user interface ready for sending and receiving chat messages.
Remove the contents of that file and paste in the following code:

'use strict';

var React = require('react-native');
var {
} = React;

var App = React.createClass({
  getInitialState: function() {
    return {
      messages: []
  handleSubmit: function(event) {
    // Does nothing yet.
  render: function() {
    return (
   => {
              return {m}

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

Later we’ll use a websocket to connect to the server
and append incoming messages to the messages state, but
for now the UI is going to look quite empty.

Save the file and push your changes to Siphon:

$ siphon push

The app will reload itself and you should see something like this:

Receiving chat messages with a websocket

We’re going to use the WebSocket class
provided by React Native to send and receive chat messages.

First we will only log incoming messages to the console. Add these two methods to your
App class definition:

componentDidMount: function() {
  console.log('Connecting...'); = new WebSocket('wss://'); = function(event) {
    if ( != 'ping') {
      console.log('Received: ' +;
  }.bind(this); = function() {
    console.log('WebSocket error: ', arguments);
componentWillUnmount: function() {;

After the App component gets rendered, its going to
open up a socket and start printing incoming messages to the console.

Open up a separate terminal window and leave it streaming the logs from your app:

$ cd chat-app
$ siphon logs

Now save the file and switch back to the other terminal window to push the changes:

$ siphon push

You should see some log output in the new terminal window. If there are other Siphon users
currently chatting, you may see some incoming messages in the logs.

We set up a shared Node.js chat server at
When you’ve finished the app, you get to chat to everyone else taking this tutorial too!

Mutating state with incoming chat messages

Let’s make a small change so that incoming chat messages are displayed in the UI.
Replace the definition of componentDidMount with this one:

componentDidMount: function() { = new WebSocket('ws://'); = function(event) {
    if ( != 'ping') {
        messages: [].concat(this.state.messages)
  }.bind(this); = function() {
    console.log('WebSocket error: ', arguments);

Push your changes and run the app in the sandbox:

$ siphon push

Any incoming chat messages will now be displayed visually.

Sending chat messages

Lets hook up the component so that it
broadcasts its contents to the chat server when we hit send.

Replace the empty definition of handleSubmit with this one:

handleSubmit: function(event) {
  console.log('Sending: ' + event.nativeEvent.text);;
  this.refs.textInput.setNativeProps({text: ''});

Now when you hit send, it sends the message across the websocket that we created earlier and then
clears the contents of the .

Push your changes and open the app. It should look like this:

Complete source code for this app is
available on GitHub.

That’s the end of the tutorial, thanks for following along.

Next up

Read the FAQ

Original URL:  

Original article

Ask Slashdot: How To Get Into Machine Learning?

An anonymous reader writes: I know this is a vague question, but hoping to get some useful feedback anyway. I’m an experienced SW Engineer/Developer who is looking to get into the Machine Learning arena. I have an MS in CS and a solid 15 years of experience in a variety of areas, but no experience in Machine Learning.With that as background, my question is: What is the most time-efficient (and reasonable cost) way to:(1) Decide whether Machine Learning is for me and(2) Make myself employable in the field.An additional constraint is that I can’t afford to quit my full-time day job. Thanks.

Share on Google+

Read more of this story at Slashdot.

Original URL:  

Original article

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑

%d bloggers like this: