Guide to build a realtime application using Phoenix on Heroku

#m3dev M3 Tech Talk #32
Guide to build a realtime application using Phoenix on Heroku

Transcript

1. Guide to build a realtime application using Phoenix on Heroku
2. Self introduction • ma2ge @Twitter • ma2gedev @GitHub
3. Requirement • Erlang 17.0+ • Elixir v1.0.1+
4. Phoenix Framework Web application framework for Elixir I've experienced that Rails with Realtime feature
5. 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
6. Create a Phoenix application $ mix phoenix.new phoenix_sample ../phoenix_sample $ cd ../phoenix_sample $ git init $ git add . $ git commit -m 'initial commit'
7. Running on local $ mix do deps.get, compile $ mix phoenix.start • do not forget to commit $ git add . $ git commit -m 'running on local'
8. Setup for Heroku $ Heroku create --buildpack \ "https://github.com/HashNuke/heroku-buildpack-elixir.git"
9. Create 2 files need for Heroku
10. 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)
11. Procfile web: mix phoenix.start
12. Running on Heroku $ git add -u $ git commit -m 'configuration for heroku' $ git push heroku master $ heroku open
13. Implement chat with websocket
14. Phoenix part • Create Channel • Mount Socket and register Channel
15. 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
16. Mount Socket and register Channel add the following line to web/ router.ex use Phoenix.Router.Socket, mount: "/ws" channel "channel", PhoenixSample.Chat
17. Html and JS side • Include some js files • Add message box • Write some js codes
18. Include some js files web/templates/layout/ application.html.eex • Need to download jquery <script src="/js/jquery.js" type="text/javascript"></script> <script src="/js/phoenix.js" type="text/javascript"></script> <script src="/js/application.js" type="text/javascript"></script>
19. Add message box web/templates/page/ index.html.eex <div class="row"> <input type="text" id="message-box" placeholder="any comments?"/> <div id="all-messages"></div> </div>
20. 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('<p>' + data['message'] + '</p>'); }); }); });
21. Demo http://goo.gl/dDDwXK
22. See Also • code • https://github.com/ma2gedev/ phoenix_sample • Phoenix • https://github.com/phoenixframework/ phoenix
23. 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
24. See Also • Elixir ͷΠϯετʔϧ&Ξοϓσʔτ on Mac • http://qiita.com/ma2ge/items/ e8ad02d604a9c05cb6f6
25. Enjoy Elixir and Phoenix life