利用 Redis 打造選舉即時票數排行

# 這是一個 Ruby 版本的 Redis Client Library
gem 'redis'

# 我們會利用 jquery 來操縱 DOM
gem 'jquery-rails'

# 套用 bootstrap style，可忽略。若要使用這個 Gem 可參考 https://github.com/twbs/bootstrap-rubygem 的相關說明。
gem 'bootstrap', '~> 4.3.1'

require 'redis'

# 理論上在 Test 和 Production 會有區別，但因為我們只在本機端操作，所以直接初始化一個 Redis Client 即可
REDIS = Redis.new

{
  sector: string,
  vote_count[]: array of string,
  name[]: array of string
}

class VotesController < ApplicationController
  skip_before_action :verify_authenticity_token

  # zincrby 需要三個 Arguments，第一個是 Key 的名稱，我們設為 "POLL:投票區名"，第二個則是元素的權重積分，也就是票數。而第三個則是元素本身，我們將其作為候選人的名字。

  # 若在這個 Key 中，候選人存在，zincrby 會將票數加在他目前的票上；反之會直接建立一個新的候選人元素。

  def create
    params[:name].each_with_index do |name, idx|
      REDIS.zincrby("POLL:#{params[:sector]}", params[:vote_count][idx].to_i, name)
    end
  end
end

# config/route.rb

Rails.application.routes.draw do
  post 'votes', to: 'votes#create'
end

class VoteLeaderboardController < ApplicationController

  # 這裡預設有兩個選區，當然可以更多。
  SECTORS = ["t1", "t2"]

  def index
    # 一次顯示多個選區
    @sectors = SECTORS.each_with_object([]) do |sector_name, arr|
      arr << Sector.new(sector_name)
    end
  end
end

# config/routes.rb

Rails.application.routes.draw do
  post 'votes', to: 'votes#create'
  root to: 'vote_leaderboard#index'
end

# app/models/sector.rb

class Sector
  attr_reader :name

  def initialize(name)
    @name = name 
  end

  def get_votes
    # #zrange 需要四個 Arguments，第一個是 Key 的名稱（選區），第二個是取回元素開始的位置，第三個則是取回元素結束的位置，將它想成 Array 就比較好理解了。-1 則代表是要取回所有的元素。

    # 由於我們不僅僅想知道它的排列順序，還想實際知道每個候選人的得票數字，所以我們加入了 with_scores: true 的 option。

    # 最後，由於他排列的順序會是從最小到最大，但我們希望可以從最高票的人開始排列，因此在最後的結果 叫了 #reverse 這個函數。

    # 實際上會得到 [["Roy", 1050], ["Sabrina", 800]] 這樣子型態的資料。

    @votes = REDIS.zrange("POLL:#{@name}", 0, -1, with_scores: true).reverse
  end
end

# app/views/vote_leaderboard/index.html.erb
<h1 class="display-3" style="text-align: center"> Vote Leaderboard </h1>
<div class="container">
  <div class="row">
    <% @sectors.each do |sector| %>
      <div class="col-6" style="text-align:center">
        <h2> <%= sector.name %> Sector</h2>
        <%= render "sector_vote_count", sector: sector %>
      </div>
    <% end %>
  </div>
</div>

<table class="table" id="<%= sector.name %>">
  <thead class="thead-dark">
    <tr>
      <th> # </th>
      <th> Candidate Name </th>
      <th> Vote Count </th>
    </tr>
  </thead>

  <% sector.get_votes.each.with_index(1) do |votes, idx| %>

    <tr>
      <td> <%= idx %> </td>
      <td> <%= votes[0] %> </td>
      <td> <%= votes[1].to_i %> </td>
    </tr>
  <% end %>
</table>

# app/channels/vote_leaderboard_channel.rb

class VoteLeaderboardChannel < ApplicationCable::Channel
  def subscribed
    stream_from "vote_leaderboard_channel"
  end
end

// app/assets/javascripts/channels/vote_leaderboard.coffee

App.vote_leaderboard = App.cable.subscriptions.create "VoteLeaderboardChannel",
  received: (data) ->
    sector_table = $("##{data["sector_name"]}")

    sector_table.html(data["template"])

app/jobs/vote_counting_job.rb

class VoteCountingJob < ApplicationJob
  queue_as :default

  # perform 的時候會直接 publish vote_leaderboard_channel，然後將新表格的 HTML 及選區的名稱傳到前端去。

  def perform(sector)
    ActionCable.server.broadcast("vote_leaderboard_channel", template: render_html(sector), sector_name: sector)
  end

  private

  def render_html(sector)
    # 這裡利用 ApplicationController.render 這個函式來讀取 Partial，這樣我們就可以把得到的表格變成單純的 HTML 去給 JavaScript 來處理了

    ApplicationController.render(
      partial: 'vote_leaderboard/sector_vote_count',
      locals: { sector: Sector.new(sector) }
    )
  end
end

class VotesController < ApplicationController
  skip_before_action :verify_authenticity_token

  def create
    params[:name].each_with_index do |name, idx|
      REDIS.zincrby("POLL:#{params[:sector]}", params[:vote_count][idx].to_i, name)
    end

    VoteCountingJob.perform_later(params[:sector])
  end
end