Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Building Real-Time Apps With AngularJS

DZone's Guide to

Building Real-Time Apps With AngularJS

One of the most common issues faced by web apps is real-time communications. Read on to learn how Backand wields WebSockets to achieve Realtime Database Communications.

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

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:

bower install angularbknd-sdk#1.8.2

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

<!-- Backand SDK for Angular -->

<script src="//cdn.backand.net/backand/dist/1.8.2/backand.debug.js"></script>

<!-- Backand Realtime -->

<script src="https://api.backand.com:4000/socket.io/socket.io.js"></script>

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

//Update Angular configuration section

myApp.config(function (BackandProvider) {

  BackandProvider.runSocket(true); //enable the web sockets that makes the database realtime

})

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:

//Wait for server updates on 'items' object

Backand.on('items_updated', function (data) {

  //Get the 'items' object that have changed

  console.log(data);

});

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:

//Action: Update - After data saved and committed

function backandCallback(userInput, dbRow, parameters, userProfile) {



  //Send to a specific role

  //socket.emitRole("items_updated",userInput, "User");



  //Send to all user

  //socket.emitAll("items_updated",userInput);



  //Send to array of users

  //socket.emitUsers("items_updated",userInput, ["user2@gmail.com","user1@gmail.com"]);



  return {};

}

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.

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:
javascript ,web sockets ,sdk ,angular js

Published at DZone with permission of Itay Herskovits, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}