Elixir Plug Cowboy, WebSockets Broadcasting to React
Tags: elixir, websockets, react
Published: 2022-08-31 20:10:05

WebSockets is the most effective way to push content to web clients, The connection between both sides start with a HTTP handshaking and then is upgraded to WebSockets, establishing a full duplex channel where both sides can send and receive data.

Thank to this, we can push data to client, without the client requesting it. What is very useful for stock quotes list, game server score tables, crypto currency prices, bets odd display, or whatever real time data. 

Basically we have one emitter and many consumers.

In this article it will be implemented a stock quotes list,
 where the stock values will be sent to every client in a specific time interval.

The structure will consist of:

* **Quotes store:** where the stock prices will be stored, and also it will simulate price changes.
* **Scheduler:** It will trigger the broadcast to every some time.
* **Clients registry:** Every client have a PID, we need it as address where to send the updates.
* **Socket handler:** Handle the clients communications.

In the client side is a React app that receive and display a quotes table.

![Quotes Table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5045xbttyqezcoxcp3yt.png)



## Table of Contents
* [1-Dependencies](#dependencies)
* [2-Quote Store](#store)
* [3-The Scheduler](#scheduler)
* [4-Socket Handler](#handler)
* [5-The application](#app)
* [6-React Client](#client)


## 1) Dependencies<a name="dependencies"></a> 

Showing the dependencies is the classic way to start an Elixir post.

```elixir 
  defp deps do
    [
      {:cowboy, "~> 2.4"},      
      {:plug_cowboy, "~> 2.0"},
      {:jason, "~> 1.3"}, 
    ]
  end
```

## 2) Quote Store<a name="store"></a> 

A Elixir Agent is used in order to store the stock quote prices and simulate price changes.

[Elixir Agent](https://hexdocs.pm/elixir/Agent.html)

How the documentation say: It are useful when need to share or store state that must be accessed from different processes or by the same process at different points in time.


```elixir
defmodule Quote do

  @derive {Jason.Encoder, only: [:symbol, :name, :price, :share, :arrow, :dif, :difp]}
  defstruct [:symbol, :name, :price, :share, :arrow, :dif, :difp]


  def new({symbol, name, price, share}) do # I love C++
    %Quote{symbol: symbol, name: name, price: price, share: share}
  end
end


defmodule QuoteStore do
  use Agent

  def initial_values() do
    [
      {"BRK.B", "Berkshire Hathaway", 289.30, 637},
      {"JPM", "JPMorgan Chase & Co.", 115.52, 342},
      {"BAC", "Bank of America", 34.41, 308},
      {"WFC", "Wells Fargo & Company", 44.30, 168},
      {"MS", "Morgan Stanley", 88.30, 151},
      {"HSBC", "HSBC", 31.41, 128},
      {"AXP", "American Express", 157.33, 118},
      {"GS", "The Goldman Sachs Group", 340.18, 116},
      {"AAPL", "Apple Inc. ", 167.23, 368},
      {"MSFT", "Microsoft Corporation", 276.44, 340},
      {"GOOG", "Alphabet Inc.", 114.77, 200},
      {"AMZN", "Amazon.com,", 133.62, 500},
      {"TSLA", "Tesla, Inc", 889.36, 120},
      {"NVDA", "NVIDIA Corporation ", 171, 512}
    ]
    |> Enum.map(&Quote.new(&1))
  end

  def start_link(quotes) do    
    IO.puts("QuoteStore.start_link, length(quotes): #{length(quotes)}")
    Agent.start_link(fn -> quotes end, name: __MODULE__)
  end

  def values do
    Agent.get(__MODULE__, & &1)
  end

  def update do    
    values = Enum.map(Agent.get(__MODULE__, & &1), fn q -> newValue(q) end)
    Agent.update(__MODULE__, fn _ -> values end)
    values
  end

  def newShare(value), do: value * (101..105 |> Enum.random()) / 100
  def newPrice(value), do: value * (90..110 |> Enum.random()) / 100

  defp newValue(q) do
    newprice = newPrice(q.price)
    newshare = newShare(q.share)

    dif = Float.round(newprice - q.price, 2)

    # IO.puts(dif)
    difp = dif / q.price * 100

    # 2% threshold
    arrow =
      cond do
        difp > 2 -> "u"
        difp < -2 -> "d"
        true -> "e"
      end

    %Quote{
      symbol: q.symbol,
      name: q.name,
      price: newprice,
      share: newshare,
      arrow: arrow,
      dif: dif,
      difp: difp
    }
  end
end
```


## 3) The Scheduler<a name="scheduler"></a> 


The scheduler will be in charge of trigger the broadcasting process. Every specific time interval it send a message to all the PID stored in the Registry. The Registry is based in ETS (Erlang Term Storage). The PID of every new connection is stored in the Registry, it will be showed bellow, in the Socket Handler.

[Elixir Registry](https://hexdocs.pm/elixir/main/Registry.html#module-using-as-a-pubsub)
[Erlang Term Storage](https://www.erlang.org/doc/man/ets.html)


```elixir
defmodule Scheduler do
  def start(interval) do
    IO.inspect(self(), label: "Scheduler Start")
    :timer.apply_interval(interval, __MODULE__, :send_quotes, [])

    {:ok, self()}
  end

  def send_quotes() do
    IO.inspect(self(), label: "Broadcast messages from")

    Registry.StockTickerApp
    |> Registry.dispatch("stock_ticker", fn entries ->
      for {pid, _} <- entries, do: send(pid, :broadcast, [])
    end)
  end
end

```


## 5) Socket Handler<a name="handler"></a> 

The start point to understand socket handler is the documentation:[Cowboy WebSocket](https://ninenines.eu/docs/en/cowboy/2.6/manual/cowboy_websocket/)



```elixir
defmodule StockTickerApp.SocketHandlerTicker do
  @behaviour :cowboy_websocket
  require Logger

  # Not run in the same process as the Websocket callbacks.
  def init(request, _state) do
    {:cowboy_websocket, request, nil, %{idle_timeout: :infinity}}
  end

  # websocket_init: Called once the connection has been upgraded to Websocket.
  def websocket_init(state) do
    Registry.StockTickerApp |> Registry.register("stock_ticker", {})
    str_pid = to_string(:erlang.pid_to_list(self()))
    IO.puts("websocket_init: #{str_pid}")

    stime = String.slice(Time.to_iso8601(Time.utc_now()), 0, 8)
    {:ok, json} = Jason.encode(%{time: stime, quotes: QuoteStore.update()})
    {:reply, {:text, json}, state}
  end

  # websocket_handle: Will be called for every frame received
  # Can be used to retrieve info about some specific quote ex: "TSLA"
  # but in this case we don't needed.
  # def websocket_handle({:text, json}, state) do
  # end

  # websocket_info: Will be called for every Erlang message received.
  # the scheduler send messages to every PID stored in the Registry
  def websocket_info(:broadcast, state) do
    stime = String.slice(Time.to_iso8601(Time.utc_now()), 0, 8)
    {:ok, json} = Jason.encode(%{time: stime, quotes: QuoteStore.update()})
    {:reply, {:text, json}, state}
  end
end

```

## 3) The application<a name="app"></a> 

The application is the core where all the involved processes will be started.


```elixir
defmodule StockTickerApp do
  use Application

  def start(_type, _args) do
    children = [
      {QuoteStore, QuoteStore.initial_values()},
      %{id: Scheduler, start: {Scheduler, :start, [5000]}},
      Plug.Cowboy.child_spec(
        scheme: :http,
        plug: StockTickerApp.Router,
        options: [dispatch: dispatch(), port: 5000]
      ),
      Registry.child_spec(
        keys: :duplicate,
        name: Registry.StockTickerApp
      )
    ]

    opts = [strategy: :one_for_one, name: StockTickerApp.Application]
    Supervisor.start_link(children, opts)
  end

  defp dispatch do
    [
      {:_,
       [
         {"/ws/[...]", StockTickerApp.SocketHandlerTicker, []}
       ]}
    ]
  end
end

```



## 6) React client<a name="client"></a> 

In the client side is a React app, where the Material UI library will provide us of a nice look and feel user interface. [Material UI](https://mui.com/)


There is many ways to implement WebSocket in React, this is the more simple,
just the raw implementation, without any external library.


```javascript
//socket.js
const wsHost = "ws://192.168.1.109:5000/ws/chat";
export var websocket = new WebSocket(wsHost);

```
A parent child component relation will be entablished.
Two components, a `Dashboard` and a `quotes_table`.

### Dashboard

The `Dashboard`, will handle the socket connection and store the received quotations in their state.


```javascript
import React from 'react';
import Typography from '@material-ui/core/Typography';
import QuotesTable from "./quotes_table";
import {websocket} from "./socket.js";

class Dashboard extends React.Component {

    constructor(props) {
      super(props); 
      this.state = { status: "Disconnected", quotes:[]};  
    }

    setStatus = (evt,value) => {
      console.log("setStatus",value);//,Object.keys(evt));
      //console.log("isTrusted",evt.isTrusted);
      this.setState({status: value});
    }

    onMessage= (evt) => { 
      console.log("    websocket.onmessage:");
      var data = JSON.parse(evt.data);
      console.log("Data", data);
      this.setState({quotes: data.quotes, time : data.time});

    }
   
    componentDidMount() {

      console.log("Dashboard componentDidMount:");
      websocket.onopen = (evt)  => this.setStatus(evt,"Open");
      websocket.onclose = (evt)  => this.setStatus(evt,"Close");
      websocket.onerror = (evt) => this.setStatus(evt,"Error");
      websocket.onmessage = (evt)  => this.onMessage(evt);      

    }

    render() {        
         
       console.log("DashBoard: render", this.state.quotes.length);       
       return (
    
          <div  style={{margin: "0 auto",padding:"5px", border: "2px solid gray", maxWidth: "35%" , display: "flex", flexDirection: "column"}} >
          
           <QuotesTable quotes={this.state.quotes} style={{border: "1px solid yellow"}} />
           <Typography >
             Last update:{this.state.time}  ,Status: {this.state.status}           
           </Typography>  

         </div>
)}}

export default Dashboard;

```

### Quotes table

An the end we have the `QuotesTable`, where all the stock quotes are showed with arrow and colors to show a well knowed visual interpretation.

```javascript
import React from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customTable: {
    "& .MuiTableCell-sizeSmall": {
      padding: "2px 6px 2px 6px "     
    },
    "& .MuiTableCell-head": {      
      fontWeight: "bold",    
      backgroundColor: "#00a0a0"
    }
    ,
    "& .MuiTableRow-root": {
      height: "40px"
    }
    ,
    "& .MuiTableRow-root:hover": {
      backgroundColor: "#c0c0c0"
    }
  },
});

function drawArrowIcon(d){
  if (d==="u") return (<ArrowDropUpIcon  style={{fill:"green", transform: "scale(1.5)"}}/>);
  if (d==="d") return (<ArrowDropDownIcon  style={{fill:"red", transform: "scale(1.5)"}}/>);
}

function getColor(d){
  if (d==="u") return ("green");
  if (d==="d") return ("red");
  return "black";
}

export default function QuotesTable(props) {

  const { quotes } = props;

  console.log("QuotesTable: render", quotes.length);

  const classes = useStyles();

  return (
    
      <Table classes={{root: classes.customTable}}
      style={{ width: "auto", tableLayout: "auto", border: "2px solid gray" }} size="small" >
        <TableHead  >
          <TableRow >
            <TableCell >Symbol</TableCell>
            <TableCell align="right">Price</TableCell>
            <TableCell align="right">Move</TableCell>
            <TableCell align="right">Dif</TableCell>
            <TableCell align="right">Dif%</TableCell>
            <TableCell align="right">Share</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {quotes && quotes.map((row) => (
            <TableRow key={row.symbol} onClick={() => { console.log("Open info for:",row.symbol); }} >
              <TableCell align="left">{row.symbol}</TableCell>
              <TableCell align="right">{row.price.toFixed(2)} </TableCell>
              <TableCell align="center" >{drawArrowIcon(row.arrow) }</TableCell>
              <TableCell align="right" style={{color: getColor(row.arrow)}} >{row.dif.toFixed(2)}</TableCell>
              <TableCell align="right" style={{color: getColor(row.arrow)}} >{row.difp.toFixed(2)}</TableCell>
              <TableCell align="right">{row.share.toLocaleString(undefined, {minimumFractionDigits: 2,maximumFractionDigits: 2})}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    
  );
}

```