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
310
Coding Challenge Advent of Code 2019
ma2gedev
0
140
Developer Experience in GraphQL Schema-first Development
ma2gedev
0
2.3k
Dependency Inversion Principle in Keyboard Firmware
ma2gedev
0
500
OSSの歩き方 / Walking with OSS
ma2gedev
10
2.6k
GraphQL 開発で必要になったこと / What we needed for GraphQL development
ma2gedev
0
1.2k
キーボードをカスタムしてプログラミング環境を良くした話 / Improved programming environment with customizing keybords
ma2gedev
0
1.3k
Translating "Erlang in Anger" with Erlang & Elixir community members
ma2gedev
0
2.9k
Dive into Elixir v1.6 Code Formatter
ma2gedev
1
180
Other Decks in Programming
See All in Programming
CSC305 Lecture 05
javiergs
PRO
0
210
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.7k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
690
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
140
止められない医療アプリ、そっと Swift 6 へ
medley
1
150
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
120
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
210
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.5k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
800
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.2k
CSC305 Lecture 02
javiergs
PRO
1
270
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
980
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Invisible Side of Design
smashingmag
301
51k
Practical Orchestrator
shlominoach
190
11k
Why Our Code Smells
bkeepers
PRO
339
57k
A better future with KSS
kneath
239
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
How GitHub (no longer) Works
holman
315
140k
It's Worth the Effort
3n
187
28k
Building an army of robots
kneath
306
46k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
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