action cable setup

Gemfile

@@ -64,6 +64,7 @@ group :development, :test do
   gem 'byebug', '~> 11.0.1', platforms: [:mri, :mingw, :x64_mingw]
   gem 'faker', '~> 1.9.3'
   gem 'pry-rails', '~> 0.3.9'
+  gem 'puma'
 end
 
 group :development do

app/assets/javascripts/application.js

@@ -29,3 +29,5 @@
 //= require annotations-legacy.js
 //= require glfx-js/dist/glfx.js
 //= require webgl-distort/dist/webgl-distort.js
+//= require cable.js
+//= require_tree .

app/assets/javascripts/cable.js

@@ -0,0 +1,11 @@
+//
+//= require action_cable
+//= require_self
+//= require_tree ./channels
+
+(function() {
+  this.App || (this.App = {});
+
+  App.cable = ActionCable.createConsumer();
+
+}).call(this);

app/assets/javascripts/channels/concurrent_editing.js

@@ -0,0 +1,22 @@
+App.concurrent_editing = App.cable.subscriptions.create("ConcurrentEditingChannel", {
+  connected: function() {
+    // Called when the subscription is ready for use on the server
+    console.log("Connected");
+  },
+
+  disconnected: function() {
+    // Called when the subscription has been terminated by the server
+    console.log("bye");
+  },
+
+  received: function(data) {
+    // Called when there's incoming data on the websocket for this channel
+    window.mapKnitter.synchronizeData(data.changes);
+  },
+
+  speak: function(changes) {
+    return this.perform("sync", {
+        changes: changes
+    });
+  }
+});

app/assets/javascripts/mapknitter/Map.js

@@ -462,6 +462,28 @@ MapKnitter.Map = MapKnitter.Class.extend({
     if (this.editing._mode != "lock") e.stopPropagation()
   },
 
+  synchronizeData: function(warpables) {
+      var layers = [];
+      map.eachLayer(function(l) {layers.push(l)});
+      layers = layers.filter(image => (image._url!=undefined || image._url!=null));
+      warpables.forEach(function(warpable) {
+          corners = [];
+          warpable.nodes.forEach(function(node) {
+              corners.push(L.latLng(node.lat, node.lon));
+          });
+
+          x = corners[2];
+          y = corners [3];
+          corners [2] = y;
+          corners [3] = x;
+
+          console.log(corners);
+
+          layer = layers.filter(l => l._url==warpable.srcmedium)[0];
+          layer.setCorners(corners);
+      });
+  },
+
   saveImageIfChanged: function () {
     var img = this
     // check if image state has changed at all before saving!
@@ -499,6 +521,9 @@ MapKnitter.Map = MapKnitter.Class.extend({
       beforeSend: function (e) {
         $('.mk-save').removeClass('fa-check-circle fa-times-circle fa-green fa-red').addClass('fa-spinner fa-spin')
       },
+      success: function(data) {
+        App.concurrent_editing.speak(data);
+      },
       complete: function (e) {
         $('.mk-save').removeClass('fa-spinner fa-spin').addClass('fa-check-circle fa-green')
       },

app/channels/application_cable/channel.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

app/channels/application_cable/connection.rb

@@ -0,0 +1,18 @@
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+    identified_by :current_user
+
+    def connect
+      self.current_user = find_verified_user
+    end
+
+    private
+    def find_verified_user
+      if verified_user = User.find_by(id:  cookies.signed["user_id"])
+        return verified_user
+      else
+        return nil
+      end
+    end
+  end
+end

app/channels/concurrent_editing_channel.rb

@@ -0,0 +1,13 @@
+class ConcurrentEditingChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from "concurrent_editing_channel"
+  end
+
+  def unsubscribed
+    # Any cleanup needed when channel is unsubscribed
+  end
+
+  def sync changes
+    ActionCable.server.broadcast 'concurrent_editing_channel', changes
+  end
+end

app/controllers/application_controller.rb

@@ -13,7 +13,9 @@ def current_user
     user_id = session[:user_id]
     if user_id
       begin
-        @user = User.find(user_id)
+        u = User.find(user_id)
+        cookies.signed["user_id"] = u.id
+        @user = u
       rescue StandardError
         @user = nil
       end

app/controllers/images_controller.rb

@@ -93,7 +93,8 @@ def update
     @warpable.locked = params[:locked]
     @warpable.cm_per_pixel = @warpable.get_cm_per_pixel
     @warpable.save
-    render html: 'success'
+    data = @warpable.map.fetch_map_data
+    render json: data
   end
 
   def destroy

app/models/map.rb

@@ -267,4 +267,9 @@ def add_tag(tagname, user)
     tagname = tagname.downcase
     tags.create(name: tagname, user_id: user.id, map_id: id) unless has_tag(tagname)
   end
+
+  def fetch_map_data
+    data = warpables
+    return data.to_json
+  end
 end

app/views/layouts/application.html.erb

@@ -13,6 +13,7 @@
     <link rel="shortcut icon" href="/images/mapknitter-255.png">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
     <%= stylesheet_link_tag 'application' %>
+    <%= action_cable_meta_tag %>
     <%= javascript_include_tag 'application' %>
   </head>
   <body>

config/environments/development.rb

@@ -74,4 +74,7 @@
   # Use an evented file watcher to asynchronously detect changes in source code,
   # routes, locales, etc. This feature depends on the listen gem.
   config.file_watcher = ActiveSupport::EventedFileUpdateChecker
+
+  config.action_cable.url = "ws://localhost:3000/cable"
+  config.action_cable.allowed_request_origins = [/http:\/\/*/, /https:\/\/*/]
 end

config/environments/production.rb

@@ -102,4 +102,6 @@
 
   # Do not dump schema after migrations.
   config.active_record.dump_schema_after_migration = false
+
+  config.action_cable.allowed_request_origins = [/http:\/\/*/, /https:\/\/*/]
 end

config/routes.rb

@@ -2,6 +2,8 @@
 
   root to: 'front_ui#index'
 
+  mount ActionCable.server => '/cable'
+
   get 'front-page', to: 'front_ui#index'
   get 'mappers', to: 'front_ui#nearby_mappers'
   get 'about', to: 'front_ui#about'