How to connect to Elixir Channel

Good communication is as stimulating as black coffee, and just as hard.

Živković Miloš
Nov 6, 2019 · 2 min read
Image for post
Image for post
Some channel - Photo by Sander Mathlener on Unsplash

Establishing a frontend connection

// channel creationlet channel = socket.channel("upload_state:all", {})// channel joiningchannel.join()
.receive("ok", data => {
console.log("Joined topic", "upload_state:all" )
})
.receive("error", resp => {
console.log("Unable to join topic", "upload_state:all")
})
// on channel event do something
channel.on("change", payload => {

Security

# router.ex
pipeline :browser do
...
plug :put_user_id
plug :put_token
...
end

defp put_user_id(conn, _headers) do
%{id: id} = conn
|> Pow.Plug.current_user
|> extract_user_id
assign(conn, :user_id, id)
end

defp put_token(conn, _headers) do
id = conn.assigns.user_id
first_token = Phoenix.Token.sign(SwaggUploadWeb.Endpoint, "salt", id)
assign(conn, :token, first_token)
end
<!-- app.html.eex -->
<script>window.userToken = "<%= assigns[:token] %>";</script><script>window.userId = "<%= assigns[:user_id] %>";</script>
// socket.jslet socket = new Socket("/socket", {params: {token: window.userToken, user_id: window.userId}})
# user_socket.ex
def connect(%{"token" => token, "user_id" => user_id}, socket, _connect_info) do
case Phoenix.Token.verify(SwaggUploadWeb.Endpoint, "salt", token, max_age: 86400) do
{:ok, _} ->
{:ok, assign(socket, :user_id, user_id) }
_ ->
:error
end
end

Handling Elixir channels

# user_
channel "upload_state:*", SwaggUploadWeb.UploadStateChannel
# your_channel.ex
YourWebAppModule.Endpoint.broadcast("upload_state:all", "change", state)
intercept ["change"]
def handle_out("change", payload, socket) do
%{id: id} = payload
case (Integer.parse(socket.assigns[:user_id])) do
^id ->
push socket, "change", payload
{:noreply, socket}
_ ->
{:noreply, socket}
end
end

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Sign up for Best Stories

By Dev Genius

The best stories sent monthly to your email. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Živković Miloš

Written by

Exploring core of Hybris, while working with Pearson, developing PoCs, and integrating into live project.

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Živković Miloš

Written by

Exploring core of Hybris, while working with Pearson, developing PoCs, and integrating into live project.

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store