Scala Liftweb : Re render page element without making any request to the server

Lift introduces a powerful feature that enables developer to create rich interactive application using Comet and Ajax support . Using Comet , its easy to push content from server to browser by sending request asynchronously . AJAX works for a single client at a time , while Comet works for multiple users . Comet works like AJAX but in opposite direction .

In this blog , I am explaining how to re render a page element without making any request to server with no extra AJAX request , no page refreshes , nothing . As you can see in Gmail online Email portal , when an email is send by a user , receiver’s inbox is automatically gets updated and new email appears on receiver’s inbox .

Let’s take a look at a simple example . I am assuming that you are aware with basic Lift’s configuration . In this example , we are going to build a Notification snippet where client page is getting updated by server with current notification every 10 seconds .

In HTML file :

<lift:surround with="default" at="content"> 
    <h2>Your Comet Actor !! </h2>
    <lift:comet type="CometNotification" name="Other"> 
        Current Time: <comet:message>Here is your latest update !!!!!!!11</comet:message> 
    </lift:comet>  
</lift:surround>

Now we are going to defined our comet actor by creating CometNotification class and extending CometActor :

import net.liftweb._ 
import http._ 
import SHtml._ 
import net.liftweb.common.{Box, Full} 
import net.liftweb.util._ 
import net.liftweb.actor._ 
import net.liftweb.util.Helpers._ 
import net.liftweb.http.js.JsCmds.{SetHtml} 
import net.liftweb.http.js.JE.Str 

class CometNotification extends CometActor { 
	 // Define prefix name which you want to use in your template
  override def defaultPrefix = Full("comet") 
		 
  def render = bind("message" -> <span id="message">{getCurrentNotification}</span>) 
// send Message back to our actor after every 10 seconds 		 
  ActorPing.schedule(this, Message, 10000L) 

// To process message in your CometActor 		 
  override def lowPriority : PartialFunction[Any,Unit] = { 
    
      case Message => { 
      	partialUpdate(SetHtml("message", Str(getCurrentNotification))) 
      	ActorPing.schedule(this, Message, 10000L) 
	reRender(false)
    } 
  } 
 

private def getCurrentNotification:String ={
	// Write your logic here to get latest notification from the database 
      "Updates Messages " + timeNow.toLocaleString()
}
} 
case object Message

<>
Your Comet Actor !!

Current Time: Updates Messages 11 Feb, 2013 6:16:50 PM

Here time would be updated after every ten seconds .

Code base for the current example can be found on the Knoldus GitHub account here :
https://github.com/knoldus/Comet_Example

This is a simple example which will give the basic idea of Comet . You can build more complex application using Comet , such as chat application , Display notification like Facebook .