Heim > Web-Frontend > H5-Tutorial > Implementierung der HTML5-Websocket-Dateninteraktion basierend auf den Fähigkeiten des Remote-Methodenaufrufs_html5-Tutorials

Implementierung der HTML5-Websocket-Dateninteraktion basierend auf den Fähigkeiten des Remote-Methodenaufrufs_html5-Tutorials

WBOY
Freigeben: 2016-05-16 15:50:57
Original
2170 Leute haben es durchsucht

Im Allgemeinen werden registrierte Benutzerinformationen in herkömmlichen Webseiten zur Verarbeitung per Post oder Ajax übermittelt. Nach Erreichen von HTML5 haben wir über Websocket eine andere Möglichkeit, mit Daten zu interagieren, als herkömmliche Webseiten Nach dem Aufbau einer langen Verbindung über Websocket kann der Server Daten direkt an den Client senden, und jede Dateninteraktion muss keine große Menge an HTTP-Header-Informationen mitbringen. Das Websocket-Protokoll selbst unterstützt zwei Datenformate: Text und Stream Durch Text-JSON und Javascript ist die Kommunikation über JSON-Webseiten und WebSockets sehr praktisch, aber um diese Bequemlichkeit zu erreichen, müssen wir noch einige einfache Pakete erstellen. Glücklicherweise sind die vorhandenen JSON-Komponenten auf verschiedenen Plattformen relativ ausgereift . Durch die Analyse von json werden die Daten zur Verarbeitung der entsprechenden Methode auf der Serverseite zugeordnet.

Das Folgende ist eine einfache Benutzerregistrierung, die den Prozess der Interaktion zwischen HTML5 mithilfe von josn und websocket widerspiegelt. Da es gekapselt ist, ist es sehr bequem zu verwenden.

HTML:

Die Funktion ist sehr einfach: Stellen Sie einfach eine Verbindung zum Websocket-Dienst her und übermitteln Sie die Registrierungsinformationen. Um flexibler zu sein, öffnen wir das Verbindungsformular erneut, wenn festgestellt wird, dass die Verbindung geschlossen ist lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

Funktion verbinden () {
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(
}


Der Hauptgrund ist, dass ein TcpChannel auf der Basis von WebSocket gekapselt ist. Der detaillierte Code kann zum Verständnis heruntergeladen werden. Nach erfolgreicher Verbindung gelangen Sie zum Registrierungsformular

Nachdem Sie einige Registrierungsinformationen eingegeben haben, klicken Sie auf Registrieren, um die Informationen über WebSocket an den Server zu senden. Der relevante übermittelte JS-Code lautet wie folgt:



Kopieren Code
Der Code lautet wie folgt:
var invokeregister = { url: 'Handler.OnRegister', Parameter: { UserName: '', Email: '', Passwort: ''} } ;
function register() {
$('#frmRegister').form('submit', {
onSubmit: function () {
var isValid = $( this).form('validate');
if (isValid) {
invokeregister.parameters = $('#frmRegister').serializeObject();
channel.Send(invokeregister, function (result) {
alert(
});
}
}

} Wenn die Überprüfungsdaten erfolgreich sind, sendet TcpChannel lediglich ein Methodenaufrufbeschreibungsobjekt, und Parameter sind die Parameter der Methode. Der zweite Parameter ist ein Rückrufverarbeitung
C#

Der Dienst basiert auf der erweiterten Verarbeitung von Beetle, daher ist der Code für die obige Registrierung sehr einfach:


Kopieren Code


Der Code lautet wie folgt:

public class Handler { public string OnRegister(string UserName, string Email, string PassWord) { Console.WriteLine(Benutzername);
Console.WriteLine(PassWord);
}


Nur Methode Sie müssen nur relevante Parameter definieren. Der Message Extension Controller von Beetle analysiert automatisch die von js zur Analyse übermittelten JSON-Daten und bindet sie zur Ausführung an relevante Methoden. Der detaillierte Code des Controllers kann ebenfalls abgerufen werden Nachdem die Logik geschrieben wurde, müssen wir nur noch den entsprechenden WebSocket-Dienst öffnen.







Code kopieren

Der Code lautet wie folgt:
class Program:WebSocketJsonServer
{
static void Main(string[] args)
{
Beetle.Controllers.Controller.Register(new Handler()); ("beetle");
Program server = new Program();
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} entsorgt", e.Channel.EndPoint);
}
}
Eine solche Websocket-Objektnachrichteninteraktion und -verarbeitung basierend auf HTML5 ist abgeschlossen und es ist nur eine kleine Menge Code erforderlich Um diese praktische Interaktionsfunktion zu erreichen, können Sie die folgenden Pakete nicht auslassen: Websocket-Protokollanalyse, Objekt-JSON-Verarbeitung und Nachrichtensteuerungsverteilung Quellcode zum Ansehen

WebSocket.Server.rar (641,79 kb)

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage