Integrating with Phoenix
Because Whistle is based on Plug and Cowboy, it can also work alongside Phoenix.
All we need to do is add the router handlers to the Cowboy dispatch options.
To get the Cowboy handlers, pass a list of all your routers as an argument to the build_handlers/1
helper:
Whistle.HttpServer.build_handlers([MyAppWeb.ProgramRouter])
Here is how this looks looks like in your config:
config :myapp, MyAppWeb.Endpoint,
http: [dispatch: [
{:_, Whistle.HttpServer.build_handlers([MyAppWeb.ProgramRouter]) ++ [
{:_, Phoenix.Endpoint.Cowboy2Handler, {MyAppWeb.Endpoint, []}}
]}]]
Check out the Phoenix.CowBoy2.Adapter docs for more info.
Once the handlers have been added, you can embed a program in your views like so:
<%= raw(Whistle.Program.embed(conn, MyAppWeb.ProgramRouter, "counter")) %>
Both Whistle.Program.embed/4
and Whistle.Program.fullscreen/4
will do an initial server side plain HTML render and then update the program dynamically once the client has connected to the router.
Loading the Javascript library
Add whistle.js
from Elixir's dependency folder, remember to run mix deps.get
before:
npm install --save deps/whistle
If you use the Whsitle.Program
helpers, loading whistle.js in the client is all you have todo for it to work. But if you prefer to mount programs manually in the client, you can do it like this:
import { Whistle } from 'whistle';
const socket = Whistle.open("ws://localhost:4000/socket");
const target = document.getElementById("target");
const program = socket.mount(target, "counter", {});
Check out the Javascript API documentation for more.