Descrição
This tutorial will serve as an introduction to the new realtime nature of modern web apps which can really set your web application apart from the crowd!
We’re going to create a small realtime web application with FuelPHP on the server, Backbone.js on the client and using the Pusher API for the realtime aspects.
The application we’ll be building is a modern take on my classic “Shoutbox” PHP demo application I originally wrote six years ago on Nettuts+, and covered again not long after in Ruby on Rails.
This time, it’s a Backbone.js take on the application and we’re bringing into the year 2012 with live syncing between users without refreshing the page!
An Overview:
We’ll be using FuelPHP to provide a Messages API to our application. We’ll have a REST API endpoint at /api/messages which will serve up the latest messages (“Shouts”) on a GET request, and will create a new message on a POST request.
Our front-end will use Backbone.js to provide a seamless UI and render the messages.
When the ‘Submit’ button is clicked, Backbone will create a new ‘Message’ model, causing the list of messages to re-render. The new message will be POSTed to the API where it will be added to the database.
Then, after a successful database save, we will use Pusher to send the new message out to everyone else using the application where Backbone will then add it to their collection of messages causing the list to be updated.
I recently implemented a flow similar to this for InventoryBase, a new web application I’m leading the development of. We use Pusher to provide our app with a Live Activity Feed and to push down new Tasks and Properties when they’re added by Clerks.
