リモート メソッド呼び出しに基づく html5-websocket データ インタラクションの実装_html5 チュートリアル スキル

一般に、従来の Web ページの登録ユーザー情報は、ポストまたは Ajax を介してページに送信され、WebSocket を介してデータを操作できるようになりました。 Websocket を介して長い接続を確立した後、サーバーはクライアントにデータを直接送信でき、各データ対話で大量の http ヘッダー情報を提供する必要はありません。WebSocket プロトコル自体は、テキストとストリームの 2 つのデータ形式をサポートします。テキスト json と javascript による通信は非常に簡単です。json Web ページと Websocket を介した通信は非常に便利ですが、この利便性を実現するには、依然としていくつかの単純なパッケージ化を行う必要があります。幸いなことに、さまざまなプラットフォーム上の既存の json コンポーネントは比較的成熟しています。 . jsonを解析することで、データをサーバー側の対応するメソッドにマッピングして処理します。

以下は、josn と websocket を使用した html5 間のやり取りのプロセスを反映するための簡単なユーザー登録です。カプセル化されているため、非常に便利です。

HTML:

機能は非常にシンプルで、WebSocket サービスに接続して登録情報を送信するだけです。もちろん、より柔軟にするために、接続が閉じられたことが検出されたときに接続フォームを再度開きます。

コードをコピーコードは次のとおりです:

function connect () {
channel = new TcpChannel();
channel.Connected = function (evt) {
$('#dlgConnect').dialog('close'); >channel.Disused = function (evt) {
$( '#dlgConnect').dialog('open')
};
channel.Error = function (evt) {
alert( evt);
};
channel.Connect( $('#txtHost').val());


主な理由は次のとおりです。 TcpChannel が WebSocket に基づいてカプセル化されているということです。詳細なコードをダウンロードして理解できます。接続が成功したら、登録フォームに入力します
。

いくつかの登録情報を入力した後、[登録] をクリックして WebSocket 経由で情報をサーバーに送信します。送信された関連する JS コードは次のとおりです:

コピーcode

コードは次のとおりです: var invokeregister = { url: 'Handler.OnRegister'、パラメータ: { UserName: ''、Email: ''、パスワード: ''} } ;

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
}
});検証データが成功した場合に渡されます。TcpChannel はメソッド呼び出し記述オブジェクトを送信するだけです。URL は呼び出すように指定されたクラス メソッドであり、パラメーターはメソッドのパラメーターである場合もあります。2 番目のパラメーターは、複雑な構造型にすることもできます。コールバック処理

C#

このサービスは Beetle の拡張処理に基づいているため、コードは非常に単純です。上記の登録のロジック メソッド コードは次のとおりです。

コピーcode

コードは次のとおりです:

public class Handler

{ public string OnRegister(string UserName, string Email, string PassWord) { Console.WriteLine(Email); return

}

メソッドのみ 関連するパラメーターを定義するだけで、JS によって送信された JSON データが自動的に分析され、実行のためにコントローラーの詳細なコードが取得されます。ダウンロード。ロジックを記述した後は、関連する WebSocket サービスを開くだけです。







コードをコピーします

コードは次のとおりです:

クラス Program:WebSocketJsonServer
{
static void Main(string[] args)
{
Beetle.Controllers.Controller.Register(new Handler()); ("beetle");
プログラムサーバー = new Program();
Console.WriteLine("websocket start@8088"); .Sleep(-1);
} 保護されたオーバーライド void OnError(object sender, ChannelErrorEventArgs e)
{
base.OnError(sender, e); Exception.Message);
}
protected override void OnConnected(object sender, ChannelEventArgs e)
{
base.OnConnected(sender, e);接続された", e.Channel.EndPoint);
}
protected override void OnDisowned(object sender, ChannelDisownedEventArgs e)
{
base.OnDissolved(sender, e);
Console.WriteLine ("{0} 破棄されました", e.Channel.EndPoint);
}
}
このような WebSocket オブジェクトのメッセージの対話と HTML5 に基づく処理は完了しており、必要なコードはほんの少量です。この便利な対話機能を実現するには、WebSocket プロトコル解析、オブジェクト JSON 処理、およびメッセージ制御配布のパッケージをダウンロードしてください。表示するソースコード

WebSocket.Server.rar (641.79 kb)