Realtime Group Chat with Rails: Revised - Part 1

[Music] you guys in this series we're gonna be revisiting our group chat with rails and action cable and we are going to be implementing that with the latest JavaScript and web Packer in action cable and rails and use stimulus J s a little bit to handle our WebSockets incoming so let's dive in we've got a lot to talk about first things first we need to generate some models every brand new rails application I created using jumpstart and we have all of that ready to go so our rails application has no models in it right now aside from a user model with devise and it's got bootstrap in it so let's go ahead and generate a model for our channels let's call them scaffold actually so we'll call them channel and a channel needs a name of course like general random whatever else you might need in there and that's probably really all we need on our channel itself so then we're gonna need a model for our channel users so this will be it belongs to between a channel belongs to and a user belongs to and this will be the join table between users who are currently in that chat room they may or may not be online but they were actually in that chat room so let's go ahead and create that model and let's create a model for our message which is going to also have a channel belongs to and it's going to have a user belongs to and a body we could do this as either rich text if you wanted to use like action text we're fancy formatting in HTML and all that or you can just use a plain text column and you know build your own little markdown parser or whatever like slack has so that's entirely up to you I'm gonna just use a regular text column here and that will be our message model now that should be all of the models that we're going to need for this it's pretty simple pretty straightforward so let's run it rails TV migrate and we'll probably come back and add another migration later on for direct messages because you can really think of a direct message as a private channel so we'll probably have a flag on the channel to implement those later on and then the users just can't be added to those automatically like you can with regular channels so let's go through and go into our models folder and set up our associations so a channel has many channel users and so does the user as well so we'll put that in here and a user has many channels through channel users and a channel has many users through channel users as well as has many messages and same thing for the user has many messages that way if a user wants to delete their account you can delete all their messages as well same thing for the channel if you delete a channel you can delete all the messages from there and so we can do dependent destroy for those two models and that's going to take care of the Association for those so we'll also have a validates name presence is true on our channel to make sure that when you create a channel it has a name so we can reference that in the UI and I believe that is all we really need to do from our model perspective for the most part we have our belongs to use automatically set up from the migration and yeah we can probably start diving in to actually building out our UI for the channel so let's open up our routes file and change the route to channels index so that we have that as our homepage then we can go add a new channel after booting up our rail server of course and we'll add like general and then let's create another channel called random very similar to slack but each of these show pages we actually want to display the chat messages and all that stuff and this page so we're going to need to change the channel show view quite a bit so let's go into that and start reworking on this page pretty much entirely so let's get rid of this stuff and start filling this out so what we want is kind of two columns in here so we're gonna have a div row and bootstrap to separate those columns out and then we'll have a column small too and we'll do the same thing for the main chat area and we'll have a column of ten over there and you know on the left side we want to have a way to easily switch between your channels so we'll have like an h6 in here channels h6 we can also do some stuff in here like let's go ahead and add a D flex and justify content between and what we can do is link to the Kahn will just be like a plus for this and new channel path that's going to give us a little link in here to create a new channel but then we're going to need to go through all of the channels that we've got so we'll say a channel dot all dot each do channel and we can create a little div and link to the channel so we'll say link to channel name channel and will display that there now we can also do it a little bit here to add like an X button so that when you are in the channel as an actual member of the channel and when you can actually remove yourself from the channel so if we say current user dot channels that include this channel then we know we're looking at a channel you're a member of and we can have a little link to with the icon from front awesome FAS x and i think we need the FAS up here as well for the style of font awesome icon and then we can actually have a channel channel user path with the channel passed in and we'll have a method delete so what that will require is us to define in here a resources channel users are actually a singular resource because if you are wanting to create or delete your membership of a channel this resource being singular means that we can always operate on the current user without having to pass in an extra ID for the channel user itself because the current user is going to be the identifying thing there so that will work for that and it allows us to you know display those channels on this sidebar eventually we'll go through you know and display all of the channel users here we can display like you know a channel users dot each do user one a little h6 here probably the same kind of thing we maybe don't need a link there but we can leave seem div flex around there so you can add maybe a link to DM them or something and you can have your list of channel users so this is going to be pretty straightforward we'll just link or display the user name and a div and display those users so we'll leave that alone and we'll add a little link here down at the bottom and see if you're currently logged in to the channel you're looking at so for this one if you are logged in to the channel will display a little form here to send a message to the channel or we'll have a link to join channel and we can even be cool about this and said join channel name and display you know some text there and that's going to make it so that we can link to the channel channel user path with at channel being passed in and this will be a method as post so this sets us all up for going and creating a channel users controller to handle to join and leave so if we have a channel users controller dot RB class channel users controller inherits from application controller we want to have a before action to authenticate user make sure the user is signed in and a for action set channel then our before action set channel is going to simply look up that channel so I say at channel equals channel dot find params channel ID then our create is going to be pretty straightforward we'll say at channel channel users where user is current user first or create and then we will redirect to the channel and our destroy it's going to be similar we're going to look for the channel users but we're going to destroy all and we can send you right back to that channel simple as that so this is going to allow us to create those associations between a channel and a user if we refresh our page we can take a look at all of this right now we have the current user dot channels being called and we are not signed in so we need to go and update our channels controller we can either set before action authenticate user across all of that or you could do you know and accept index so that you would have to be signed into an account if you're trying to look at an individual one so let's go ahead and create an account and log in so that we can view that channel and once we are in then we can double check and make sure that we have everything right here now for our channel show I made a typo here that we should do the at channel so we're looking at the current channel here but up above we want to display all of the channels at the top so those need to be scoped to nothing so this is all of the channels and this needs to be at channel so it's the current channel we're looking at so if we refresh now we have a bit better of a page we can join this we are now a user of that channel the X shows up here we can join random and that is good we can click this button to remove ourselves from that as well so this works great and the only other change I want to make here is to add the D flex justified content between to our channels so that when we join a channel the X shows up on the right side of that like you would see in slack so this works great and now we can move on in the next episode to actually implementing the action cable chat to make all of this work so let's dive into that in the next episode I will talk to you there peace [Music]

Channel: GoRails

Views: 2,878

Keywords: Ruby, Ruby on Rails, Rails, Javascript, HTML, CSS, Servers, Databases, Screencast, Tutorial, Rails 6, Action Text, Active Support, Action Mailbox, Webpacker, Active Storage, Active Record, rails testing, ruby on rails testing, ruby testing, devise, rails devise

Id: kTeRu40NaV8

Length: 13min 9sec (789 seconds)

Published: Mon May 25 2020