Commentaire: Généralement, les informations utilisateur enregistrées sur les pages Web traditionnelles sont soumises à la page via Post ou Ajax. Après avoir entré HTML5, nous avons une autre méthode pour interagir avec les données via WebSocket. Nous le présenterons en détail ensuite. Les amis qui ont besoin de savoir peuvent y faire référence.
Généralement, les informations utilisateur enregistrées dans les pages Web traditionnelles sont soumises à la page via Post ou Ajax. Après HTML5, nous avons une autre méthode pour interagir avec les données via WebSocket. WebSocket a la flexibilité que les pages Web traditionnelles n'ont pas dans l'interaction des données. Après avoir établi une longue connexion via WebSocket, le serveur peut envoyer directement des données au client. Il n'est pas nécessaire d'apporter une grande quantité d'informations d'en-tête HTTP pour chaque interaction de données. Le protocole WebSocket prenne lui-même deux formats de données Text et Streams. Il est très simple d'interagir avec JavaScript via Text JSON. La communication entre JSON et WebSocket est très pratique, mais pour réaliser cette commodité, nous devons toujours faire un emballage simple. Heureusement, les composants JSON existants sur diverses plates-formes sont relativement matures. En analysant les méthodes correspondantes de mappage des données JSON au serveur, elle est effectuée.
Ce qui suit est un simple enregistrement des utilisateurs pour refléter le processus d'interaction HTML5 avec JOSN et WebSocket. Depuis qu'il a été encapsulé, il est très pratique à utiliser.
HTML:La fonction est très simple et les informations d'enregistrement sont soumises après se connecter au service WebSocket. Bien sûr, pour être plus flexible, nous rouvrons le formulaire de connexion lors du suivi de la connexion. Le code JS spécifique est le suivant:
fonction connect () {
canal = new tcpChannel ();
channel.conned = function (evt) {
$ ('# dlgconnect'). Dialog ('close');
};
canal.Disposed = function (evt) {
$ ('# dlgconnect'). Dialog ('open');
};
canal.Error = fonction (evt) {
alerte (EVT);
};
canal.connect ($ ('# txthost'). Val ());
}
Le code est-il très concis? La raison principale est qu'un TCPChannel est encapsulé sur la base de WebSocket. Le code détaillé peut être téléchargé et compris. Une fois la connexion réussie, vous entrez le formulaire d'inscription.
Après avoir rempli certaines informations d'enregistrement, cliquez sur Inscrivez-vous pour soumettre les informations au serveur via WebSocket. Le code JS soumis pertinent est le suivant:
var invokeRegister = {url: 'handler.onregister', paramètres: {nom d'utilisateur: '', e-mail: '', mot de passe: ''}};
Fonction Register () {
$ ('# frmregister'). Form ('soumider', {
onSubmit: function () {
var isvalid = $ (this) .form ('valider');
if (isvalid) {
invokeRegister.Parameters = $ ('# frmregister'). SerializeObject ();
channel.send (invokeRegister, function (result) {
alerte (result.data);
});
}
retourne false;
}
});
}
Lorsque les données de vérification sont réussies, il peut envoyer un objet de description d'appel de méthode via TCPChannel. L'URL est la méthode de classe spécifiée pour appeler, et les paramètres sont le paramètre de la méthode, et les paramètres peuvent également être des types de structure complexes. Le deuxième paramètre est un traitement de rappel.
C #Le service est basé sur le traitement d'extension de Beetle, donc le code est très simple. Le code de la méthode logique pour l'enregistrement ci-dessus est le suivant:
gestionnaire de classe publique
{
public String onRegister (Nom d'utilisateur de chaîne, courriel de chaîne, mot de passe de chaîne)
{
Console.WriteLine (nom d'utilisateur);
Console.WriteLine (e-mail);
Console.WriteLine (mot de passe);
Retour Nom d'utilisateur;
}
}
La méthode n'a besoin que 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 l'analyse et la liera aux méthodes pertinentes d'exécution. Le code détaillé du contrôleur peut également être obtenu par téléchargement. Une fois la logique terminée, nous devons simplement ouvrir simplement le service WebSocket pertinent.
{
statique void main (String [] args)
{
Beetle.Controllers.Controller.Register (New Handler ());
Tcputils.setup ("Beetle");
Program Server = nouveau programme ();
server.open (8088);
Console.writeLine ("WebSocket start @ 8088");
System.threading.thread.Sleep (-1);
}
Protégé de remplacement void OnError (expéditeur d'objet, ChannersErRoreventArgs e)
{
base.onerror (expéditeur, e);
Console.WriteLine (E.Exception.Message);
}
Override protégé void onConned (expéditeur d'objet, canalEventArgs e)
{
base.onconned (expéditeur, e);
Console.writeLine ("{0} connecté", e.channel.endpoint);
}
Override protégé void ondisposed (expéditeur d'objet, ChannelDisposedEventArgs e)
{
base.ondisposed (expéditeur, e);
Console.writeLine ("{0} distribué", e.channel.endpoint);
}
}
Ce type d'interaction et de traitement de message d'objet WebSocket basé sur HTML5 est terminé, et seule une petite quantité de code est requise pour implémenter le traitement d'interaction des données de JS et services. Pour atteindre cette fonction d'interaction pratique, l'encapsulation suivante ne peut pas être enregistrée. Analyse du protocole WebSocket, traitement JSON d'objets et distribution de contrôle des messages; Si vous souhaitez connaître les détails pertinents, vous pouvez télécharger le code source pour le visualiser.WebSocket.server.rar (641,79 kb)