A sample chat app using React Native and Phoenix.
JavaScript Elixir Objective-C Other
Switch branches/tags
Nothing to show
Clone or download
Failed to load latest commit information.
ChatClient The RN chat client. Feb 13, 2016
ChatServer Turn off the PING message. Feb 13, 2016
images Added a screenshot image. Feb 13, 2016
LICENSE Initial commit Feb 13, 2016
README.md Updated the README one more time. Feb 15, 2016


What is this Foul Sorcery?

Here's an example of using React Native to talk to a Phoenix server with WebSockets.


The Blog Post

For more background and some more in-depth commentary, check out my blog post that goes with this repo.


About The Client

Since this is just a sample, I'm going to pretend errors and timeouts don't exist.

In the code:

  • Phoenix.js - the official JS client that ships with Phoenix framework.
  • Chat.js - a silly wrapper around the Phoenix sockets and channel interfaces.
  • Root.jsx - the user interface

The UI revolves around a hilariously fantastic 3rd party component called Gifted Messenger:


About The Server

The server is Chris McCord's example. The only change I made was to turn off the server-generated PING message every 5 seconds.


I just included it here for convenience. I ghetto-forked it as of 02bbbc8a295542146aef4e347dcbdc5fd0aadd69 on Feb 13, 2016. He does a great job of keeping it up to date, and you should use his for your own adventures.

Running The Server

Make sure you've installed Elixir 1.2.2+.

  • cd ChatServer
  • mix deps get
  • npm install (recommended: for a web version of the client)
  • grab a coffee
  • mix phoenix.server

After a quick 1-time compile, your server is now up & running. If you installed the web client then browser to http://localhost:4000

Running The Client

Make sure you have React Native 0.19+ installed on your ride.

  • cd ChatClient
  • npm install
  • grab a coffee
  • react-native run-ios or react-native run-android

If you're running android, you might need to reverse map some ports to get to the chat server by running

  • $ANDROID_HOME/platform-tools/adb reverse tcp:4000 tcp:4000