Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Guide to build a realtime application using Phoenix on Heroku
Search
Takayuki Matsubara
October 31, 2014
Programming
2
2.3k
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
Takayuki Matsubara
October 31, 2014
Tweet
Share
More Decks by Takayuki Matsubara
See All by Takayuki Matsubara
Rails Web Development with AWS Lambda
ma2gedev
0
160
Coding Challenge Advent of Code 2019
ma2gedev
0
100
Developer Experience in GraphQL Schema-first Development
ma2gedev
0
2.1k
Dependency Inversion Principle in Keyboard Firmware
ma2gedev
0
360
OSSの歩き方 / Walking with OSS
ma2gedev
10
2.4k
GraphQL 開発で必要になったこと / What we needed for GraphQL development
ma2gedev
0
950
キーボードをカスタムしてプログラミング環境を良くした話 / Improved programming environment with customizing keybords
ma2gedev
0
1.1k
Translating "Erlang in Anger" with Erlang & Elixir community members
ma2gedev
0
2.7k
Dive into Elixir v1.6 Code Formatter
ma2gedev
1
140
Other Decks in Programming
See All in Programming
TypeScript Custom GitHub Action Development Tips
peaceiris
4
1k
RubyGems on ruby.wasm
kateinoigakukun
0
640
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
1
390
Hi, have you met Kotlin Multiplatform? | Kotlin User Group Berlin
prof18
1
130
ERB, ancient and future
m_seki
3
200
The Frontend Rubyist
largo
0
470
20240525_社内でPower Platform勉強会開いたら900人来た話
ponponmikankan
0
540
Good intentions gone bad
evaferreira
0
100
Kubernetes Code Contribution入門
bells17
3
700
Upgrading Legacy to the Latest PHP Version
afilina
PRO
0
160
Reactive Java REST APIs, FTW? Virtual JUG 2024
mraible
PRO
0
390
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
120
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
30
4.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
GitHub's CSS Performance
jonrohan
1025
450k
Building Flexible Design Systems
yeseniaperezcruz
321
37k
How GitHub (no longer) Works
holman
305
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
The Cost Of JavaScript in 2023
addyosmani
22
4k
The Cult of Friendly URLs
andyhume
74
5.7k
RailsConf 2023
tenderlove
9
610
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5.1k
Transcript
Guide to build a realtime application using Phoenix on Heroku
Self introduction • ma2ge @Twitter • ma2gedev @GitHub
Requirement • Erlang 17.0+ • Elixir v1.0.1+
Phoenix Framework Web application framework for Elixir I've experienced that
Rails with Realtime feature
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
Create a Phoenix application $ mix phoenix.new phoenix_sample ../phoenix_sample $
cd ../phoenix_sample $ git init $ git add . $ git commit -m 'initial commit'
Running on local $ mix do deps.get, compile $ mix
phoenix.start • do not forget to commit $ git add . $ git commit -m 'running on local'
Setup for Heroku $ Heroku create --buildpack \ "https://github.com/HashNuke/heroku-buildpack-elixir.git"
Create 2 files need for Heroku
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)
Procfile web: mix phoenix.start
Running on Heroku $ git add -u $ git commit
-m 'configuration for heroku' $ git push heroku master $ heroku open
Implement chat with websocket
Phoenix part • Create Channel • Mount Socket and register
Channel
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
Mount Socket and register Channel add the following line to
web/ router.ex use Phoenix.Router.Socket, mount: "/ws" channel "channel", PhoenixSample.Chat
Html and JS side • Include some js files •
Add message box • Write some js codes
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>
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>
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>'); }); }); });
Demo http://goo.gl/dDDwXK
See Also • code • https://github.com/ma2gedev/ phoenix_sample • Phoenix •
https://github.com/phoenixframework/ phoenix
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
See Also • Elixir ͷΠϯετʔϧ&Ξοϓσʔτ on Mac • http://qiita.com/ma2ge/items/ e8ad02d604a9c05cb6f6
Enjoy Elixir and Phoenix life