Setting Action Cable

Gemfile

@@ -26,6 +26,7 @@ group :dependencies do
   gem 'bootsnap', '~> 1.4.4'
   gem 'turbolinks', '~> 5'
   gem 'mini_magick', '~> 4.8'
+  gem 'puma', '~> 4.1.0'
 
   # if you use amazon s3 for warpable image storage
   gem 'aws-sdk', '~> 1.5.7'
@@ -37,12 +38,15 @@ group :dependencies do
   # compiling markdown to html
   gem 'rdiscount', '2.2.0.1'
 
+  # Process manager for applications with multiple components
+  gem 'foreman', '~> 0.85.0'
+
   # asset pipelining
   gem 'bootstrap-sass'
   gem 'sassc-rails'
   gem 'jquery-rails'
   gem 'sprockets', '3.7.2'
-  gem "sprockets-rails"
+  gem 'sprockets-rails'
   gem 'sass', require: 'sass'
   gem 'autoprefixer-rails', '~> 9.6.1'
   gem 'uglifier', '~> 4.1.20'
@@ -65,11 +69,11 @@ end
 
 group :development, :test do
   gem 'capybara'
-  gem 'puma'
   gem 'selenium-webdriver'
   gem 'byebug', '~> 11.0.1', platforms: [:mri, :mingw, :x64_mingw]
   gem 'faker', '~> 2.1.2'
   gem 'pry-rails', '~> 0.3.9'
+  gem 'action-cable-testing'
 end
 
 group :development do

Gemfile.lock

@@ -4,6 +4,8 @@ GEM
     RubyInline (3.12.4)
       ZenTest (~> 4.3)
     ZenTest (4.11.2)
+    action-cable-testing (0.6.0)
+      actioncable (>= 5.0)
     actioncable (5.2.3)
       actionpack (= 5.2.3)
       nio4r (~> 2.0)
@@ -89,6 +91,8 @@ GEM
     faker (2.1.2)
       i18n (>= 0.8)
     ffi (1.11.1)
+    foreman (0.85.0)
+      thor (~> 0.19.1)
     friendly_id (5.2.5)
       activerecord (>= 4.0.0)
     geokit (1.13.1)
@@ -210,7 +214,7 @@ GEM
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.1.0)
+    rails-html-sanitizer (1.2.0)
       loofah (~> 2.2, >= 2.2.2)
     rails-perftest (0.0.7)
     railties (5.2.3)
@@ -261,9 +265,8 @@ GEM
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sassc (2.0.1)
+    sassc (2.1.0)
       ffi (~> 1.9)
-      rake
     sassc-rails (2.1.2)
       railties (>= 4.0.0)
       sassc (>= 2.0)
@@ -296,7 +299,7 @@ GEM
     sqlite3 (1.4.1)
     terrapin (0.6.0)
       climate_control (>= 0.0.3, < 1.0)
-    thor (0.20.3)
+    thor (0.19.4)
     thread_safe (0.3.6)
     tilt (2.0.9)
     turbolinks (5.2.0)
@@ -330,14 +333,16 @@ PLATFORMS
 
 DEPENDENCIES
   RubyInline (~> 3.12.4)
-  autoprefixer-rails (~> 9.6.1)
+  action-cable-testing
+  autoprefixer-rails (~> 9.5.1.1)
   aws-sdk (~> 1.5.7)
   bootsnap (~> 1.4.4)
   bootstrap-sass
   byebug (~> 11.0.1)
   capybara
   codecov
   faker (~> 2.1.2)
+  foreman (~> 0.85.0)
   friendly_id
   geokit-rails (= 1.1.4)
   httparty
@@ -357,7 +362,7 @@ DEPENDENCIES
   passenger
   popper_js (~> 1.11, >= 1.11.1)
   pry-rails (~> 0.3.9)
-  puma
+  puma (~> 4.1.0)
   rack_session_access
   rails (~> 5.2.3)
   rails-controller-testing

Procfile

@@ -0,0 +1,2 @@
+passenger: passenger start
+puma: puma -C config/puma.rb

SYNCHRONOUS_EDITING.md

@@ -0,0 +1,30 @@
+The new synchronous editing feature
+===================================
+
+With the introduction of ActionCable to our system, it has been possible
+to do perform real-time tasks quite easily. We have used rail's default
+action cable to make a _concurrent_editing_channel.rb_ in the _app/channels_ folder,
+to handle all the incoming requests and consists of all the business 
+logic as well. At the frontend we have, _app/javascripts/channels/concurrent_editing.js_ which
+handles the logic at the browser or the frontend.
+
+## Flow of the feature:
+
+1. When the map is updated, the _speak_ method of _concurrent_editing.js_ is called which requests 
+the _sync_ method of _concurrent_editing_channel.rb_ to broadcast the updated data to 
+the connected users.
+
+2. The broadcasted data is finally caught by the _received_ function of _app/javascripts/channels/concurrent_editing.js_
+
+3. Finally the _received_ function calls the _synchronizeData_ function to update 
+ all the fresh data on the map.
+
+
+## Testing: 
+
+1. The _action-cable-testing_ gem is used for the feature's testing. It has some really
+cool testing functionality which was required for our use case.
+
+2. Currently we have separate tests written for connection related features and channel 
+specific features. The relevant files are test/channels/concurrent_editing_channel_test.rb and
+test/channels/connection_test.rb

app/assets/javascripts/application.js

@@ -12,41 +12,42 @@
 //
 
 
-//= require leaflet/dist/leaflet-src.js
+// = require leaflet/dist/leaflet-src.js
 
-//= require jquery
-//= require jquery-ujs
-//= require jquery/dist/jquery.js
-//= require jquery-ujs/src/rails.js 
-//= require jquery-ui/jquery-ui.min.js
+// = require jquery
+// = require jquery-ujs
+// = require jquery/dist/jquery.js
+// = require jquery-ujs/src/rails.js 
+// = require jquery-ui/jquery-ui.min.js
 
-//= require blueimp-tmpl/js/tmpl.js
-//= require blueimp-file-upload/js/vendor/jquery.ui.widget
-//= require blueimp-file-upload/js/jquery.fileupload
-//= require blueimp-file-upload/js/jquery.fileupload-process
-//= require blueimp-file-upload/js/jquery.fileupload-ui
+// = require blueimp-tmpl/js/tmpl.js
+// = require blueimp-file-upload/js/vendor/jquery.ui.widget
+// = require blueimp-file-upload/js/jquery.fileupload
+// = require blueimp-file-upload/js/jquery.fileupload-process
+// = require blueimp-file-upload/js/jquery.fileupload-ui
 
-//= require bootstrap/dist/js/bootstrap.js
+// = require bootstrap/dist/js/bootstrap.js
 
-//= require leaflet-fullHash.js
-//= require leaflet-providers/leaflet-providers.js
-//= require leaflet-environmental-layers/dist/LeafletEnvironmentalLayers.js
-//= require leaflet-environmental-layers/src/windRoseLayer.js
-//= require leaflet-easybutton/src/easy-button.js
-//= require sparklines/source/sparkline.js
-//= require glfx-js/dist/glfx.js
-//= require ion-rangeslider/js/ion.rangeSlider.js
-//= require exif-js/exif.js
-//= require webgl-distort/dist/webgl-distort.js
-//= require mapknitter/core/Class.js
-//= require leaflet-spin/example/spin/dist/spin.min.js
-//= require leaflet-spin/example/leaflet.spin.min.js
-//= require image-sequencer/dist/image-sequencer.js
-//= require leaflet-toolbar/dist/leaflet.toolbar.js
-//= require leaflet-draw/dist/leaflet.draw-src.js
-//= require leaflet-distortableimage/dist/leaflet.distortableimage.js
-//= require leaflet-illustrate/dist/Leaflet.Illustrate.js
-//= require leaflet-distortableimage/src/edit/tools/EditAction.js
-//= require mapknitter/Map.js
+// = require leaflet-fullHash.js
+// = require leaflet-providers/leaflet-providers.js
+// = require leaflet-environmental-layers/dist/LeafletEnvironmentalLayers.js
+// = require leaflet-environmental-layers/src/windRoseLayer.js
+// = require leaflet-easybutton/src/easy-button.js
+// = require sparklines/source/sparkline.js
+// = require glfx-js/dist/glfx.js
+// = require ion-rangeslider/js/ion.rangeSlider.js
+// = require exif-js/exif.js
+// = require webgl-distort/dist/webgl-distort.js
+// = require mapknitter/core/Class.js
+// = require leaflet-spin/example/spin/dist/spin.min.js
+// = require leaflet-spin/example/leaflet.spin.min.js
+// = require image-sequencer/dist/image-sequencer.js
+// = require leaflet-toolbar/dist/leaflet.toolbar.js
+// = require leaflet-draw/dist/leaflet.draw-src.js
+// = require leaflet-illustrate/dist/Leaflet.Illustrate.js
+// = require leaflet-distortableimage/dist/leaflet.distortableimage.js
+// = require leaflet-distortableimage/src/edit/tools/EditAction.js
+// = require mapknitter/Map.js
+// = require cable.js
 
-//= require_tree .
+// = 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,31 @@
+/* Handles all the frontend interactions with action cable and the server.  */
+
+App.concurrent_editing = App.cable.subscriptions.create(
+    {
+        channel: "ConcurrentEditingChannel",
+        mapSlug: window.location.href.split("/").pop()
+    }, {
+  connected: function() {
+    // Called when the subscription is ready for use on the server
+  },
+
+  disconnected: function() {
+    // Called when the subscription has been terminated by the server
+  },
+
+  received: function(data) {
+    // Called when there's incoming data on the websocket for this channel
+    window.mapknitter.synchronizeData(data.changes);
+  },
+
+  speak: function(changes) {
+   /* Called when an image is updated from Map.js ('saveImage' function).
+    *  This function calls concurrent_editing_channel.rb's 'sync' method
+    *  which is responsible for broadcasting the updated warpables
+    *  to all the user's connected to the concurrent_editing channel. */
+    return this.perform("sync", {
+        changes: changes,
+        map_slug: window.location.href.split("/").pop()
+    });
+  }
+});