 we like to do is we like to have fun but one of the problems that we have at the office in particular is that we have a single bathroom this one bathroom services about 15 to 20 people it's across two different teams two companies shared co-working space you can't see the door from where you are so it's it's kind of in that space right there and this leads to a pretty obvious problem like you get up you go to the bathroom someone's in there like oh yeah and so you go back sit down and then couple minutes later we go and you do you repeat this over and over again and it's really annoying and actually is somewhat stressful just a little bit because what'll happen is you're like can I go should I go do I go now do I go later what what do I do so of course we're engineers though so what do we do we buy a pie and then we take an old one of course because we're cheap engineers and then we take a door sensor from element 14 and we slam them together and we build this thing that tells us the door is open because it's so important to know and so this is us running the night haza hey all right so for us this is a this is it's ghetto rigged it's literally taped to the door I untaped it to bring it to you guys so I can show you guys here today but you know this thing is awesome it's it's bulletproof it basically right it was up 25 days uptime you know that's that's cool right for being taped to a wall how much how much can you complain about that so let's see if this sucker is still working hey so this is the rudimentary thing right but and it the pie runs Ruby it's it's just a Ruby binding to the the GPIO pins and it's really simple but come on guys we're rails engineers right why do we stop there we don't want to stop there we never do right so we do start doing ridiculous things like it just so happens to turn out that you can actually go to this if you want all right let's do this so yeah why why stop there so you can actually go to this if you get on the Wi-Fi it'll hit my computer you can't actually go through the internet I tried to do that I wasn't being happy anyways so we can do we can do crazy stuff like see all the different stats that we have so Monday would have been like four visits total I didn't update this database because it's my local machine but you know an hour 25 shortest three minutes whatever you know it's it's a little interesting stats for those who are interested as data scientists any data scientists no okay just kidding but you know we get to see how people come and visit over time and because this is rails 5 we're like why not let's let's throw an emoji chat system into it for fun but anyways so this is this is all this is all rails 5 and so the cool thing is it's very fast right I was hoping to show this over the internet because it's it feels it's just as fast basically and so you know it the door opens and shuts and the beautiful thing is you can notify be notified of the next open so I'm sitting here I don't want to pay attention to this right I want to go do other things and then because it's a JavaScript alert it'll just take over my machine and tell me that I need to go to the bathroom and you're like yes come on guys so this is this is what we you know a little bit of fun that we have doing and so this is this is rails 5 this is action cable and this is how I said go out past we start doing things we take little ideas and we start with them we grow them and so now we're taking rails 5 and we're building a new entire platform with action cable react on the front end and so these are the kind of things that we want to do and so to bring it back I want to I want to show you guys just a small part of it specifically the three main parts of action cable if you've already done action cable don't you know go to sleep this is boring to you but the three main parts of the JavaScript client the thing that consumes it the channel where we sit and wait for stuff to come and then the broadcaster which is the obviously finding the event and sending the actual data so I'm gonna apologize I'm gonna sit down for this particular part and we're just gonna run through it so here we go so with rails we can do something like rails G channel the users connected so can I zoom in a bit how do I zoom in on this command well okay cool let's see how well this works all right is that how we doing someone someone tell me what's going on okay cool so what I want to do here really quickly is just build a simple feature of knowing who's connected to the website if you if you look back at the website my name is Luke Skywalker when you refresh this guy you get a different Jedi name okay obviously why not right okay so using the scaffold we start building the you know just using it and because it's an existing project I don't want to overwrite anything but it'll create two main things for us it's the channel right here as well as the coffee script consumer side but we still have to build the broadcaster side so if I open up okay here we go no this is only gonna okay it's not gonna blow up my directory so I apologize but if we go into the app most of you guys should know this pretty well the new thing of course is the channel folder and then so we can see that I have the chat channel which is the emoji chat I've got the door events which obviously open and close and then now the new one is a user connected so from the user connected we have two basic subscribed and unsubscribe functions everything happens for the handling of the channels in these two inside these inside these files so the main thing that we want to do is when I subscribe I want to stream from something so I stream from a channel name now this is key you have to remember these two things is some channel and users connected channel these are actually separate names but in a lot of tutorials that you read online they they look really similar and so it can get kind of confusing when you're going through it I definitely got confused the first time alright so for this we're gonna say new users and that's pretty much it that's all I have to do to be able to listen in a particular channel so then I need want to broadcast onto the particular channel and so what we've done is with this particular project you get assigned a name when you load the controller so on the home controller I have a set username so I want to broadcast so this so it's action cable that server dot broadcast did I spell that right let's hope so and then the first argument that it takes is the name of the channel so this is like a reddish channel really similar and then we pass it the information we want as a hash so HTML now please don't ever do this of course but I'm gonna do terrible practices welcome let's say at nickname to the channel this is HTML so I want I need to break it and then HTML safe as I said before please never do this in real life let's do something like bolding the name so it's easy to see and then that's that's it that's all I have to do to set up the sending of the data so now I need an anchor point I want it to show up on the page and so my goal is to kind of get it to show beneath the currently connected here no one's connected interesting is anyone trying to get on just kidding no home index so I'm gonna go to the home index and place it in really fast under currently connected so row call sm 12 we use bootstrap obviously let's do a well and then we're gonna do new dash users okay so now have a place to anchor my data that I wanted to go to so the last piece is anyone the consumer side okay so for the consumer side we go into the assets and inside the assets there's the JavaScript folder and then your new folder is this channel folder this is how you consume the particular data so we have the channel that you're gonna sit in the way we broadcast it and anchor to the data now we just need to consume the particular data so inside the channels folder I got to see three same three things like I do with the Ruby side so I'm just gonna go inside the coffee gives me a basic boilerplate and the interesting piece to note when we start it is this name this is what the the WebSocket side the the JavaScript side is using to be able to identify which piece of Ruby code we're gonna be running and it's the name of the model not the channel name that's the other key part that I was hoping that everyone gets feel free to come by and ask me later I actually don't know much just kidding so we want to anchor this particular data append data and then in my home controller I broadcast on HTML so man they did a really good job I just do that and so this is basically all that we need to do to get this all these six people connected and so now what we can do is oh someone else connected so this is what we can do look at that we're basically running WebSockets guys and so this is how you can add different features and yeah so you can consume you can produce information you have to think a little bit differently but this is all I don't I don't know I love this maybe maybe maybe not but and then we can have like emoji war or something like that but anyways okay fun times over this guys so some of the gotchas that we ran into while we were deploying this complication and things that we ran in with that we're gonna be running into later is that you have a production RB and a loud request origins this actually says what website you're coming from this will cause you to not understand why your applications your WebSockets not connecting same with Apache and engine X you actually have to say I'm using WebSockets otherwise it will outright reject it it won't accept the connection if you're looking to do a little more advanced things what we want to do with this originally was we wanted to have this guy running WebSockets as well but it turns out you can't actually directly connect with faith and so because when they built action cable action cables built on top of faith and so you have to use a small protocol that they built for this particular thing and there's a bunch of libraries out there that are already built so you can just leverage them but just know that if you try to connect a basic faith client it'll connect in it'll look like it works but then your your server will just reject you and that's pretty much it so thanks guys hope you enjoyed and yes we are definitely hiring right now we're looking for two in Rails engineers now and then two over the next six months so please come by see me ask any questions come play with the thing I don't know yeah all right so I can the rails for this guy oh it's not rails is running on the Raspberry Pi apologies it's running Ruby so the Ruby side is very simple because this pie is quite slow let's just do oh man I'm sorry I shouldn't show you guys that anyways so this is all it does you do a pin dot we create the pin up above and then you wait for a change on the pin it's just a full it's just a loop a loop true sitting there and it's a blocking loop and then it reads and then it just passes the open and close event all the way back up and we post the event to the web server that's all it does it's James you remember oh pipe I put there we go yeah yeah so actually our our desks are you can't even see the door from the desk or the whole area and we're behind walls and actually the dev team sits up a spiral staircase so the the cost of benefit analysis of going downstairs is very expensive did any other questions guys I don't want to take up too much more