html5-websocket data interaction implementation based on remote method calling_html5 tutorial skills

Generally, registered user information in traditional web pages is submitted to the page for processing through post or ajax. After reaching HTML5, we have another way to interact with data through websocket. Websocket has flexibility in data interaction that traditional web pages do not have. After establishing a long connection through Websocket, the server can directly send data to the client, and each data interaction does not need to bring a large amount of http header information. The websocket protocol itself supports two data formats: text and stream, through text json and javascript Interaction is a very simple thing. Communication through json web pages and Websockets is very convenient, but to achieve this convenience we still have to do some simple packaging. Fortunately, the existing json components on various platforms are relatively mature. By analyzing json The data is mapped to the corresponding method on the server side for processing.

The following is a simple user registration to reflect the process of interaction between html5 using josn and websocket. Because it is encapsulated, it is very convenient to use.

HTML:

The function is very simple, just connect to the websocket service and submit the registration information. Of course, in order to be more flexible, we will reopen the connection form when the connection is detected to be closed. The specific JS code is as follows:

Copy code

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 very concise. The main reason is that a TcpChannel is encapsulated on the basis of WebSocket. The detailed code can be downloaded to understand .After the connection is successful, you will enter the registration form

After filling in some registration information, click Register to submit the information to the server through WebSocket. The relevant submitted JS code is as follows:

Copy code

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;
}
});
}

Passed when the verification data is successful TcpChannel just sends a method call description object. The url is the class method specified to be called, and paramters are the parameters of the method. The parameters can also be complex structure types. The second parameter is a callback processing. C#

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

Copy code

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;
}
}

method only You only need to define relevant parameters. Beetle's message extension controller will automatically analyze the json data submitted by js for analysis and bind it to relevant methods for execution. The detailed code of the controller can also be obtained through downloading. After the logic is written, we only need You need to simply open the relevant websocket service.

Copy code

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);
}
}

Such a websocket object message interaction and processing based on HTML5 is completed, and only a small amount of code is required to implement it. js and services for data interaction processing. To achieve this convenient interaction function, the following packages cannot be omitted. Websocket protocol analysis, object json processing and message control distribution; if you want to know the relevant details, you can download the source code to view.

WebSocket.Server.rar (641.79 kb)