Base implementation of WebSockets

Initial (not-yet-functional) implementation of Action Cable to stream notification counts and new notifications

Author: lmrodriguezr

app/channels/application_cable/connection.rb

@@ -1,4 +1,19 @@
 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 = env['warden'].user
+        verified_user
+      else
+        reject_unauthorized_connection
+      end
+    end
   end
 end

app/channels/notification_counts_channel.rb

@@ -0,0 +1,5 @@
+class NotificationCountsChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from current_user
+  end
+end

app/channels/web_notifications_channel.rb

@@ -0,0 +1,5 @@
+class WebNotificationsChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from current_user
+  end
+end

app/javascript/channels/consumer.js

@@ -0,0 +1,6 @@
+// Action Cable provides the framework to deal with WebSockets in Rails.
+// You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.
+
+import { createConsumer } from "@rails/actioncable"
+
+export default createConsumer()

app/javascript/channels/index.js

@@ -0,0 +1,5 @@
+// Load all the channels within this directory and all subdirectories.
+// Channel files must be named *_channel.js.
+
+const channels = require.context('.', true, /_channel\.js$/)
+channels.keys().forEach(channels)

app/javascript/channels/notification_counts_channel.js

@@ -0,0 +1,14 @@
+
+import consumer from "./consumer"
+
+consumer.subscriptions.create("NotificationCountsChannel", {
+  received(data) {
+    this.badge.html(data["count"] == 0 ? "" : data["count"]);
+    this.badge.data("count", data["count"]);
+  },
+
+  get badge() {
+    return $("#notification-count-badge");
+  }
+});
+

app/javascript/channels/web_notifications_channel.js

@@ -0,0 +1,13 @@
+import consumer from "./consumer"
+
+consumer.subscriptions.create("WebNotificationsChannel", {
+  received(data) {
+    // TODO
+    // - authorize
+    // - broadcast
+    // - sound
+    // - remember to use tags!
+    // new Notification(data["title"], { body: data["body"] })
+  }
+})
+

app/javascript/packs/application.js

@@ -28,4 +28,5 @@ import "packs/dictionary";
 import "packs/network";
 import "packs/styling";
 import "packs/copyable";
+import "channels/index.js";
 

app/models/notification.rb

@@ -3,8 +3,13 @@ class Notification < ApplicationRecord
   belongs_to :notifiable, polymorphic: true
   belongs_to :linkeable, polymorphic: true, optional: true
 
-  after_create do
-    # Send email notification
+  after_create(:send_email_notification)
+  after_create(:broadcast_web_notification)
+  after_save(:broadcast_notification_count)
+
+  private
+
+  def send_email_notification
     mail = AdminMailer.with(
       user: user,
       object: notifiable,
@@ -16,4 +21,19 @@ class Notification < ApplicationRecord
       update(notified_email: true)
     end
   end
+
+  def broadcast_web_notification
+    WebNotificationsChannel.broadcast_to(
+      user,
+      title: title || action,
+      tag: notifiable,
+      alert: id
+    )
+  end
+
+  def broadcast_notification_count
+    NotificationCountsChannel.broadcast_to(
+      user, count: user.unseen_notifications.count
+    )
+  end
 end

app/views/shared/_user_links.html.erb

@@ -19,7 +19,8 @@
       <%= link_to(notifications_path, title: 'Alerts') do %>
         <span class="d-lg-none">Notifications</span>
         <% if current_user.unseen_notifications.any? %>
-          <span
+          <span id="notification-count-badge"
+            data-count="<%= current_user.unseen_notifications.count %>"
             class="nav-item-text badge badge-pill badge-info py-1 px-2 mr-1">
             <%= current_user.unseen_notifications.count %>
           </span>