Skip to main content

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

Rails • Asked by Rex

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("")

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 22,346+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.