Initial Commit

Author: Ryan Paul

Gemfile

@@ -0,0 +1,13 @@
+source 'https://rubygems.org'
+
+gem 'sinatra'
+gem 'faye-websocket'
+gem 'rethinkdb'
+gem 'thin'
+gem 'haml'
+gem 'opal',           :github => 'opal/opal'
+gem 'opal-browser',   :github => 'opal/opal-browser'
+gem 'opal-jquery',    :github => 'opal/opal-jquery'
+gem 'opal-haml',      :github => 'opal/opal-haml'
+gem 'react.rb'
+gem 'react-source'

app.rb

@@ -0,0 +1,63 @@
+require "sinatra"
+require "tilt/haml"
+require "faye/websocket"
+require "rethinkdb"
+require "opal"
+require "json"
+
+include RethinkDB::Shortcuts
+
+DBHOST = ENV["RETHINKDB_PORT_28015_TCP_ADDR"]
+DBPORT = ENV["RETHINKDB_PORT_28015_TCP_PORT"]
+
+def query rql
+  conn = r.connect host: DBHOST, port: DBPORT
+  rql.run(conn).to_json
+ensure
+  conn.close
+end
+
+class App < Sinatra::Base
+  def initialize
+    super
+    @clients = []
+
+    EM.next_tick do
+      conn = r.connect host: DBHOST, port: DBPORT
+      r.table("todo").changes.em_run(conn) do |err, change|
+        @clients.each {|c| c.send change.to_json }
+      end
+    end
+  end
+
+  def setup_websocket ws
+    ws.on(:close) { @clients.delete ws }
+    ws.on(:open) { @clients << ws }
+
+    ws.on :message do |msg|
+      data = JSON.parse msg.data
+      case data["command"]
+      when "add"
+        query r.table("todo").insert text: data["text"], status: false
+      when "update"
+        query r.table("todo").get(data["id"]).update status: data["status"]
+      when "delete"
+        query r.table("todo").get(data["id"]).delete()
+      end
+    end
+  end
+
+  get "/" do
+    if Faye::WebSocket.websocket? request.env
+      ws = Faye::WebSocket.new request.env
+      setup_websocket ws
+      ws.rack_response
+    else
+      haml :index
+    end
+  end
+
+  get "/api/items" do
+    query r.table("todo").coerce_to("array")
+  end
+end

client/main.rb

@@ -0,0 +1,101 @@
+require "opal"
+require "react"
+require "json"
+require "browser"
+require "browser/http"
+require "browser/socket"
+
+puts "Running client-side Opal code"
+
+class TodoList
+  include React::Component
+
+  def render
+    ul do
+      params[:items].each do |item|
+        li do
+          label do
+            input(type: "checkbox", checked: item["status"]).on(:click) do |e|
+              self.emit :toggle, id: item["id"], status: e.current_target.checked
+            end
+            span { item["text"] }
+          end
+        end
+      end
+    end
+  end
+end
+
+class TodoAdd
+  include React::Component
+
+  def render
+    div do
+      input(type: "text", placeholder: "Input task name", ref: "text")
+      button {"Add"}.on(:click) do
+        text = self.refs[:text].dom_node.value
+        self.emit :add, text: text
+      end
+    end
+  end
+end
+
+class App
+  include React::Component
+
+  define_state(:items) { [] }
+  after_mount :setup
+
+  def setup
+    Browser::HTTP.get("/api/items").then do |res|
+      self.items = res.json
+      setup_websocket
+    end
+  end
+
+  def setup_websocket
+    @ws = Browser::Socket.new "ws://drydock.local:32792"
+
+    @ws.on(:open) { p "Connection opened" }
+    @ws.on(:close) { p "Socket closed" }
+
+    @ws.on(:message) do |e|
+      data = JSON.parse e.data
+      puts "Received:", data
+
+      # Add new item
+      if data[:new_val] && !data[:old_val]
+        self.items = self.items << data[:new_val]
+      # Update existing item
+      elsif data[:new_val] && data[:old_val]
+        self.items = self.items.map do |i|
+          i["id"] == data[:new_val]["id"] ? data[:new_val] : i
+        end
+      # Remove deleted item
+      elsif !data[:new_val] && data[:old_val]
+        self.items = self.items - [data[:old_val]]
+      end
+
+    end
+  end
+
+  def transmit data
+    @ws.puts data.to_json
+  end
+
+  def render
+    div do
+      present(TodoList, items: self.items).on :toggle do |data|
+        transmit command: "update", id: data["id"], status: data["status"]
+      end
+
+      present(TodoAdd).on :add do |data|
+        transmit command: "add", text: data["text"]
+      end
+    end
+  end
+end
+
+$document.ready do
+  React.render(React.create_element(App), `document.body`)
+end

config.ru

@@ -0,0 +1,22 @@
+require 'bundler'
+Bundler.require
+
+require "./app"
+
+Faye::WebSocket.load_adapter("thin")
+
+react_path = ::React::Source.bundled_path_for("react-with-addons.js")
+
+$opal = Opal::Server.new do |s|
+  s.append_path File.dirname react_path
+  s.append_path "client"
+  s.main = "main"
+end
+
+map "/assets" do
+  run $opal.sprockets
+end
+
+$opalinit = Opal::Processor.load_asset_code($opal.sprockets, 'main')
+
+run App

views/index.haml

@@ -0,0 +1,9 @@
+!!!
+%html
+  %head
+    %title Test
+    %script(src="/assets/react-with-addons.js")
+    %script(src="/assets/main.js")
+    %script(src="https://code.jquery.com/jquery-1.7.2.min.js")
+    %script= $opalinit
+  %body