app/javascript/channels/chat_room_channel.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import consumer from "./consumer"

consumer.subscriptions.create("ChatRoomChannel", {
  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) {
    // If scrolled to the bottom or near the bottom, then smooth scroll to the bottom.
    var shouldScroll = false;
    var chatOutputElement = document.getElementById("chat_output");
    if ((chatOutputElement.scrollTop + 100) >= (chatOutputElement.scrollHeight - chatOutputElement.offsetHeight)) {
      shouldScroll = true;
    }

    // Called when there's incoming data on the websocket for this channel
    var node = document.createElement("P");
    node.innerHTML = data.html;
    chatOutputElement.appendChild(node);

    if (shouldScroll) {
      chatOutputElement.scrollTo({
        top: chatOutputElement.scrollHeight, left: 0, behavior: 'smooth'
      });
    }
  }
});