Data Interaction of html5-websocket based on remote method call

Comments: Generally, the user information registered on a traditional web page is submitted to the page through post or ajax. After HTML 5 is reached, another method is to perform data interaction through websocket. Next we will introduce it in detail, for more information, see

Generally, the user information registered on a traditional web page is submitted to the page through post or ajax. After HTML 5 is reached, another method is to perform data interaction through websocket. websocket has the flexibility that traditional web pages do not possess in Data Interaction. After a persistent connection is established through Websocket, the server can directly send data to the client, and there is no need to carry a large amount of http header information for each data interaction. the websocket protocol supports two data formats: Text and stream. It is very simple to interact with javascript through text json. Communication through json web pages and Websocket is very convenient, however, to achieve this convenience, we still need to do some simple packaging. Fortunately, the existing json components on various platforms are relatively mature. analyze json data and map it to the server for processing.

The following code uses a simple user registration method to demonstrate the interaction process between HTML 5 and websocket using josn. It is very convenient to use because of encapsulation.

HTML:

The function is very simple. After the websocket service is connected, the registration information is submitted. Of course, to make it more flexible, we can re-open the connection form when we monitor that the connection is closed. The specific JS Code is as follows:

The Code is as follows:
Function connect (){
Channel = new TcpChannel ();
Channel. Connected = function (evt ){
$ ('# DlgConnect'). dialog ('close ');
};
Channel. Disposed = function (evt ){
$ ('# DlgConnect'). dialog ('open ');
};
Channel. Error = function (evt ){
Alert (evt );
};
Channel. Connect ($ ('# txtHost'). val ());
}

The code is not very concise, mainly because a TcpChannel is encapsulated on the basis of WebSocket. For detailed code, you can download it. After the connection is successful, the registration form is entered.

 

After entering some registration information, click "register" to submit the information to the server through WebSocket. The relevant submitted JS Code is as follows:

The Code is as follows:
Var invokeregister = {url: 'handler. OnRegister ', parameters: {UserName: '', Email:'', PassWord :''}};
Function register (){
$ ('# FrmRegister'). form ('submit ',{
OnSubmit: function (){
Var isValid = $ (this). form ('validate ');
If (isValid ){
Invokeregister. parameters = $ ('# frmRegister'). serializeObject ();
Channel. Send (invokeregister, function (result ){
Alert (result. data );
});
}
Return false;
}
});
}

After the data is verified successfully, you can send a method call description object through TcpChannel. The url specifies the called class method, and paramters is the method parameter. The parameter can also be a complex structure type. the second parameter is a callback processing.

C #

Because the service is extended based on Beetle, the code is very simple. The logic method code for the above registration is as follows:

The Code is as follows:
Public class Handler
{
Public string OnRegister (string UserName, string Email, string PassWord)
{
Console. WriteLine (UserName );
Console. WriteLine (Email );
Console. WriteLine (PassWord );
Return UserName;
}
}

The method only needs to define relevant parameters. Beetle's message extension controller automatically analyzes json data submitted by js and binds it to the relevant method for execution. you can also download the detailed code of the controller. after the logic is compiled, you only need to simply open the relevant websocket service.

The Code is as follows: class Program: WebSocketJsonServer
{
Static void Main (string [] args)
{
Beetle. Controllers. Controller. Register (new Handler ());
TcpUtils. Setup ("beetle ");
Program server = new Program ();
Server. open( 8088 );
Console. WriteLine ("websocket start @8088 ");
System. Threading. Thread. Sleep (-1 );
}
Protected override void OnError (object sender, ChannelErrorEventArgs e)
{
Base. OnError (sender, e );
Console. WriteLine (e. Exception. Message );
}
Protected override void OnConnected (object sender, ChannelEventArgs e)
{
Base. OnConnected (sender, e );
Console. WriteLine ("{0} connected", e. Channel. EndPoint );
}
Protected override void OnDisposed (object sender, ChannelDisposedEventArgs e)
{
Base. OnDisposed (sender, e );
Console. WriteLine ("{0} disposed", e. Channel. EndPoint );
}
} This html5-based websocket object message interaction and processing is complete, and a small amount of code is required to implement data interaction between js and services. to implement this convenient interaction function, the following packages cannot be saved. websocket protocol analysis, object json processing and message control distribution; if you want to know more details, you can download the source code to view.

WebSocket.Server.rar (641.79 kb)