Push4Free

Starting iPush ! package includes the iPush JavaScript Wrapper which uses iPush Flash ActionScript 2 library and ActionScript ExternalInterface.

ActionScript ExternalInterface (supported by Flash 8 or higher) enables straightforward communication between ActionScript and JavaScript in browser.

The items in the Starting iPush ! package are:

• pjax.swf: this Flash movie contains the iPush Flash ActionScript library (iPush2Link.swc), event handlers for iPush, and ExternalInterface callback functions which would be called from pjax.js. The source file pjax.fla is also provided for your reference.
• pjax.js: the iPush JavaScript library. This is the major entity of iPush JavaScript Wrapper. The functions in pjax.js would call the respective callback functions in pjax.swf.
• swfobject.js: this is a small JavaScript file used for embedding Flash content. It would be called by pjax.js to embed the pjax.swf. For learning more on swfobject.js, please ckeck http://blog.deconcept.com/swfobject/.
  !! pjax.swf, pjax.js, and swfobject.js are all nothing to do with application business logic, so these three files can work with your own application without change.
• sample.html: this is a sample application contains JavaScript for real-time messages sending and receiving. You may re-write your own business logics and presentation here to build a new iPush web application.

The following figure illustrates the working flows between items:

The following run-time environment is required for running the Starting iPush ! package:

1. A browser does support Flash ExternalInterface. Please check the Browser/OS list in this Adobe Live Docs page.
2. Flash Player plug-in (v8 or higher) installed in the browser.
3. Enable the JavaScript for proper security level in the browser.
4. IP network connected.
5. iPush Server is running.

For deploying the Starting iPush ! package, just extract the iPush JavaScript Wrapper API - pjax.zip and upload all files in it to any accessible folder of your web server. That's it.

We strongly recommend the web server you use for tasting the Starting iPush ! package would run on the same host with iPush Server to avoid crossdomain security problem (check out the related FAQ item for detail).

When you are not sure if there is web server runs on the host of iPush Server or not, the Tomcat you had installed for running iPush BackOffice is always ready for you. The default path for Tomcat web server root is <PATH_TOMCAT_HOME>/webapps/ROOT. And the default listen port of Tomcat is 8080.

Load the iPush sample web application

Open the URL in browser to try the sample application out:

http://<NAME_OR_IP>:<PORT>/<PATH>/sample.html

If the sample runs well, you can see the word "ready" shown and the information of several iPush2Link properties displayed, just as figure below illustrates.

Connect to iPush Server

Now, input the iPush Server IP and port as yours. And the default user ID "CEO" is a built-in account as iPush Server installed. Keep the values of Group, Product, Username, and Password as default.

If you want to use the iPush Server of www.push4free.com for test-driving, please change the port to 443 instead of 8000.

Press [Connect], you may see the "[200] login_ok" shown if it connected to iPush Server successfully.

Subscribe the subject

Keep the value of Subject as "ice", then press [Subscribe]. You may see the "[700] (ice) ok" shown if it subscribed the subject ice to iPush Server successfully.

Run another instance of the sample application and connect to iPush Server

Open a new browser window and load the same URL as:

http://<NAME_OR_IP>:<PORT>/<PATH>/sample.html

Input "sales" (another built-in account) as Username and press [Connect] after the sample application loaded and gets ready. "[200] login_ok" should be the correct responding message, as figure below illustrates.

Sales sends "hello" to iPush Server

Change the value of Subject to "ice.sales" and fill "hello" in the Message text box, then press [Send Pub/Sub]. You may see the "sent non-persistent message: hello with subject [ice.sales]" shown as the message sent to iPush Server.

iPush Server pushes the "hello" to CEO

Switch back to the CEO browser window, you should see the "Subject [ice.sales] receives: (len=5) hello" shown as iPush Server had pushed the message "hello" to CEO since he has subscribed the subject "ice" which is the superior of subject "ice.sales".

Of course, you must want to revise the sample.html to build your own iPush hello program. Follow the instructions below to get it done.

We will hard code the server information and user accounts in two programs, one for CEO (as receiver), and one for sales (as sender).

Edit the receiver and run it

This is the source for receiver.html (save it as HTML):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>Hello iPush - Receiver</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="pjax.js"></script>
<script language="Javascript">
function append(str) {
  // message displaying
  var sdata = document.getElementById("sdata");
  var edata = document.getElementById("data");
  edata.innerHTML += str + "<BR>";
  sdata.scrollTop = edata.clientHeight - sdata.clientHeight;
}
function onReady() {
  append("ready");
  // connect to iPush Server with CEO account
  // please change the server IP to yours
  iplink.connect("www.push4free.com", 443, "ICE", "iPush", "CEO", "000000");
}
function onStatus(err, msg) {
  append("return code: ["+err+"] "+msg);
  if (err == '200') { // if login ok, then subscribe subject "ice"
    iplink.subSubject("ice");
  }
}
function onSubjectMessage(sbj, len, msg) {
  // display the received message
  append("received: " + msg);
}
</script>
</head>
<body bgcolor="#ffffff">
<script type="text/javascript">
  var iplink = new iPush2Link();
</script>
<center><h1>Hello iPush - Receiver</h1></center>
Message box:
<table>
  <tr>
    <td colspan=4>
      <p></p>
      <div id="sdata" style="height:150;border:1px solid #ddd;overflow: auto">
        <div id="data" style="height:20"></div>
      </div>
    </td>
  </tr>
</table>
</body>
</html>

After change the IP parameter in iplink.connect() to your server's, save and upload the receiver.html to the same folder with sample.html. Open it in browser, you should see it shown as following figure:

The message box tells you this iPush application has connected to iPush Server and subscribe subject "ice" successfully.

Key functions in receiver.html:

• iplink.connect(): connect and login to iPush Server
• iplink.subSubject(): subscribe subject
• onReady(): pjax.swf is ready for iPush messaging
• onStatus(): receive the return code from iPush Server through pjax.swf
• onSubjectMessage(): receive the subject message pushed from iPush Server

Edit the sender and run it

This is the source for sender.html (save it as HTML):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>Hello iPush - Sender</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="pjax.js"></script>
<script language="Javascript">
function append(str) {
  // message displaying
  var sdata = document.getElementById("sdata");
  var edata = document.getElementById("data");
  edata.innerHTML += str + "<BR>";
  sdata.scrollTop = edata.clientHeight - sdata.clientHeight;
}
function onReady() {
  append("ready");
  // connect to iPush Server with sales account
  // please change the server IP to yours
  iplink.connect("www.push4free.com", 443, "ICE", "iPush", "sales", "000000");
}
function onStatus(err, msg) {
  append("return code: ["+err+"] "+msg);
  if (err == '200') { // if login ok, then send "hello" with subject "ice.sales"
    append("send hello to iPush Server");
    iplink.sendNPSubject("ice.sales", "hello");
  }
}
</script>
</head>
<body bgcolor="#ffffff">
<script type="text/javascript">
  var iplink = new iPush2Link();
</script>
<center><h1>Hello iPush - Sender</h1></center>
Message box:
<table>
  <tr>
    <td colspan=4>
      <p></p>
      <div id="sdata" style="height:150;border:1px solid #ddd;overflow: auto">
        <div id="data" style="height:20"></div>
      </div>
    </td>
  </tr>
</table>
</body>
</html>

After change the IP parameter in iplink.connect() to your server's, save and upload the sender.html to the same folder with sample.html. Open it in another browser window, you should see it shown as following figure:

The message box tells you this iPush application has connected to iPush Server and send "hello" to iPush Server with subject "ice.sales" successfully.

Key functions in sender.html:

• iplink.connect(): connect and login to iPush Server
• iplink.sendNPSubject(): send (non-persistent) subject message
• onReady(): pjax.swf is ready for iPush messaging
• onStatus(): receive the return code from iPush Server through pjax.swf

CEO received "hello"

Switch back to receiver browser window, you should see "received hello" had been added to the bottom of the message box:

Yes, the hello message was pushed by iPush Server, and displayed through the onSubjectMessage() in event trigger fashion. No pulling effort here.