Slide 1

Slide 1 text

Guide to build a realtime application using Phoenix on Heroku

Slide 2

Slide 2 text

Self introduction • ma2ge @Twitter • ma2gedev @GitHub

Slide 3

Slide 3 text

Requirement • Erlang 17.0+ • Elixir v1.0.1+

Slide 4

Slide 4 text

Phoenix Framework Web application framework for Elixir I've experienced that Rails with Realtime feature

Slide 5

Slide 5 text

Setup a Phoenix environment $ git clone https://github.com/phoenixframework/phoenix.git # $ git checkout v0.4.1 $ cd phoenix $ mix do deps.get, compile ! v0.5.0 does not work on Heroku choose v0.4.1 or edge

Slide 6

Slide 6 text

Create a Phoenix application $ mix phoenix.new phoenix_sample ../phoenix_sample $ cd ../phoenix_sample $ git init $ git add . $ git commit -m 'initial commit'

Slide 7

Slide 7 text

Running on local $ mix do deps.get, compile $ mix phoenix.start • do not forget to commit $ git add . $ git commit -m 'running on local'

Slide 8

Slide 8 text

Setup for Heroku $ Heroku create --buildpack \ "https://github.com/HashNuke/heroku-buildpack-elixir.git"

Slide 9

Slide 9 text

Create 2 files need for Heroku

Slide 10

Slide 10 text

elixir_buildpack.config # Erlang version erlang_version=17.2 # Elixir version elixir_version=1.0.1 # Always rebuild from scratch on every deploy? always_rebuild=false # Export heroku config vars # config_vars_to_export=(DATABASE_URL)

Slide 11

Slide 11 text

Procfile web: mix phoenix.start

Slide 12

Slide 12 text

Running on Heroku $ git add -u $ git commit -m 'configuration for heroku' $ git push heroku master $ heroku open

Slide 13

Slide 13 text

Implement chat with websocket

Slide 14

Slide 14 text

Phoenix part • Create Channel • Mount Socket and register Channel

Slide 15

Slide 15 text

Create Channel web/channels/chat.ex defmodule PhoenixSample.Chat do use Phoenix.Channel def join(socket, "chat", message) do {:ok, socket} end def event(socket, "message", data) do IO.puts data["message"] broadcast socket, "broadcast_message", %{message: data["message"]} socket end end

Slide 16

Slide 16 text

Mount Socket and register Channel add the following line to web/ router.ex use Phoenix.Router.Socket, mount: "/ws" channel "channel", PhoenixSample.Chat

Slide 17

Slide 17 text

Html and JS side • Include some js files • Add message box • Write some js codes

Slide 18

Slide 18 text

Include some js files web/templates/layout/ application.html.eex • Need to download jquery

Slide 19

Slide 19 text

Add message box web/templates/page/ index.html.eex

Slide 20

Slide 20 text

Write some js codes priv/static/js/application.js $(function() { var socket = new Phoenix.Socket("/ws"); var $messageBox = $("#message-box"); var $allMessages = $("#all-messages"); socket.join("channel", "chat", {}, function(channel) { $messageBox.keypress(function(e) { if (e.which === 13) { e.preventDefault(); channel.send("message", { message: $messageBox.val() }); $messageBox.val(""); } }); channel.on("broadcast_message", function(data) { console.log("message: " + data['message']); $allMessages.prepend('

' + data['message'] + '

'); }); }); });

Slide 21

Slide 21 text

Demo http://goo.gl/dDDwXK

Slide 22

Slide 22 text

See Also • code • https://github.com/ma2gedev/ phoenix_sample • Phoenix • https://github.com/phoenixframework/ phoenix

Slide 23

Slide 23 text

See Also • Deploy Phoenix Application to Heroku • http://learnelixir.com/blog/2014/10/15/ deploy-phonenix-application-to-heroku- server/ • Phoenix Λ heroku Ͱಈ͔͢ • http://qiita.com/ma2ge/items/ cfe17e02f593bb55b084

Slide 24

Slide 24 text

See Also • Elixir ͷΠϯετʔϧ&Ξοϓσʔτ on Mac • http://qiita.com/ma2ge/items/ e8ad02d604a9c05cb6f6

Slide 25

Slide 25 text

Enjoy Elixir and Phoenix life