action_cable.js

// This .js.erb file lays the foundation for the chat messaging capabilities in my Local Swap project, a project I worked on for a number of weeks while learning Rails. There are dispersed lines of code throughout the project that lay down more of the infrastructure for websocket connections using ActionCable and Redis, but the code below creates the main functionality of that chatrooms.
// github: https://github.com/PatrickCLipscomb/Local-Swap
// heroku: https://local-swap.herokuapp.com/
// PLEASE NOTE: in order to use the chatroom in the live app you must first sign into the application

// in the app/assets/javascript/channels folder
$(document).on('turbolinks:load', function() {
  submitNewMessage();
  // Here, I establish the subscription to the ChatMessages Channel, and define a received function. Received is a callback function, it will be automatically invoked every time Action Cable broadcasts data to the ChatMessages Channel. There is a different client side subscription for every chatroom in the ChatMessages Channel.
  <% ChatRoom.all.each do |chat_room| %>
  // Looping to create a channel for each chatroom that exists
  // The App.chat_messages subscription object responds to a function, send, that will send data to the ChatMessages Channel to be broadcast.
    App['room' + <%=chat_room.id%>] = App.cable.subscriptions.create({channel: 'ChatMessagesChannel', room: <%=chat_room.id%>}, {
    // the function that will fire when data is received by a channel
    received: function(data) {
      // This will unhide the chatroom when it receives its first message
      $("[data-chat_room='" + this.chat_roomId + "']").removeClass('hidden')
      // this will make sure the chatroom window is always scrolled to the newest message
      $("[data-chat_room='" + this.chat_roomId + "']").scrollTop($("[data-chat_room='" + this.chat_roomId + "']").prop("scrollHeight"))
      // this will append the new chat message text to the chatroom window
      return $("[data-chat_room='" + this.chat_roomId + "']").append(data.chat_message);
    },
    setChatroomId: function(chat_roomId) {
      this.chat_roomId = chat_roomId
    }
  });
  <% end %>
})



// submitNewMessage() will fire when someone hits enter on the new chat_messages form, will send data to the the ChatMessages Channel to be broadcast through App.chat_messages. At that point in time, App.chat_messages will send the new message content to the channel.
function submitNewMessage(){
  $('textarea#chat_message_body').keydown(function(event) {
    if (event.keyCode == 13) {
        var msg = event.target.value
        var chatroomId = $("[data-chat_room]").data().chat_room
        App['room' + chatroomId].setChatroomId(chatroomId)
        // The Subscription instance's send function (below) corresponds to the subscription's channel's receive function.
        App['room' + chatroomId].send({chat_message: msg, chat_room_id: chatroomId})
        $('[data-textarea="chat_message"]').val(" ")
        return false;
     }
  });
}