日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

html5-websocket基于遠程方法調用的數(shù)據(jù)交互實現(xiàn)_HTML5教程

編輯Tag賺U幣

推薦：使用css如何制作時間ICON方法實踐
最近我在重新設計自己的博客站點，決定用一個日歷樣式的icon顯示時間。以前的解決方案一般是用背景圖片，感謝css3，現(xiàn)在我們用css3就能實現(xiàn)這樣的功能；接下來將為您詳細介紹

一般在傳統(tǒng)網(wǎng)頁中注冊用戶信息都是通過post或ajax提交到頁面處理,到了HTML5后我們有另一種方法就是通過websocket進行數(shù)據(jù)交互.websocket在數(shù)據(jù)交互有著傳統(tǒng)網(wǎng)頁所不具備的靈活性,通過Websocket建立長連接后服務器可以直接向client發(fā)送數(shù)據(jù),而每次數(shù)據(jù)交互沒有必要帶上大量的http頭信息.websocket協(xié)議本身支持兩種數(shù)據(jù)格式文本和流,通過文本json的方式和javascript交互是一件非常簡單事情,通過json網(wǎng)頁和Websocket通訊就非常便利,但要達到這個便利性我們還是要做簡單的一些包裝還好現(xiàn)有的json在各平臺的組件都比較成熟.通過分析json數(shù)據(jù)映射到服務端對應的方法執(zhí)行處理.

下面通過一個簡單的用戶注冊來體現(xiàn)html5用josn和websocket進行交互的處理過程.由于經(jīng)過封裝處理所以使用起來非常方便.

HTML:

功能很簡單就是連接到websocket服務后進行注冊信息提交,當然為了更靈活點我們在監(jiān)測到連接關閉的時候重新打開連接窗體,具體的JS代碼如下:

復制代碼 代碼如下:m.hl5o.cn

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

代碼是不是很簡潔,主要原因是在WebSocket的基礎上封裝了一個TcpChannel,詳細代碼可以下載了解.連接成功后就進入了注冊窗體

 

通過填寫一些注冊信息后,點擊注冊把信息通過WebSocket提交給服務端,相關提交的JS代碼如下:

復制代碼 代碼如下:m.hl5o.cn

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;
}
});
}

當驗證數(shù)據(jù)成功后通過TcpChannel發(fā)送一個方法調用描述對象即可,url是指定調用的類方法,而paramters即是方法的參數(shù),參數(shù)也可以是復雜的結構類型.第二個參數(shù)是一個回調處理. 

C#

服務由于基于Beetle的擴展處理,所以代碼是非常簡單的.針對以上注冊的邏輯方法代碼如下:

復制代碼 代碼如下:m.hl5o.cn

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

方法只需要定義相關參數(shù)即可,Beetle的消息擴展控制器會自動分析js提交的json數(shù)據(jù)進行分析并綁定到相關方法中執(zhí)行.對于控制器的詳細代碼也可以通過下載代得到.邏輯編寫完成我們只需要簡單地打開相關websocket服務即可.

<pre>


復制代碼 代碼如下:m.hl5o.cn
class Program:WebSocketJsonServer
{
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} disposed", e.Channel.EndPoint);
}
}
這樣一個基于html5的websocket對象消息交互和處理就完成,只需很少量的代碼就實現(xiàn)了js和服務進行數(shù)據(jù)交互的處理.要實現(xiàn)這方便交互功能以下幾個封裝省不了.websocket協(xié)議分析,對象json處理和消息控制分發(fā);如果想了解相關細可以下載源碼查看.

WebSocket.Server.rar (641.79 kb)


分享：html5 瀏覽器支持 如何讓所有的瀏覽器都支持HTML5標簽樣式
如今HTML5愈來愈引發(fā)大家的關注了，HTML5的開發(fā)者將必須考慮向下兼容的問題:如何讓所有的瀏覽器都能識別HTML5標簽樣式

來源：未知//所屬分類：HTML5教程/更新時間：2013-04-22
相關HTML5教程：