Episode 138 · September 13, 2016
Build a reactive multi-user spreadsheet web app with ActionCable and RethinkDB
This will allow us to grab that stream from the NoBrainer streams gem that we were just looking at in GitHub, so this is going to allow us to use that to stream stuff across ActionCable, so we'll be able to do that, and we'll paste that into app/channels/active_users_channel.rb. So it appears that the ActionCable stuff here, is basically when you subscribe, when you join, when you open a tab up and you've basically joined the ActionCable connection, you will subscribe. That will say: Let's just create a new user, it doesn't take any data, so this could be changed to use like current user, if you're doing something like Google Spreadsheets where you have accounts and your users are logging in. This is more of the anonymous user, so we're going that approach, and then, this is creating it in the database and then we're using the data to stream from, so this is saying: stream from the user's table for the most part, I'm not sure what include_initial does, but I'm sure we can look it up and
NoBrainer::Streams if we want to find out. I'm going to say that's probably not super important for us at the moment, so let's keep going with the tutorial, but this should set up our stream to RethinkDB automatically, so that's pretty cool. Let's refresh the page here, after I restart my rails server, and refreshing the page should connect to ActionCable, which would start the subscription on the channel, which should create a record in RethinkDB, so if we go to localhost:8080 where the admin console is, we now have one table, and we have 4 MB of disk space used, which is interesting, and so we have a user's table now. I don't know if we can see the records in here, this is probably about five documents, so I don't think that you can actually cd records directly. Maybe there's a way to do that, I'm not entirely sure.
There's about five documents, something like that, I think there's actually one, but this is more for an overview of your database as opposed to like a direct access to view it, so this is possibly saying: About 5 because it's less then 5, and if it's that, then we don't care. Maybe that's how that works, I'm not entirely sure. That did create user table and I'm sure included the record. We can probably also look at our logs and see, here we go at the yellow and the red, we can see that it created the spreadsheets_development in the database, and then the table_create created a user with a shard and a replica and a primary key, and it inserted an id, and yeah. It seems to have worked, and it seems to have created ActionRecord is loaded which we probably don't want, we can remove ActiveRecord.
This automatically created the database, it created the table, it created the record, which is all steps that you would have to do yourself with ActiveRecord because you have to create your database, you have to run your migrations, create the table, you have to do all that all yourself before you can insert a record, so this does it automatically. It's kind of one of the niceties of NoSQL or that style of database, because it's a lot more free flowing, which is nice. But there's not actually structure, so you can't count on every record being the same, because you could add in some extra fields in there, and if you don't write your code flexibly to be able to detect and use those, then your code is not going to get really any benefits from using NoSQL, because you really just wrote structured data in NoSQL, and it would probably be better in relational database.
Anyways, let's continue on with application and check this out.
subscribed lifecycle callback creates a new user,
unsubscribed deletes that user, so this will maintain that list of users in the database and make sure that we're not creating a bunch of users, and then they're disappearing. I'm curious, when you close the tab here, this should actually create that, as you saw, there's the red mark there, it jumped, which means that it did a write, and now we have zero documents, which means that we had one document before, we deleted it, and now we have zero documents, and we're able to watch that in real time. This admin is actually doing the watching for chainsets or whatever in order to get real time updates as well as the management console, that is neat as well.
Everything seems to be working fine, the unsubscribe happens automatically when you close the tab, the connection knows that it was disconnected, the
unsubscribe runs, deletes the user, and our database is kept clean, and we don't have hanging users in that table. That's pretty cool, let's go over into our
<section id="active_users"> <h2>Active Users</h2> <ul id="active_users_list"> </ul> </section>
console.log data in order to see what's coming across, so if we print that out, we should see this object. We have new_val, and so we can see that there's that new user, and I bet if we open up localhost:3000 again, we'll see another one, and we do, so we see new_val and old_val, but old_val was null here. The first one didn't include old_val, but these must be coming then from NoBrainer as part of that chainset or chain feed on the table. That's pretty cool.
App.spreadsheet is this file, so the channel is being receiving data, and basically it determines what it needs to do with that data, and if it's a new user, then it will go talk to the spreadsheet
App.spreadsheet and say: Add in this new user, and remove that user if it's time to remove one. This is just kind of delegating what to do with that data that's coming in, and the
App.spreadsheet is actually determining: We'll add this user, we'll remove this user and we'll re-render on the page. Let's see what we've got now in our application.
include_initial: true, you get the initial list of users in the database. For example, if we remove this, you don't get anything, and the reason for that is because you just added yourself to the database before you started streaming, and that does not include you, because this will only get changes since then, so you have to include the initial records in the database as you get started, so that you have a list of all the current users that were there before you, and if you don't do this, you will be a little bit out of sync because you won't see those people. That allows you to stay up to date with those pre existing users.
insertBefore of null, we can go to our application.js and we've got all this, we can also try application.html.erb and put the
<% content_for(:head) %>,
<%= yield :head %> and the section in the appropriate spots, so that that will all be working, and now the next step will be to strain field stream field selection .
Transcript written by Miguel
Join 18,000+ developers who get early access to new screencasts, articles, guides, updates, and more.