Phoenix LiveViewによる動的サーバーサイドレンダリング２

# /lib/lv_demo_web/controllers/regular-counter-controller.ex
defmodule LvDemoWeb.RegularCounterController do
  use LvDemoWeb, :controller

  def index(conn, _params) do
    render(conn, "index.html", %{val: 0})
  end
end

# lib/lv_demo_web/views/regular_counter_view.ex
defmodule LvDemoWeb.RegularCounterView do
  use LvDemoWeb, :view
end

# lib/lv_demo_web/templates/regular_counter/index.html.eex
<div id="regular-counter">
  <h1>The count is: <span id="counter-val">0</span></h1>
  <button id="dec-btn">-</button>
  <button id="inc-btn">+</button>
</div>

// assets/js/socket.js
import {Socket} from "phoenix"

let socket = new Socket("/socket", {params: {token: window.userToken}})

export default socket

'use strict'

const counter = class Counter {

  constructor(socket) {
    if(!this._isTargetPage()) return;

    this._init(socket);
  }

  _isTargetPage() {
    return document.getElementById('regular-counter');
  }

  _init(socket) {
    socket.connect();

    const counterChannel = socket.channel(`counter:regular`);

    this._setupChannelCommunicator(counterChannel);

    counterChannel.join()
        .receive('ok', resp => {
        })
        .receive('error', reason => console.error('join failed', reason));
  }

  _setupChannelCommunicator(channel) {
    const incButton = document.getElementById('inc-btn');
    const decButton = document.getElementById('dec-btn');
    const valSpan   = document.getElementById('counter-val');

    this._registClickableElement(channel, incButton, 'increment');
    this._registClickableElement(channel, decButton, 'decrement');

    this._registUpdateElement(channel, valSpan, 'counter_updated');

  }

  _registClickableElement(channel, elm, eventName) {
    elm.addEventListener('click', e => {
      this._transmit(channel, eventName);
    });
  }

  _registUpdateElement(channel, elm, messageName){
    channel.on(messageName, ({ val }) => {
      elm.innerHTML = String(val)
    });
  }

  _transmit(channel, message) {
    const payload = {};
    channel.push(message, payload)
                  .receive('ok', r => {console.log(r)} )
                  .receive('error', e => console.error(e));
  }

};

export default counter;

// assets/js/app.js
import css from "../css/app.css"

import "phoenix_html"

import socket from "./socket"
import Counter from './counter';

const counter = new Counter(socket);

# lib/lv_demo_web/channels/user_socket.ex
defmodule LvDemoWeb.UserSocket do
  use Phoenix.Socket

  channel "counter:regular", LvDemoWeb.CounterChannel

  def connect(%{"token" => token}, socket, _connect_info) do
    {:ok, assign(socket, :token, token)}
  end

  def id(socket), do: "counter_socket:#{socket.assigns.token}}"
end

# lib/lv_demo_web/channels/counter_channel.ex
def join("counter:regular" , _params, socket) do
  socket.assigns[:token]
  |> initialize_count

  {:ok, socket}
end

defp initialize_count(token) do
  update_count([{token, 0}])
end

defp update_count([{token, count}]) do
  if :ets.insert(:counter_for_token, {token, count}) do
    [{token, count}]
  else
    []
  end
end

def handle_in("increment", _params, socket) do
  handle_event(socket, &(&1 + 1))
end

defp handle_event(socket, updateFunc) do
  socket.assigns[:token]
  |> fetch_count
  |> apply_func_to_count(updateFunc)
  |> update_count
  |> push_to_client(socket)

  {:noreply, socket}
end

defp fetch_count(token) do
  :ets.lookup(:counter_for_token, token)
end

defp apply_func_to_count([{token, count}], updateFunc) do
  [{token, updateFunc.(count)}]
end

defp push_to_client([{_token, count}], socket) do
  push(socket,"counter_updated", %{val: count})
end

# lib/lv_demo_web/channels/counter_channel.ex
defmodule LvDemoWeb.CounterChannel do
  use LvDemoWeb, :channel

  def join("counter:regular" , _params, socket) do
    socket.assigns[:token]
    |> initialize_count
    {:ok, socket}
  end

  def handle_in("increment", _params, socket) do
    handle_event(socket, &(&1 + 1))
  end

  def handle_in("decrement", _params, socket) do
    handle_event(socket, &(&1 - 1))
  end

  defp handle_event(socket, updateFunc) do
    socket.assigns[:token]
    |> fetch_count
    |> apply_func_to_count(updateFunc)
    |> update_count
    |> push_to_client(socket)

    {:noreply, socket}
  end

  defp fetch_count(token) do
    :ets.lookup(:counter_for_token, token)
  end

  defp apply_func_to_count([{token, count}], updateFunc) do
    [{token, updateFunc.(count)}]
  end

  defp initialize_count(token) do
    update_count([{token, 0}])
  end

  defp update_count([{token, count}]) do
    if :ets.insert(:counter_for_token, {token, count}) do
      [{token, count}]
    else
      []
    end
  end

  defp push_to_client([], socket) do
    push(socket,"counter_updated", %{val: 0})
  end

  defp push_to_client([{_token, count}], socket) do
    push(socket,"counter_updated", %{val: count})
  end

end