A little while ago I was messing around with WebRTC, or real time communication specifically with video, and threw together a plugin using an API library for it. It stemmed from the original build of CodingOfficeHours, allowing users to have face-to-face video communications without using Skype, or any other program. This started my fascination with real time, socket communication. can you interact with someone not just on a site, but instantly.

AJAX was kind of the first step in this process, being able to pull from the database without really refreshing the page, and it was awesome. Then more recently WebSockets came out and it blew AJAX out of the water. What if the server could tell the browser / client that new data is now available and to refresh the UI. Take WebSockets and add AngularJS and you have a match made in heaven. The last piece of the puzzle, WordPress.

Code Cavalry

After my beta site called CodingOfficeHours was proving to be useful in the community, I wanted to take it to the next level. I took on a business partner who has a more design background, and took off on a new platform, CodeCavalry – which is launching March 2015. Code Cavalry unlike CodingOfficeHours was to be more “instant” in the way it feels, the ability to get online and get help from someone within 10 minutes. Unlike CodingOfficeHours where you would have to find someone to ask for help, CodeCavalry turns it upside down by allowing a user to create a help session first, and have experts offer to help them.

However, the main challenge was always getting all that interaction to be instant. To be able to have an expert instantly see available sessions as they get created, and to have users be able to instantly see offers come in. No page refreshing needed.

I could have done this the newer old fashioned way, AJAX, but that would require constantly pinging the server as apposed to listening to the server. That is when I turned to Firebase, an online backend tool that offers me some awesome features including an easy way to create a WebSocket connection.

What is Firebase?

Firebase, is probably one of the best things to happen to web development. It is a way for a front end developer like me to quickly spin up an application and connect it to a JSON object that lives online. It is awesome. It doesn’t stop there though, AngularFire was created which really took it to the next level, and allowed to really power any AngularJS application.

Angularfire and 3 way binding

I have told you time and time again that AngularJS is 2 way binding, data changes as it gets new data from the database, UI / browser updates with the new data. What if you could 3 way bind? A Ménage à trois for binding.. kinky? No… AWESOME.

With AngularFire’s 3 way binding you can bind data to UI, and then to the server. Its a magical triangle of awesome sauce. Now, how does this all relate?

If we are both looking at the same application, and I push new data to Firebase, you are also bound to that data and so your Angular App gets the new data, and your UI is updated. Voila! WebSockets done easy!

CODE!

First lets start with an application definition

Notice the ‘firebase’ dependency I have added. That comes from the Angularfire, and it is now an injectable as $firebase

Now lets create a quick controller to power things.

Technically that is all you need. Anything now saved into your firebase object is accessed with $scope.fireChat, but now what? We are looking at an empty object, so lets push some data.

Before we continue, there are some assumptions which this code has. notice $scope.chatroom.ID? I have a ng-init function which passes in the ID (via PHP) to the init function I have setup. I then use WP-API to get the data from that post.  This is my $http get call. I was going to create a factory, but this ends up being less lines of code and I only need to call the API 1 time here.

Now, going back to the firebase object. To make life easy, lets assume our object is

So lets create a $scope.msg to handle the message object, and a function to push to the array we want.

The $scope.newChat function first checks to see if $scope.fireChat has a chat object. If it does not have the chat object it creates it with an array with the first message. If the chat object already exists, it just pushes in the $scope.msg object.

What does that end up looking like? Here is my screenshot from Firebase.

Screen Shot 2015-03-05 at 12.22.26 AM

 All together

Here is what it looks like in 2014 theme:

Screen Shot 2015-03-05 at 12.25.39 AM

I have a working version demo: http://roysivan.com/angularjs-for-wordpress/chat-rooms/roys-awesome-chat-room/

I obviously didn’t put all the code in here, but I did zip it up and request entry into the WordPress plugin repo, until then, feel free to grab the code off GitHub

More control with WP-API

So I haven’t used WP-API too much in my example plugin, but It does come in handy. For example if we continue on the path of the chat room(s), you could use my plugin (AngularJS for WordPress), which my plugin requires to run. We can use the new-post directive attached to the new post type “chatrooms” to have an easy way to create new chat rooms on the fly using AngularJS.

But what about other applications?

For CodeCavalry.com I used it to save certain data that I also wanted saved to Firebase. For example,

This is a line of data that just updates the post meta. The data also gets stored into its Firebase object, but this way I can grab the data without initiating Firebase if I ever needed to since I have it stored in my own MySQL database.

For CodeCavalry I also have all help sessions as a CPT, as well as messages. When you load the messages page in the user dashboard, it initiates a call to WP-API to grab your latest messages, so that is not something that really needs to be stored in Firebase. It also is private to only you, while Firebase items is kept for global data.

In the end, you can find like I did, a hybrid between the 2 worlds, where some data gets stored to your MySQL / WordPress database, and others (if not duplicate) to Firebase, which you can then use instantly across your application.

 

What will you build?

Now that you have some power and knowledge, what do you want to build? Live interactions on your site is now easily accomplished!

 UPDATE

Plugin is now in the WordPress Repo – https://wordpress.org/plugins/chat-rooms-powered-by-firebase/ – install from your dashboard!

 

 

There are 4 comments Join the conversation

Comments are closed.