Cross-browser Instant Message and Remote JavaScript Callback

Revolutionize your web application with SocketPro

         

UDAParts

support@udaparts.com

12/15/2007

 

 

        

 

Contents

 

1.         SocketPro Achievements for JavaScript and web development

 

After entering the 21st century, web-based development becomes the hottest topic in IT industry because it has many advantages over desktop application. However, a web application has its own flaws. AJAX is the latest approach to improve web applications mainly for better web user interface response. Does AJAX solve all of web application problems? The answer is no! SocketPro is written to help web developers to overcome a set of following problems.

 

 

We design our SocketPro as a supplementary with a set of new features for solving as many fundamental problems of http(s) protocol as possible.

 

2.         SocketPro (npUSocket.dll) for browsers

 

At this writing time, SocketPro supports the following browsers:

·        MS IE 6 or later

·        FireFox version 1.5 or later

·        Netscape version 8.1 or later

·        Flock version 0.9.1.5 or later

·        Safari version 3.0.3 or later

 

3.         How to use SocketPro within JavaScript

             

To correctly use SocketPro with JavaScript, it is highly recommended that you experiment the tutorials one and two first. The tutorials are written from C++, C# and VB.NET. However, once you know the two tutorials, it is very simple and effortless for you to port code to JavaScript.

 

It is simple to use SocketPro with JavaScript. SocketPro comes with an adapter for using SocketPro with the file sproadapter.js. You need to reference the adapter like the below:

 

<script type="text/javascript" src="sproadapter.js"></script>

 

            SocketPro adapter for JavaScript is written with the same style of adapters for C++ and .NET. To create an instance of CClientSocket, you can simply use the below code.

 

var clientsocket = new SocketProAdapter.ClientSide.CClientSocket();

 

Note that SocketProAdapter and ClientSide similates the name spaces of C++ and .NET. We like to keep all of coding styles consistence cross different development languages.

 

Usually, you like to monitor network events. All you need to do is to set functions for your JavaScript callbacks as shown in the below.

 

clientsocket.OnSocketClosed = OnClosed; //set socket close event handler

clientsocket.OnSocketConnected = OnConnected; //set socket connection event handler

 

            Here the functions OnClosed and OnConnected should be defined like the below.

 

var OnClosed = function(hSocket, nError){

                                //your code here

};

 

var OnConnected = function(hSocket, nError){

                                //your code here

};

 

            How do I know all of callbacks and methods supported with SocketPro? To get the answer for this question, you can use OleView.exe to open the library file npUSocket.dll. Pay attention to the interfaces IUSocketScript, IUSocket, and ISocketBase for all of supported methods. To know the callbacks, see the interface _IUSocketEvent. In case you do not have some knowledge about MS COM technology, you are still able to guess out all features from these interfaces.

 

            SocketPro has a built-in real-time notification (instant message) service. SocketPro fully supports this service for JavaScript cross the above browsers. To use this real-time notification service, you need to set a callback like the below:

 

clientsocket.OnBaseRequestProcessed = OnBaseRequestProcessed;

                 

var OnBaseRequestProcessed = function(nRequestId){

//your code here

};

 

You can see the code snippet for monitoring all of notifications from the file WebMessage.htm at the directory ..\socketpro\samples\javascript.

 

4.         Memory queue for JavaScript

             

            Working with SocketPro requires converting different types of data into bytes. This is a trival work for non-script languages, but it is a tough work for development in script language. Therefore, SocketPro comes with a helper object for this purpose.

 

            After opening npUSocket.dll from oleview.exe, you could see an interface named as IJSSerialization. You can use the interface for converting different types of data into bytes first, and send a request onto a remote SocketPro server like the below:

 

me.EchoAsyn = function(objInput) //an object

                {

                                m_EchoRtn = null;

                                var queue = me.GetAttchedClientSocket().GetMemoryQueue();

                                queue.size = 0; //same as UQueue.SetSize(0); in C++ and .NET

                                queue.save(objInput); //push

                                var b = me.SendRequest(idEchoCTOne);

                return b;

                };

 

After carefully analyzing the above code, you will find that the code is almost the same as ones in C++ and .NET, because we like to keep coding style consistence across different languages.

 

Note that the interface IJSSerialization is powerful. It supports serializing basic JavaScript types of data like empty, null, boolean, integer, double and string. Moreever, it also works for objects Date and Array. For an array, it can contains sub-array that may contain its own sub JavaScript objects Date and Array, and so on. A SocketPro server can send many different types of data. Internally, a hidden JS serialization object will map different types of C++ or .NET types of data into proper ones. In case you meet more complicate JavaScript object, you can simply write your own code with help of the interface.

 

5.         Write asynchronous handler in JavaScript

 

With help of the above interface IJSSerialization, you can create your own asynchronous handlers in JavaScript like in C++ and .NET.

 

For one sample, see the files tone.js and tutorialone.htm at the directory ..\socketpro\samples\javascript\. After comparing with .NET and C++ implementation, you will find JavaScript codings are kept unchanged.

             

            Like C++ and .NET development, you must implement the methods GetSvsID and OnResultReturned as follow.

               

//inheriet from the base CRequestAsynHandlerBase

var me = new SocketProAdapter.ClientSide.CRequestAsynHandlerBase();

                 

//must define the method GetSvsID()

me.GetSvsID = function(){

                                return m_idSvsID;

};

 

//must define the callback OnResultReturned(nRequestID, jsQueue)

me.OnResultReturned = function(nRequestID, jsQueue){       

                                switch(nRequestID){

                                case idQueryCountCTOne:

                                                m_QueryCountRtn = jsQueue.loadInt32();

                                                break;

                                case idQueryGlobalCountCTOne:

                                                m_QueryGlobalCountRtn = jsQueue.loadInt32();

                                                break;

                                case idQueryGlobalFastCountCTOne:

                                                m_QueryGlobalFastCountRtn = jsQueue.loadInt32();

                                                break;

                                case idSleepCTOne:

                                                break;

                                case idEchoCTOne:

                                                m_EchoRtn = jsQueue.load();

                                                break;

                                default:

                                                break;

                                }

};

 

            Like C++ and .NET development, you can send an asynchronous request first, and afterwards call WaitAll for its returning result from a remote server. Take the request Echo as an example. The code will be something like the below.

 

me.m_EchoRtn = 0; //variant

                me.EchoAsyn = function(objInput) //variant

                {

                                m_EchoRtn = null;

                                var queue = me.GetAttchedClientSocket().GetMemoryQueue();

                                queue.size = 0; //same as UQueue.SetSize(0) in .NET

                                queue.save(objInput); //same as UQueue.Push(objInput) in .NET

                                return me.SendRequest(idEchoCTOne);

                };

me.Echo = function(objInput){

                                if(!me.EchoAsyn(objInput))

                                                return false;

                                //convert an async call into sync one so that code has better readability

                                if(me.GetAttchedClientSocket().WaitAll())

                                                return m_EchoRtn;

                                return false;

};

 

See the sample code (..\socketpro\samples\javascript\tone.js) for other calls. They are exactly the same in coding style.

 

6.         Create asynchronous handler and attach it to a socket for communication

 

            See the below code from ..\socketpro\samples\JavaScript\tutorialone.htm.

 

function btnConnect_onclick() {

                                if(!clientsocket){

                                                //create an instance CClientSocket

                                                clientsocket = new SocketProAdapter.ClientSide.CClientSocket();

                                                clientsocket.OnSocketClosed = OnClosed; //set socket close event handler

                                                clientsocket.OnSocketConnected = OnConnected; //set socket connection event handler

     

                                                //you can subscribe all of USocket events ......, before calling the method Connect

                                }

                                if(!handler){

                                                handler = new CMyAsyncHandler();

                                                handler.Attach(clientsocket); //attach to a socket

                                }

   

                                //The above coding style is the exactly same as C++, C# and VB.NET

                                clientsocket.Connect("localhost", 20901); //tutorial one server listenning port == 20901

}

             

7.         Key SocketPro features for web development

             

            First of all, SocketPro is an extremely powerful communication framework and is implemented with many features. We don’t want to list all of features in this short article. For a big list of features, you may refer to this article here. We simply list a few of key features for you to develop world-class web applications.

 

me.SleepAsyn = function(nTime){

                                var queue = me.GetAttchedClientSocket().GetMemoryQueue();

                                queue.size = 0;

                                queue.saveInt32(nTime);

                                return me.SendRequest(idSleepCTOne);

                }

 

me.Sleep = function(nTime){

                                if(!me.SleepAsyn(nTime))

                                                return false;

                                return me.GetAttchedClientSocket().WaitAll();

                };

 

function btnSleep_onclick() {

                                 var control = document.getElementById("txtSleepTime");

                                handler.Sleep(control.value);

}

 

function chkDisableUI_onclick() {

                                 var chk = document.getElementById("chkDisableUI");

                                clientsocket.DisableUI(chk.checked);

}

 

   

me.SendAllRequestsAsyncnronusly = function(sleepTime, echoData){

                                //error handling ignore here

                                me.GetAttchedClientSocket().BeginBatching();

                                me.EchoAsyn(echoData);

                                me.SleepAsyn(sleepTime);

                                me.QueryGlobalCountAsyn();

                                me.QueryCountAsyn();

                                me.QueryGlobalFastCountAsyn();

                   

                                //send all reuests here, and true -- returning results in batch

                                me.GetAttchedClientSocket().Commit(true);

                   

                                me.GetAttchedClientSocket().WaitAll();

};