Phoenix Framework

I recently started worked on Phoenix, an Elixir Web Framework targeting full-featured, fault tolerant applications with realtime functionality.

Here we interactively build an Elixir chat application from scratch using Phoenix’s new Websocket layer that landed in 0.2.2.

The realtime layer supports channel/topic pubsubbing, multiplexing, and ships with a javascript layer for easy client integration. The PubSub layer is based on pg2, allowing Phoenix channels to be run distributively across your entire cluster. Fault tolerance is achieved through automatic node failover.

Demo Application: phoenixchat.herokuapp.com

Example Usage

Elixir - Phoenix Router / Channel

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 defmodule Chat . Router do use Phoenix . Router use Phoenix . Router . Socket , mount: "/ws" plug Plug . Static , at: "/static" , from: :chat get "/" , Chat . Controllers . Pages , :index , as: :page channel "rooms" , Chat . Channels . Rooms end defmodule Chat . Channels . Rooms do use Phoenix . Channel def join ( socket , "lobby" , message ) do IO . puts "JOIN #{ socket . channel } : #{ socket . topic } " broadcast socket , "user:entered" , username: message [ "username" ] { :ok , socket } end def event ( "new:message" , socket , message ) do broadcast socket , "new:message" , content: message [ "content" ], username: messages [ "username" ] socket end end

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 var socket = new Phoenix . Socket ( "ws://" + location . host + "/ws" ); var $messages = $ ( "#messages" ); var $messageInput = $ ( "#message-input" ); var $usernameInput = $ ( "#username" ); socket . join ( "rooms" , "lobby" , {}, function ( chan ){ chan . on ( "user:entered" , function ( message ){ $messages . append ( "<br/>[" + message . username + "] entered" ) }); chan . on ( "new:message" , function ( msg ){ $messages . append ( "<br/>[" + msg . username + "] " + msg . content ) }); $messageInput . off ( "keypress" ). on ( "keypress" , function ( e ){ if ( e . keyCode == 13 ){ chan . send ( "new:message" , { content : $messageInput . val (), username : $usernameInput . val () }); $messageInput . val ( "" ); } }); });

Markup