Rails Tutorial | Action Cable Basics in Rails 6

hey steven here from techmaker.tv in this episode i wanted to do a little bit of exploration into action cable with rail 6. i'm going to be doing some more videos in the very near future that go into stuff you can build with action cable but in this one i just want to explore the fundamentals so i'm running rails 6.0.2.2 and i'm just going to create a new rails app called ac explorer for now and so essentially what this is going to be is just a very very bare bones example but it's going to show you how the data moves around and help you get a sense for exactly why all this works the way that it does in theory i'm still kind of learning myself so hopefully uh we can get somewhere useful with this video i'm gonna go ahead and pause this while this finishes okay so let's go ahead and just cd down into that ac explorer and then open up that code base here and let's have a look at a couple of things really quick so first of all if you're watching or reading any tutorials that are a little bit older they're going to tell you you need to configure a whole bunch of stuff and i don't believe that's the case anymore with one exception so if we open up cable.yml so you can see here that in development we have this adapter async and i have tried and not been able to get this to work just right so what i'm going to do is just switch for redis so we can just change this to say adapter redis and then url and then i'm just going to copy this one from down here in the production line so they recommend you use redis in production and i guess that this async adapter for development is meant to make it quicker and easier but i couldn't get it to work so i don't know what's going on with that if somebody knows leave that down in the comments because i'd like to know what it is but i haven't had the time to really dig into it too much so if you don't have redis and you're on mac you can do brew install redis not in straw install redis and then once you have it you need to run bruce services start redis if you're on something else like windows you'll have to look up how to install redis but i've already done all of that so i should already have redis running so that makes us ready to go with this so let's go ahead and run a command so if if you're not familiar with action cable at all essentially what it is is web sockets for rails to put it as simply as humanly possible so what we can do is something like i think it's rails g channel so this is a new generator that they've added and we'll just kind of stick with the classic simple example of the chat room so let's say rails g channel room and let's check out what this makes for us so you can see here that this uh started up a few new things we're going to ignore the test thing for now so we've got an app channels room channel dot rb and we've got a couple of things that we already had this index and this consumer thing we'll take a quick look at those but we won't worry about it too much and then we have this room channel.js okay so let's start by looking at our room channel.rb so that should be in our app channels room channel so we basically just have a ruby class that inherits from application channel sure application cable channel and then in our javascript directory channels we now have a room channel so it's calling this consumer subscriptions create giving it a room channel argument and then we have a few uh functions that are inside of this object here so um some of this may not be technically described perfectly but i'm going to give you my sort of basic explanation so a consumer is basically a person who is receiving data from a connection or a channel a subscription is just a connection or a subscription to a particular channel for a consumer so a consumer is just a user it's a person sitting in front of the computer or in front of their phone or whatever and then when you create a subscription essentially you're taking that person and connecting them to a specific channel makes sense and then these functions down here are sort of like life cycle events essentially so you've got a connected this gets run as soon as the subscription is connected for the consumer the disconnected is the opposite and then whenever a message comes in through the channel this received data gets called so bear in mind i mean um this is the javascript right so this is sitting on the front end so on the back end what's happening is we have this room channel and essentially all we're going to do in this episode is take a look at this subscribed method but essentially this is just setting up the channel i won't lie to you so as with many things in rails when you first encounter them some of this is still somewhat magical to me so as i learn more i'll offer better explanations in future videos but let's go ahead and dive in and see if we can get a quick example working so i'm just going to uncomment this stream from some channel and we're going to change this to be room channel okay and pay careful attention because i believe that there's naming convention things happening here as with most things in rails so we're saying create a subscription to room channel and then up here we are stream from room channel i assume that's probably uh connected in some way here let's just console.log connected to room channel okay and we probably don't need that comment but i'm just gonna leave it there okay so with all of that in place let's run a rails server and let's open up i think i have a browser window open back here already so let's move this around just a little bit to get a little more space and let's open up well let's go to localhost 3000 and let's go ahead and open up our terminal down here so i don't actually have anything happening because i need some routes i think so let's set up a quick controller here rails g controller and then we'll just say pages index okay and that's good and then we'll start our server back and then in our routes let's say root pages index and then over here let's refresh and if our server has started back we should be on root index now or pages index okay and let's check our console here so nothing happening yet so one thing i forgot to do is in the gym file we need to add redis and so let's go back over to the terminal stop the server bundle okay so it says i'm using redis 4.1.3 okay so that's good start our server back let's just keep an eye on this for a second here we'll restart and so i think that was just the problem is we didn't actually have redis installed so it couldn't transmit anything so now we can see here in our terminal that we've successfully upgraded blah blah blah room channel is transmitting and room channel is streaming from room channel and then back over here in browser we can see down in the javascript console we've console.log connected to room channel okay so let's do some more interesting stuff so we don't need the routes anymore let's leave open that room channel.rb and so what i want to do really is actually just play around with receiving data so in a lot of tutorials you're going to look at they're going to kind of do a lot of ui stuff here and i don't really care about that yet what i actually just want to do is just see how do we pass data around so if we console.log the data we should be able to open up and let me just make sure that i refresh this so that the room channel js is reloaded so if we go back over to our terminal let's open up a new tab and run a rails console so in here we should be able to say action cable so we can talk directly to like these objects right so we can say action cable dot server and then in here we can say action cable dot i just kind of looked at that to see what i was in there but we can do action actioncable.server.broadcast and then we just need to give it the name of the channel so room channel and then i'm going to give it a let's just give it an object let's say like message hello and so you can see immediately that this gets sent over into our our browser console so that's essentially the entire flow i think it's telling us here how many uh how many uh people it sent that to or what's the consumers that it sent that to let's actually try to set up another just an incognito window here go to localhost 3000 open up the developer tools down here says it's connected to the channel just going to make this ridiculously small up here move that down okay so now we can see both and then let's run that again and now it's not telling us how many people have sent it to it's just uh i don't know what the one means but you can see here that we're getting this out uh in both places now so this is cool and everything but i want to take this a little bit further because um i've always been a little bit bothered because this isn't really a realistic situation um what we really want to do most of the time is have like specific chat rooms in this place or in this case and in order to do that we need to set up two things so what we can do if you look at what we did here with action cable server broadcast room channel you know you could put any text you want in here and it will broadcast that message to that channel but there's nothing connected to that right now so it won't do anything so what i'm going to do is actually say underscore and then there's a params object that this has access to similar to a controller so we can do string interpolation in here if we have double quotes and we can say params and let's just call it like room id so now back in our room channel js so now what this is going to do this is flexible now now you can actually pass in a different id in different situations and have different like separated rooms right so what we can do for now we're just going to hard code this for the moment um but what i'm going to do is actually say instead of just saying room channel here we can do is pass in an object and specifically label this and say okay this is the channel param and then i'm going to pass in another param of room id and we'll say just like the number one okay and then we'll need to comma separate that and over here so we have room channel room id room id so all that matches and let's refresh this one okay and then back over in our terminal let's execute this uh what we did before with roon channel one okay so you can see how that works but how can we actually uh split this up so that we are able to dynamically pick the room id so first of all let's see if we can make this work like this so let's see if we can make this work where this only runs after the page has loaded because right now if you look in application.js which i was just doing so we're just requiring this channels which is calling this index.js here i think const channels require context which is doing some regex and loading anything named underscore channel.js so what i want to find out is if i can do something like documents.add event listener and then let's listen for turbo links load and let's see if we can bump all of this stuff up in there and have that still work as we expect so let's refresh this thing and still telling us we're connected to our channel and let's go back over here and broadcast again to room one and we're still getting our message so that works that's good so we're going to kind of iterate through something and it's going to sort of work out exactly how rooms will work here so i'm going to open up pages index really quick and i'm just going to put in here a div with an id of room id and then i'm going to say data room id equals one okay then back in here just inside of add event listener turbo links load i'm gonna say const room id equals um let's see document dot get element by id and then we're going to say room id is that what i call that no with a dash okay so that's gonna get us that element and then we can say um uh const actually that's let's call that element and then we'll just say const room id equals element dot get attribute and let's call it um what is it data room id and let's just console.log room id really quick right here to see what's happening okay and let's just refresh this thing and see where we are so we're logging out uh room id cool so then what we're going to do here is connected so first of all what i want to do is print out something like connected to room channel plus room id to keep that there and then here i'm going to put a room id so let's refresh now and see if we're still working connected to room channel one then over here let's see if we can still broadcast to room channel one yep perfect so we're not gonna build out everything that you would need for a chat room but i'm gonna finish out one thing on the back end just so we can kind of complete the circle here so i'm gonna create a new controller and it's gonna be called rooms and it's to have just a show action okay and what did i do could not find contoller perfect let me just learn how to spell really quick still not controller okay and let's jump back over here into our controller so go rooms controller and then we have a show action and then what i'm going to do is just say at room id equals params room id okay and then in my routes i just need to make sure that room show is get rooms id and then we're going to point at the show action and that should just be id actually not room id okay and then we need to open up rooms show and i'm gonna copy my same little snippet from here and let's pop this down in there and then this instead of that is going to be at room id okay so now let's go to slash rooms slash four okay i didn't do something right where did i go wrong my routes get slash rooms colon id that should fix that um missing action okay and i need to oh boy it's a lot of syntax errors okay there we go so now we can see here we're connected to room channel four and if i open this up and we go back into our rails controller let's just cycle up and let's hit this with the number four and we can see that we're broadcasting hello so now we can actually go and um let's go to rooms for let's broadcast the same message again and they both get it now we can change this to five and he says he's connected to room five and then we can broadcast to channel five and only the top one gets it so that's pretty cool and you can see how that's essentially the basis for a chat application so the only thing left to do really is hook up some actual uh database models so that people can create accounts create messages and create rooms and yeah so that's basically it so i think what i'm gonna do is i'm gonna create a more fully featured video in the next one or in the next video that i do the next episode where we go into building out a real chat room with the front end and i'll probably kind of gloss over some of the details that we covered here and just kind of assume that you went through all of this so if you're interested in that definitely subscribe to the channel we'll be releasing that probably in the next few days uh i'm planning to do a lot more stuff with action cable because uh i'm just kind of getting into it right now so um if you like this video give me a thumbs up and i really appreciate it and i'll talk to you in the next episode

Channel: Techmaker Studio

Views: 11,420

Keywords: action cable rails 6, action cable chat, action cable, ruby on rails 6, ruby on rails projects, rails 6

Id: t9iubpbqmnM

Length: 20min 7sec (1207 seconds)

Published: Thu Apr 30 2020