 Some morning. All right, so this is how to build a blog engine in 15 minutes with Ruby on rails You know we all we all love that talk back from 2005 Let's let's get the volume. Let's get the volume out there. Can we hear it? Oops That's played into the mic. What's the plan to the mic? All right, you might spend a little too much time on the soundboard all right So this is my steam colleague knichi Nakamura also known as knichi pdx on Twitter Just knichi on github This is a photo we took last Saturday at Davey's barbecue pool party where I brought some freedom sauce And Ken was sniffing all the freedom sauce to figure out what we actually put on the ribs Take a man who takes his barbecue seriously He works at Esri pdx in town This is a Friday hug picture. We took last Friday Picture of the mascot Jill Loki from the startup Geoloki that was acquired by Esri So my little ponies as well in there So Ken told us when I came to town that he couldn't hang out on Wednesday nights because he had to go to a rock band practice So I was hanging out with Joan in this is what we pictured him playing the video game rock band With stuffed animals in the backyard, so pretty accurate pretty accurate But he also plays and a Davey Bowie band as well If any of you are here in town for design week in October and you like David Bowie visit this link and come check out a Awesome show by a cow a same forest from Portland and I learned Portland has the slogan keep Portland weird I've definitely found some weird things while I've been around Portland Probably because of all the reality TV that is happening So I've been trying to find fun things to do that don't revolve completely around drinking Though drinking might be somewhat related So I've been doing Ruby karaoke this year. This is a picture in Taiwan that I took Charlie Nutter and Arnie brister Singing a whole new world with each other This is pretty awesome Fun fact, I learned that Charlie Nutter has been to a backstreet boys concert in the last six years So there's that a very good backstreet boys karaoke singer by the way So if you want someone in your boy pop band, I would totally call on him This is a picture of Zachary Scott and Danish Khan when I was in SF doing Ruby karaoke I think they're also singing a whole new world. It's like a thematic duet thing that we do and and Staying in the theme me and Terrence met in Washington DC a Ruby nation and of course sang a whole new world together This is us and having a great time I mean you totally would want to be here for this you want to hear it. So speaking of So we're gonna do a 70 themes Ruby karaoke night for cascade Ruby at SC voice box tonight around 8 p.m. I Guess that's when the New York party started so it can sound like a good time In light of the gardens of the galaxy movie, which I forced Davey and Ken to watch with me So we could get in theme for this karaoke night all right, so this is my esteemed colleague Terrence Lee he Among Gangnam style and other things he is known as hone 0 2 on Twitter and He works for Heroku the Heroku of Heroku's yes Very nice paths that we all know and love He wears this blue hat all the time which I learned it comes from John Hopkins University and When let's see I met you in DC We're talking on the internet and he was like I want to make stickers of the blue hat So I tapped my co-worker Nick wise who's a lovely designer and within a day We had these shipped off to sticker mule and now he has stacks of blue hat stickers I do if you like Terrence you like blue hats You like stickers find him and grab some stickers. Yes. I have I brought 150 stickers to Portland just for this conference So I think there's enough all right So he's from Austin and Austin among other things like live music is known for delicious Mexican food And here are oh god. I'm hungry. That looks really good The breakfast tacos though I wasn't so impressed Austin also likes to keep it weird and in that vein Terrence is throwing a keep ruby weird conference this October I'll be there if any of you are going I will see you there and we can all say hi to this little frog thing All right, so here's our agenda lovely scribbled out and me you Creek Friday hug Friday hug so This is a tradition that I got from Aaron I believe or first off from Aaron where he would tweet pictures himself hugging the camera every Friday He did tell us it was Friday yesterday. I think but So I would like to invite Davey up on the stage to help us with Friday hug photos So basically you take a picture yourself hugging the camera and seriously when I've gone around speaking at conferences I've gotten fun pictures of everyone doing this So everyone stand up put your arms out. Yeah, we're gonna preemptive Friday hug this have to Friday hug Thanks All right Back to the agenda Oh, all right, so we got the Friday hug. All right, so we're gonna talk about web sockets a little bit about the reactor pattern Server send events. Maybe we'll get to a bonus round and of course we'll all profit at the end Okay, so web sockets. I mean, this is what I imagine my head when I think of web sockets But for those of you who are not familiar web sockets is a two-way communication channel between a client and server over TCP Communication and the big benefit of using something like web sockets is that it appears to the TCP protocol So if you're working in a corporate environment and you're stuck behind a firewall Me oftentimes you only have very limited select number of ports open like port 80 your port 443 You can use web sockets because it just piggybacks on top of TCP So if we look at a sample web socket handshake request It looks like a standard HTTP requests with a connection upgrade headers in so you tell the server Hey, I'm upgrading to web sockets and then pass some security So you don't get some cross site stuff as well And then on the response side you get a standard TCP response back and the server acknowledges Yes, I'm gonna do use web sockets like knowledge that you we've upgraded the connection and then you're kind of good to go So pretty easy to use over standard TCP stuff supported by most modern browsers actually all the modern browsers I believe and You don't necessarily need to have kind new infrastructure in place or really talk to your admins to kind of make that happen So it's a good technology for getting that out for a two-way communication channel All right, so the reactor is Something that's been around for a little while and implemented in lots of different languages twisted in Python node in JavaScript and It's a design pattern for handling concurrent requests and these requests can come from lots of things either user input or IO in this case Of course IO Often used in GUIs like I said for user input like on click whatever like in the dawn swing and java Listeners add event listener and so a common reactor in Ruby is the event machine one And it runs in inside an event loop that you have to put everything inside So it can be Yeah, so Inside of the event loop oftentimes you'll register all your handles handlers in there And so you would have one for your various events This example using the fab web socket client and then in here we're registering events for when the web socket opens You want to do some stuff and in this case you're just sending a hello world message back over the pipe And when you receive a message We're just printing that message out to the screen and then when we close that web socket in action We're just clearing out that variable and then printing to the screen that it's been closed and why it was closed So you want to register all your events inside the reactor and the the big benefit of doing something like this with besides getting the concurrency is that allows you to separate the event logic that you're doing with all the kind of hand-off code that hands the Events off and figures out where to run it all the demultiplexing happens for you in the reactor by the framework itself So you can keep the actual event logic clean separated from kind of any of the threading code or other things that you Have to you to kind of make this happen However, it can be difficult to debug because things can be hard to reproduce in this scenario Obviously if events are happening at different times a synchronously it can be really hard to like get a solid Reproduction case down and everything's non-deterministic You can get into crazy callback chains oftentimes in those famous for this callbacks that call callbacks so Speaking of node I mean has anyone has anyone loved doing jobs from the Dom Yes, no hands went up To two three All right, get out of here. No That's actually pretty awesome. Yeah, so I'm just yeah Just like a JavaScript has no feet neither does this cat Gory gory puff that Aaron was talking about say Aaron's cats He has a Twitter account that mostly posts pictures of the cat It's pretty awesome So we're gonna talk about this simple chat app we built just using very basic web sockets So first off in the back end We set this up using a rack middleware so in the constructor you pass the app in and then We're using red is here to deal with passing messages across multiple processes And kind of the the key points in this constructor is that When Redis receives a message, we're gonna go through all the clients that are registered and send that message down through the web socket So this is how all the Clients are going to receive the chat messages and then we have the call function which Aaron also alluded to Loving that large environment variable global thing. So This is that method there and They provides a convenience method for determining reading all the headers out of that environments to determine if it's a web socket or not And if it is we can run some code and if it isn't you can kind of just return back to the normal call stack When we instantiate a new web socket The interesting thing to note is that you can pass a bunch of options But one the important ones is this ping option So oftentimes most routers will close connections if it detect something's been idle for too long So you can set a ping time basically where if nothing has happened it will send a ping message to the clients So I think we set this constant to about 30 seconds And then the client will respond with a pong to keep that connection open and keep data flowing And then we want to go through and just basically register a bunch of event handlers So when we get a new web socket connection, we need to make sure to stash that somewhere so we can access it later So we keep an array of Clients around that Redis will have access to to send all the messages to When we actually get a message we want to publish this message to Redis So when that happens it then calls the Redis thing in the initializer That sends the messages out and then when we get a connection close We want to make sure to remove that client from the array, so we're not sending messages to clients that don't exist Oops, and that's really quiet But but we fortunately need some jobs for it. Yes But we still need some jobs for the front end so we have in the example app just a simple text field with a button and Inside the java scripts we insane chain your web sockets WS is the web socket protocol. You can use WSS for secure web socket protocol And then you basically establish a connection to the server that you have set up And then you can have sent set up some event handlers in this case It's just it sets up an alert so every time you receive a message you'll do a pop-up, which is Probably not what you actually want to do but you know And then when we actually get a message to send we can pull that from The click button and pull that from the text field and then send that down the pipe down to the server So then Redis will get it and we'll register it with the server and then send it out to all the other clients So we have a demo here That can's gonna drive All right, so you can all visit fea dash WS dash chat Herocraft comm And if everything is working Yes Whoops All right, look at that tater bases I'm waiting for the I'm waiting for the inevitable script tag with a rick roll URL in there. It's not gonna happen Whoops. All right, let you all play with that while we get back to So shameless heroku plug. We announced this heroku button last week, which I think is super awesome I was actually just talking to Mike about it yesterday and If you click this it's in the read me So if you go to the github repo when we post slides later if you click this button You'll get to direct us to this page if you have a broken count already if you don't you'll get asked to sign up And then it sets up everything that you need to get the app running And so you can either put an app name or not if you don't we'll come up with an awesome name for you And then you hit deploy and the app will get deployed on heroku and you'll have that awesome running Really basic web chat app working All right So that was a lot of work we had to do to get all those handlers registered deal with the on close set up the ping Yeah, that's just just for web sockets And still even then if you close your browser tab it won't send a close event over the web socket It'll just close the socket and then next time you try to write to it You'll get a syscall error all this stuff So I thought it would be really great if that would be a lot easier. I love Sinatra and I thought wow if there was like a web socket route builder that I could just do stuff in just like Sinatra that would be so easy so I looked up Frank Sinatra and Turns out he was in a movie called from here to eternity where he played a character named Angelo Maggio and I guess he won a best supporting actor for this I've never seen it. I think it's a Pearl Harbor movie or something But anyway, I thought a great name association. I'll call this thing Angelo. So here it is It's a DSL like Sinatra written on top of the real web server Which is on top of celluloid IO, which is a a reactor with non-blocking IO written on top of celluloid And just like so we've all seen Sinatra, right? It's really easy Four lines of code and you have a running web server You can go to high and get hello world back in your browser. It's awesome, right? So easy. I thought let's do that So here's an example of Angelo Require the gem have your class Run your web socket builder at the path slash it passes in the web socket And we want to stash those for later because maybe other requests might do things or other events might happen So nice easy web socket stash to put that in And then we we handle the on message and that's it when we get a message over the web socket We pipe it back out to every other connected web socket done. That's it. That's how much work You have to do to get to hello world. That's not a lot oops All right, so the other thing that so you look at it gives you is the ability to run asynchronous tasks and I thought that would be a great thing to have in there because a lot of times we will want to run these so I Have a task builder In this case you you specify a name for the task and what we're going to do here is just every second We're going to connect to or write out at the heart to every connected web socket in the heart's context Then when a web socket request comes in for the heart's route we're going to run this task asynchronously and Then add this web socket to that heart's context So then as you're going along and every second this web socket is just going to get that heart character Ruby love Ruby love task force right there So we decided to take the chat app that we had with Fay and a lot of other stuff and rewrite it in Angel Yeah, we need two cats for this picture Okay So just like the example that route builders going to look pretty familiar. We're going to stash the web socket We're going to run the task. Obviously, we only want to run it once because it's going to subscribe to Redis And then pipe it out to over over everything else And then again, we need to handle the on message. But really this is it look at all the code. I'm not writing Look at all the things I'm not doing so And here's our subscribe task We're going to set a flag that we've subscribed and really there's a lot of stuff here just connecting to Redis subscribing their channel yada yada and Mainly of the main meat is we're going to Take every message that comes down the Redis channel and pipe it out to all the web sockets So interestingly enough we did not have to change any of the front end from before the JavaScript with the input tag All that stays the same the simple Few lines of Ruby here does all the work for us It just uses Ruby everywhere and look at all the stuff I'm not doing so We have a live running demo of this on Heroku you can all visit angelo-test.heroku app and Again, hopefully we won't get Rick rolled up on the stage here But there it is still tater basis It worked Foo bar great. Oh my god All right Let you all play with that for a little while and get back to the presentation here All right, so now we're gonna talk a little about server-sense events another way you can do communication with the clients So when I was doing research for this talk You have to obviously read the Wikipedia page and I found out that it was an experimental technology That was built into operand 2006 that makes it eight years old. That's pretty old and Speaking of browsers If you work for the enterprise and we have to support like a bunch of Internet Explorer in like Browsers then you probably don't want to use server-send events because you'll have a bad time because it just won't work And but it does provide if you're not doing that It does provide this event source API that allows you to do a continuous downstream or Send messages From the server to the browser. So there's one-way communication channel And you're probably wondering why do I want a one-way communication channel if I can have to with web sockets Well, the nice thing is that it's proxy wall. So if you sit being sitting behind a firewall or Like another front-end server will automatically proxy that connection for you They are faster and then I think the biggest thing that can point out to me was that they automatically Try to reconnect. So if it ever gets disconnected at some point your connection drops from my internet You're using a my file or something. It'll automatically try to reconnect with the server without you having to do extra work In the code for that. So pretty awesome technology So just like the WebSocket route builder, I thought well, let's make a event source route builder So it looks very familiar And just like the WebSocket stash we might want to stash these for later. So there's an SSC stash as well Also since event source is just a normal get request with a different content type You can actually Upgrade a get route to an event source route by running a block inside that route handler Of course, it's a one-way communication from the server to the client So to get something to happen we're going to have to handle some kind of trigger in this case a post route and what we're going to do is just go through the stash and Write out an SSC message to every single connected event source client and with the message params You'll see this little SSC message helper there. That's because Server sent events come in a specific format. It's very simple It looks like this. There's events and there's data If it has no event name, it's just considered a message So you do the on message handler if it has an event in JavaScript you add an event listener to it for the name These methods do pretty much exactly what they say they do Take the event name the data the data's Jason It'll or that's sorry if the data's hash it'll convert to Jason for you because JavaScript All right, so we decided to rewrite that previous chat app with event source using post and event source Instead of the web socket We called it to one because It's not a huge upgrade. I guess and we also thought a cat close like point one of a cat. So All right. So on the back end, we didn't have to change much at all. We added the post route Looks very familiar Redis with publish out the sanitized message for all you trying to recall the chat room there And the event source handlers sashes it subscribes runs a task the task looks exactly the same except for One change here instead of the web sockets. We're going to iterate through the server-side event connections And on the front end remember we had these very simple things all we're going to have to do is change these three lines Instead of web socket. We're just going to set up a new event source Like you said it reconnects for you So if you're walking around town on your phone and you change IPs, whatever it'll just automatically reconnect and and then of course instead of Sending the message over the web socket. We're going to jQuery post it up to the server All right. There's also a live running demo of this on my line node we So you can all visit sse and First one first one on this one Anybody I'm not clicking that Mom oh, yeah double question marks. I don't know why I like comes up. Anyway, cool. So Yeah, in conclusion If you want to use web sockets, it's a good technology for doing duplex communication To a commutation pretty easy to set up. Just pay backs off of TCP. So that should be working for almost everyone Server-scent events are faster you get reconnects You can proxy those connections Be aware of using IE doesn't work with IE So if you have that limitation, then you'll have to look elsewhere for stuff, but definitely a great technology there You can use Angelo. It just uses Ruby everywhere. It just uses Ruby everywhere and You know, you can use it today. So It's out. There's gem out on github. It's a very early version. So, you know file issues Let me know help bank help me out And whoops whoops So if you're if you still do you probably still need to use JavaScript if you're the browser is the client that you can use Which is probably true for most people you can definitely build like Ruby clients if you want you can use TCP you can use TCP obviously Sockets between Ruby so you can build a complete Ruby WebSocket app with clients and browser or with client and server If that's what you want to do Most you will probably be using JavaScript there for the front end Look at all the things I'm not doing So real-time Ruby right WebSockets servers and events we can make this happen. It's a thing Please check out the gem if you're interested and thank you very much. I just want to go through this list real quick Tony our Siri bascule at all at the celluloid and projects and all them for making all those lovely things Hilargium for his infinite patients at Ruby on ales this year helping me debug some testing James Coughlin for Faye WebSocket My parent for sidekick because reading sidekick code really helped me understand celluloid a lot more Kyle Drake and yet for some real-time inspiration and T Patel I don't actually know him I think he works a living social but he filed an issue asking for a server sent events That's actually only like two three weeks old in the code base, so there's probably some bugs there And a Davey Stevenson for helping us with the slides and finding great pictures and taking the Friday hug picture Also DHH or all the saucers down board I mean as much fun as this has been that video was a big inspiration for me back in 2005 when it came out it was pretty Mind-blowing I think at the time of the amount of stuff that you do and All the things you weren't actually got me into Ruby. Yeah, so probably lots of you as well All right, so We have a minute we've one minute Okay, so as a demo last year my company made a game called map attack The back end was all written in node and it used web sockets and other things to stream locations up to a server The basic idea of the game is a real live action Pac-Man team-based type thing Where there's coins out in the city and you install this app you you join a team and you run around and as you Get near them they get claimed for your team if they are unclaimed. This is an actual board We are right here in the middle. This is set up right now and the game is running if any of you would like to play during the break You can visit these URLs to install. I promise non-malicious apps on your phones and And then at the when our talk is done They will put a viewer up on the screen that uses a web socket connected to angelo server That we can watch everyone running around and claiming coins on as The last live demo if everything yes Thank you very much. Thank you