リアルタイムチャットで受信した際の通知機能について

Question

Ruby on Rails でAction Cableを用いたリアルタイムチャットアプリを作成しています。
リアルタイムチャットでメッセージを受信したユーザに通知を送る機能を実装したいと考えているのですが、方法が思いつきません。

もし分かる方がいれば、お力をお借りしたいです。

ずっと困っているので、助けていただければ本当に助かります！
どうか宜しくお願いいたします。

以下のようなコードとなっております。

class RoomChannel < ApplicationCable::Channel
  def subscribed
    stream_from "room_channel_#{params['room']}"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    # jsで実行されたspeakのmessageを受け取り、room_channelのreceivedにブロードキャストする
    Message.create! content: data['message'], user_id: current_user.id, room_id: params['room']
  end
end

class MessageBroadcastJob < ApplicationJob
  queue_as :default

  def perform(message)
    ActionCable.server.broadcast "room_channel_#{message.room_id}", message: render_message(message)
  end

  private

  def render_message(message)
     ApplicationController.render_with_signed_in_user(message.user, partial: 'messages/message', locals: { message: message })
  end
end

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      reject_unauthorized_connection unless find_verified_user
    end

    private

    def find_verified_user
      self.current_user = env['warden'].user
    end
  end
end

class Message < ApplicationRecord
  validates :content, presence: true
  after_create_commit { MessageBroadcastJob.perform_later self }
  belongs_to :user
  belongs_to :room
  has_many :active_notifications, class_name: 'Notification', foreign_key: 'visitor_id', dependent: :destroy
  has_many :passive_notifications, class_name: 'Notification', foreign_key: 'visited_id', dependent: :destroy
end

class MessagesController < ApplicationController
end

import consumer from './consumer'

// $(function() { ... }); で囲むことでレンダリング後に実行される
// レンダリング前に実行されると $('#messages').data('room_id') が取得できない
// turbolinks を使っている場合は $(document).on('turbolinks:load', function() { ... }); で囲う
$(function() {
  const chatChannel = consumer.subscriptions.create({ channel: 'RoomChannel', room: $('#messages').data('room_id') }, {
    connected() {
      // Called when the subscription is ready for use on the server
    },

    disconnected() {
      // Called when the subscription has been terminated by the server
    },

    received: function(data) {
      return $('#messages').append(data['message']);
    },

    speak: function(message) {
      return this.perform('speak', {
        message: message
      });
    }
  });

  $(document).on('keypress', '[data-behavior~=room_speaker]', function(event) {
    if (event.keyCode === 13) {
      chatChannel.speak(event.target.value);
      event.target.value = '';
      return event.preventDefault();
    }
  });

    $(".button").on("click",function(){
      var message = $(".speaker_txt").val();
      chatChannel.speak(message);
      $(".speaker_txt").val("")
  });
});

<div class="chat-room-container">
<%= link_to rooms_path do%>
  <i class="fas fa-arrow-left fa-2x" aria-hidden="true"></i>
<% end %>
<% if @user.image? %>
  <%= link_to user_path(@user) do %>
      <%= image_tag(@user.image.to_s, :class => "top-image")%>
  <% end %>
  <span class="name"><%= @user.name %></span>
<% else %>
  <%= link_to user_path(@user) do %>
    <%= image_tag("default.png", :class => "top-image")%>
  <% end %>
  <span class="name"><%= @user.name %></span>
<% end %>
<hr>
<div class= "messages" id ='messages' data-room_id="<%= @room.id %>">
  <%= render @messages %>
</div>
</div>
<div class= "message-form row">
<div class = "send-form offset-1 col-9">
<form>
  <input class="speaker_txt col-12" name="content" type="text" data-behavior="room_speaker", autofocus>
</form>
</div>
<div class= "send-button col-1">
<button class="button btn btn-primary"><i class="fas fa-paper-plane"></i></button>
</div>
</div>

Comments

[y_waiwai]

コードはテキストで提示しましょう
その際には、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

[tatsuhiros]

ご指摘ありがとうございます。変更しました！