Phux 
Client-side Phoenix Channels
Built for Ckd
Getting Started
yarn add phux
Client-side:
import phux from "phux"
const BlogPostsChannel = {
api: "v0:posts",
initialState: {
loaded: false,
posts: [],
currentPage: 1,
},
reducer(state, msg) {
switch (msg.type) {
case "POSTS":
return { ...state, posts: msg.payload.posts, loaded: true }
case "PAGE_CHANGE":
return { ...state, currentPage: msg.payload.pageNumber, loaded: false }
default:
return state
}
},
methods: {
goToNextPage({ push, state }) {
push("PAGE_CHANGE", { pageNumber: state.currentPage + 1 })
},
},
}
const myAppClient = phux({
channels: [BlogV0ListPostsChannel],
})
const myApp = myAppClient(
{
socketUrl: "ws://localhost:1818/socket",
token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9",
},
({ connected }) => {}
)
myApp.connect()
const ch = myApp.posts.channel(
({ loaded, posts, currentPage, goToNextPage }) => {}
)
ch.read() // => { loaded, posts, currentPage, goToNextPage }
ch.leave()
myApp.disconnect()Server-side:
defmodule MyAppWeb.Blog.V0.PostsChannel do
use Phoenix.Channel
@initial_page 1
def join("v0:posts", _message, socket) do
send(self(), :after_join)
{:ok, assign(socket, current_page: @initial_page)}
end
def handle_info(:after_join, socket) do
push("POSTS", %{posts: get_page(socket.assigns.current_page)})
{:noreply, socket}
end
def handle_in("PAGE_CHANGE", %{"page" => page}, socket) do
socket = assign(socket, current_page: page)
push("POSTS", %{posts: get_page(socket.assigns.current_page)})
{:noreply, socket}
end
defp get_page(n) do
[
%{title: "Hello World #{n}", body: "👋"}
]
end
end