The Proof of Concept Project

Two weeks ago at Infinite Red, we had a client who wanted a proof of concept built.

With a modest budget and aggressive timeline, they had a few requirements:

Build some screens so we can use them in real life. Show us how a React Native app is built so our team can continue on afterwards. Dig deeper into WebSockets because one core feature is chat.

Our team is heavily invested into Elixir and Phoenix (which speaks WebSockets fluently), but I spend most of my time on mobile dev. Since they’ve been raving about Phoenix, I thought: what a great opportunity to get my feet wet.

What is Phoenix?

Phoenix is a framework for building modern, web-based, server-side applications.

Danger! 58 minutes of awesome!

Included with Phoenix are some client libraries to plug in to the apps you write. For React Native we have these options:

I’d prefer straight-up JS which saves the overhead of writing 2 platform-specific wrappers. Platform components are probably faster, but chat is mostly about waiting on IO and not CPU.

Since the JS version worked fine in React Native, I didn’t end up exploring the platform specific client libraries.

Onward.

Running a Server

For this project, we didn’t have the budget to write a chat server. So I had to find one.

Luckily, Chris McCord (of Phoenix fame) wrote a sample chat server that does exactly what we needed for our prototype. I was able to clone it, and fire it up locally.

For our needs, his code worked right out of the box!

Using the Phoenix JS Client

The gist is this:

Open a socket (to a server) Open a channel (to a room) and join it. Listen for and send messages.

Now for some code.