First thing is first, now our chatroom sidebar is disappearing as soon as you start to scroll, which isn't ideal, and then the navbar itself is disappearing as well and the name of the channel is disappearing too, so we kind of want to position those three fixed on the page, so let's go do some tweaks to that now that we know that we need to do that. One thing that we could do is go into application.html.erb, and we can go up to our navbar here and add in which is a bootstrap class that will make the navbar on the top fixed of course, so that will position that so that it's always there and is always available. Of course that means that all of our content gets pushed up and the navbar sits on top of some of it, so you can see that you can't really see the top of the page anymore when you scroll to the very top, so this means that our fluid container needs to have
<%= form_for [@chatroom, Message.new] do |f| %> <%= f.text_area :body, rows: 1, class: "form-control", autofocus: true %> <% end %>
We also need to add
$(document).on "turbolinks:load", -> $("#new_message").on "keypress", (e) -> if e && e.keyCode == 13 e.preventDefault() $(this).submit()
This did submit it, now we have to build out our messages controller in order to create that message
class MessagesController < ApplicationController before_action :authenticate_user! before_action :set_chatroom def create message = @chatroom.messages.new(message_params) message.user = current_user message.save redirect_to @chatroom end private def set_chatroom @chatroom = Chatroom.find(params[:chatroom_id]) end def message_params params.require(:message).permit(:body) end end
Let's just make sure that this works and redirects us back to the chatroom, now we don't have it being displayed there, so if we go to chatrooms show, we can remove this fake loop that we had, and instead we can say
<div data-behavior='messagees'> <% @chatroom.messagees.limit(100).each do |messages| %> <div><strong><%= message.user.username %></strong> <%= message.body %></div> <% end %> </div>
That should take us now back to the Gorails users, and if we log in to localhost:3000 with a different user and we join the general channel, we can go to that channel and we should be able to see that message here but we did not. Let's go back to the he page, let's go to random, and we see the message there, and I should be able to type in "Hi", and I don't have a username so let's go set that, because I've hadn't updated that user from when I created it before we added usernames, so now if we go in there, you can see that user said "Hi" but it hasn't updated in real time because we need to add ActionCable for that but if we refresh the page we do ge that message, so we have a basic chat going on right now, and you can jump between the channels, and the other user should be able to navigate to it and see it, and all that should be working, and the messages are also in order by default because the normal query pattern is that you have the id numbers in your database and you start from one and go up to whatever number you have and it will always query those in order where it should, but you're going to want to make sure that you set the order on your messages, and really you probably want to say created_at is the timestamp that you want to order by, so you want them to be descending, so you get the most recent ones, but you're going to want to reverse them, so what will happen is you want to grab the most recent one hundred, and then that will be the most recent messages at the top, but when you insert them onto the page you actually want to insert them in reverse order, so you wan the last one to go first and then the next one to go under that, so you kind of want to flip this array around and then print it out in the html on the page, so you have to query with the newest items first and grab those hundred, otherwise you won't get the right ones, and then you have to reverse that array to get the right ones to print it out on the page correctly, so the way we're going to do that is we're going to add the reverse method here, and this will take the results that we got from ActiveRecord, and then reverse them before we do each, so if you see in your query, you should still get these SELECT messages with the order created_at as descending, and that shouldn't affect the results that you get, so this should display now.
Transcript written by Miguel
Join 20,000+ developers who get early access to new screencasts, articles, guides, updates, and more.