Editing
Building Real-Time Applications with Phoenix Channels
(section)
Jump to navigation
Jump to search
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
=== Getting Started === To start building real-time applications with Phoenix Channels, follow these steps: 1. Install Phoenix Framework by running the following command: ``` $ mix archive.install hex phx_new <phoenix_version> ``` 2. Create a new Phoenix project: ``` $ mix phx.new my_app ``` 3. Navigate to the project directory: ``` $ cd my_app ``` 4. Generate a new channel: ``` $ mix phx.gen.channel Chat ``` 5. Start the Phoenix server: ``` $ mix phx.server ``` 6. Open your web browser and visit `http://localhost:4000`. You should see the default Phoenix welcome page. 7. To test the newly generated chat channel, open the browser's developer console and execute the following JavaScript code: ``` let socket = new Phoenix.Socket('/socket'); socket.connect(); let channel = socket.channel('chat_room:lobby', {}); channel.join() .receive('ok', resp => console.log('Joined successfully', resp)) .receive('error', resp => console.error('Unable to join', resp)); ``` 8. Now you can start sending and receiving messages through the chat channel by executing the following JavaScript code: ``` channel.push('new_message', { body: 'Hello, World!' }); .receive('ok', resp => console.log('Message sent successfully', resp)) .receive('error', resp => console.error('Unable to send message', resp)); channel.on('new_message', payload => console.log('New message received', payload)); ```
Summary:
Please note that all contributions to Elixir Wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see
Elixir Wiki:Copyrights
for details).
Do not submit copyrighted work without permission!
Cancel
Editing help
(opens in new window)
Navigation menu
Personal tools
Not logged in
Talk
Contributions
Create account
Log in
Namespaces
Page
Discussion
English
Views
Read
Edit
View history
More
Navigation
Main page
Recent changes
Random page
Help about MediaWiki
Tools
What links here
Related changes
Special pages
Page information