Comment: Generally, user information registered on traditional web pages is submitted to the page through post or ajax. After entering HTML5, we have another method to interact with data through websocket. We will introduce it in detail next. Friends who need to know can refer to it.
Generally, user information registered on traditional web pages is submitted to the page through post or ajax. After HTML5, we have another method to interact with data through websocket. Websocket has the flexibility that traditional web pages do not have in data interaction. After establishing a long connection through Websocket, the server can directly send data to the client. There is no need to bring a large amount of http header information for each data interaction. The websocket protocol itself supports two data formats text and streams. It is very simple to interact with JavaScript through text json. Communication between json and Websocket is very convenient, but to achieve this convenience, we still have to make simple packaging. Fortunately, the existing json components on various platforms are relatively mature. By analyzing the corresponding methods of mapping json data to the server, it is performed.
The following is a simple user registration to reflect the process of html5 interacting with josn and websocket. Since it has been encapsulated, it is very convenient to use.
HTML:The function is very simple, and the registration information is submitted after connecting to the websocket service. Of course, in order to be more flexible, we reopen the connection form when monitoring the connection is closed. The specific JS 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());
}
Is the code very concise? The main reason is that a TcpChannel is encapsulated on the basis of WebSocket. The detailed code can be downloaded and understood. After the connection is successful, you 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:
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;
}
});
}
When the verification data is successful, it can send a method call description object through TcpChannel. The url is the class method specified to call, and paramters is the parameter of the method, and the parameters can also be complex structure types. The second parameter is a callback processing.
C#The service is based on Beetle's extension processing, so the code is very simple. The logic method code for the above registration 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 the relevant parameters. The Beetle's message extension controller will automatically analyze the json data submitted by js for analysis and bind it to the relevant methods for execution. The detailed code of the controller can also be obtained through download. After the logic is completed, we only need to simply open the relevant websocket service.
{
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} distributed", e.Channel.EndPoint);
}
}
This kind of websocket object message interaction and processing based on html5 is completed, and only a small amount of code is required to implement the data interaction processing of js and services. To achieve this convenient interaction function, the following encapsulation cannot be saved. 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 it.WebSocket.Server.rar (641.79 kb)