Implémentation de l'interaction de données html5-websocket basée sur les compétences du didacticiel d'appel de méthode à distance_html5

Généralement, les informations des utilisateurs enregistrés dans les pages Web traditionnelles sont soumises à la page pour traitement via post ou ajax. Après avoir atteint HTML5, nous disposons d'un autre moyen d'interagir avec les données via Websocket, qui offre une flexibilité d'interaction avec les données par rapport aux pages Web traditionnelles. Après avoir établi une longue connexion via Websocket, le serveur peut envoyer directement des données au client, et chaque interaction de données n'a pas besoin d'apporter une grande quantité d'informations d'en-tête http. Le protocole websocket lui-même prend en charge deux formats de données : texte et flux. , via le texte json et javascript L'interaction est une chose très simple. La communication via les pages Web json et les Websockets est très pratique, mais pour obtenir cette commodité, nous devons encore faire un packaging simple. Heureusement, les composants json existants sur diverses plates-formes sont relativement matures. .En analysantjsonLes données sont mappées à la méthode correspondante côté serveur pour le traitement.

Ce qui suit est une simple inscription d'utilisateur pour refléter le processus d'interaction entre html5 utilisant josn et websocket. Parce qu'il est encapsulé, il est très pratique à utiliser.

HTML :

La fonction est très simple, il suffit de vous connecter au service websocket et de soumettre les informations d'inscription. Bien entendu, afin d'être plus flexible, nous rouvrirons le formulaire de connexion lorsque la connexion sera détectée comme étant fermée. est le suivant :

Copier le code

Le code est le suivant :

fonction connecter () {
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());
}


Le code est très concis. est qu'un TcpChannel est encapsulé sur la base de WebSocket. Le code détaillé peut être téléchargé pour comprendre. Une fois la connexion réussie, vous entrerez dans le formulaire d'inscription

.

Après avoir rempli certaines informations d'inscription, cliquez sur S'inscrire pour soumettre les informations au serveur via WebSocket. Le code JS soumis pertinent est le suivant :

Copie. codeLe code est le suivant :

var invoquéregister = { url : 'Handler.OnRegister', paramètres : { Nom d'utilisateur : '', Email : '', Mot de passe : ''} } ;

function register() {
$('#frmRegister').form('submit', {
onSubmit: function() {
var isValid = $( this).form('valider');
if (isValid) {
invokeregister.parameters = $('#frmRegister').serializeObject(); {
alert( result.data);
}
return false
}
}


Transmis lorsque les données de vérification sont réussies, TcpChannel envoie simplement un objet de description d'appel de méthode. L'URL est la méthode de classe spécifiée pour être appelée, et les paramètres sont les paramètres de la méthode. Les paramètres peuvent également être des types de structure complexes. traitement des rappels

C#

Le service est basé sur le traitement étendu de Beetle, le code est donc très simple. Le code de la méthode logique pour l'enregistrement ci-dessus est le suivant :

Copie. code

Le code est le suivant : public class Handler {

public string OnRegister(string UserName, string Email, string PassWord)

{

Console.WriteLine(UserName);
Console.WriteLine(Email);
Console.WriteLine(PassWord);
return UserName; 🎜>
méthode uniquement Il vous suffit de définir les paramètres pertinents. Le contrôleur d'extension de message de Beetle analysera automatiquement les données json soumises par js pour analyse et les liera aux méthodes pertinentes pour l'exécution. Le code détaillé du contrôleur peut également être obtenu via. téléchargement. Une fois la logique écrite, il nous suffit d'ouvrir le service Websocket approprié.

Copier le code

Le code est le suivant :

class Program:WebSocketJsonServer
{
static void Main(string[] args)
{
Beetle.Controllers.Controller.Register(new Handler()
TcpUtils.Setup); ("coléoptère");
Serveur de programme = new Program();
server.Open(8088);
Console.WriteLine("websocket start@8088"); .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} disposé", e.Channel.EndPoint);
}
}
Une telle interaction et traitement de message d'objet Websocket basé sur HTML5 est terminé, et seule une petite quantité de code est requise pour implémentez-le.js et les services pour le traitement des interactions de données.Pour réaliser cette fonction d'interaction pratique, les packages suivants ne peuvent pas être omis : analyse du protocole Websocket, traitement des objets json et distribution du contrôle des messages ; code source à voir

WebSocket.Server.rar (641,79 ko)