Back to blog home page

Building Real-Time Apps with AngularJS

Posted by on Dec 15, 2015

One of the most common issues faced by web apps is real-time communications. Whether it is for presenting the most recent data or broadcasting announcements to all the app’s users, real-time communication is a crucial feature. Backand’s Real-Time Communication functionality lets you easily implement this capability in your app, ensuring users get the best experience.

The Old Pattern: Polling

Most apps built prior to the introduction of WebSockets had one method to perform real-time functionality: polling. This consisted of sending periodic requests for updates to the server, and updating the display whenever the constant polling resulted in a new element. While this solved the problem of removing the delay between data change and reaction, it added massive complexity to apps that simply needed an event architecture.

Quieting the Chatter with WebSockets

WebSockets were introduced in 2011, and are currently implemented by every major browser. They create what amounts to an open connection between your app and your application server, allowing for real-time exchange of data in a full-duplex communication sequence. Instead of polling for a new list of objects, you can receive a notification when a table has been updated and trigger the refresh when you desire, in a predictable and testable way, displaying any relevant information to the user while you do so. By maintaining the open connection, overhead is removed from your application’s communications, allowing your app to do more with less.

Adding Real-Time Database Communications to Your App

Backand provides Realtime Database Communication for all Backand applications starting with Backand SDK version 1.8.2. You can install the Backand SDK using Bower:

Once it’s been installed, add the script includes to your project:

Next, update your app’s configuration to use real-time communications when using sockets:

With that, you’re set up to use the real-time communication functionality. You can update your application to listen for an ‘items_updated’ event on the client-side, which is provided by Backand when data in your app changes:

You can also add server-side events to your custom actions. This allows you to use a single command – emit – to notify your application of important changes. Simply add the following code into a custom server-side action:

Conclusion

With Realtime Database Communications from Backand, you can use WebSockets to implement real-time event handling and processing for your Backand-driven AngularJS application. You can eliminate the need for polling, getting updates to your app’s data when they happen instead of on a time delay. This powerful tool can make your application more responsive and usable, all without significant optimization effort. For more information, check out Backand’s documentation.

To try it for yourself now, login or signup for a Free-Forever Backand Account.