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 Pho...
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
240
Coding Challenge Advent of Code 2019
ma2gedev
0
120
Developer Experience in GraphQL Schema-first Development
ma2gedev
0
2.2k
Dependency Inversion Principle in Keyboard Firmware
ma2gedev
0
450
OSSの歩き方 / Walking with OSS
ma2gedev
10
2.5k
GraphQL 開発で必要になったこと / What we needed for GraphQL development
ma2gedev
0
1.1k
キーボードをカスタムしてプログラミング環境を良くした話 / Improved programming environment with customizing keybords
ma2gedev
0
1.3k
Translating "Erlang in Anger" with Erlang & Elixir community members
ma2gedev
0
2.8k
Dive into Elixir v1.6 Code Formatter
ma2gedev
1
160
Other Decks in Programming
See All in Programming
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
技術を根付かせる / How to make technology take root
kubode
1
240
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
Software Architecture
hschwentner
6
2.1k
『品質』という言葉が嫌いな理由
korimu
0
160
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
Unity Android XR入門
sakutama_11
0
140
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Agile that works and the tools we love
rasmusluckow
328
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Adopting Sorbet at Scale
ufuk
74
9.2k
BBQ
matthewcrist
86
9.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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