All threads / Group Chat with ActionCable Unread Messages Div Appearing on Messages I send

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Group Chat with ActionCable Unread Messages Div Appearing on Messages I send

Rex asked in Rails

I just finished episode 7 of Group Chat with ActionCable. When I send a message, the "unread messages" div appears in the browser window of the sender as well as the recipient's window. Any ideas why it's apearing in the message sender's window?

barrooms/show

<% unread_messages = false %>
<div data-behavior='messages' data-barroom-id='<%= @barroom.id %>'>
  <% @messages.each do |message| %>
    <% if !unread_messages && @barroom_user.last_read_at < message.created_at %>
      <% unread_messages = true %>
      <div class="strike">
        <span>Unread Messages</span>
      </div>
    <% end %>
    <%= render message %>
  <% end %>
</div>

barrooms_controller

def show
    @messages = @barroom.messages.order(created_at: :desc).limit(100).reverse
    @barroom_user = current_user.barroom_users.find_by(barroom_id: @barroom.id)
  end

channels/barrooms.coffee

App.barrooms = App.cable.subscriptions.create "BarroomsChannel",
  connected: ->
    # Called when the subscription is ready for use on the server

  disconnected: ->
    # Called when the subscription has been terminated by the server

  received: (data) ->
    active_barroom = $("[data-behavior='messages'][data-barroom-id='#{data.barroom_id}']")
    if active_barroom.length > 0

      if document.hidden
        if $(".strike").length == 0
          active_barroom.append("<div class='strike'><span>Unread Meassages</span></div>")

        if Notification.permission == "granted"
          new Notification(data.username, {body: data.body})

      else
        App.last_read.update(data.barroom_id)

      active_barroom.append("<div><strong>#{data.username}:</strong> #{data.body}</div>")


    else
      $("[data-behavior='barroom-link'][data-barroom-id='#{data.barroom_id}']").css("font-weight", "bold")

      send_message: (barroom_id, message) ->
        @perform "send_message", {barroom_id: barroom_id, body: message}

js/barrooms.coffee

handleVisibilityChange = ->
  $strike = $(".strike")
  if $strike.length > 0
    barroom_id = $("[data-behavior='messages']").data("barroom-id")
    App.last_read.update(barroom_id)
    $strike.remove()

$(document).on "turbolinks:load", ->
  $(document).on "click", handleVisibilityChange

  $("#new_message").on "keypress", (e) ->
    if e && e.keyCode == 13
      e.preventDefault()
      $(this).submit()

$("#new_message").on "submit", (e) ->
    e.preventDefault()

    barroom_id = $("[data-behavior='messages']").data("barroom-id")
    body        = $("#message_body")

    App.barrooms.send_message(barroom_id, body.val())

    body.val("")
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 33,665+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.