html5-websocket基于遠(yuǎn)程方法調(diào)用的數(shù)據(jù)交互實(shí)現(xiàn)_HTML5教程
推薦：使用css如何制作時(shí)間ICON方法實(shí)踐最近我在重新設(shè)計(jì)自己的博客站點(diǎn)，決定用一個(gè)日歷樣式的icon顯示時(shí)間。以前的解決方案一般是用背景圖片，感謝css3，現(xiàn)在我們用css3就能實(shí)現(xiàn)這樣的功能；接下來將為您詳細(xì)介紹
一般在傳統(tǒng)網(wǎng)頁(yè)中注冊(cè)用戶信息都是通過post或ajax提交到頁(yè)面處理,到了HTML5后我們有另一種方法就是通過websocket進(jìn)行數(shù)據(jù)交互.websocket在數(shù)據(jù)交互有著傳統(tǒng)網(wǎng)頁(yè)所不具備的靈活性,通過Websocket建立長(zhǎng)連接后服務(wù)器可以直接向client發(fā)送數(shù)據(jù),而每次數(shù)據(jù)交互沒有必要帶上大量的http頭信息.websocket協(xié)議本身支持兩種數(shù)據(jù)格式文本和流,通過文本json的方式和javascript交互是一件非常簡(jiǎn)單事情,通過json網(wǎng)頁(yè)和Websocket通訊就非常便利,但要達(dá)到這個(gè)便利性我們還是要做簡(jiǎn)單的一些包裝還好現(xiàn)有的json在各平臺(tái)的組件都比較成熟.通過分析json數(shù)據(jù)映射到服務(wù)端對(duì)應(yīng)的方法執(zhí)行處理.
下面通過一個(gè)簡(jiǎn)單的用戶注冊(cè)來體現(xiàn)html5用josn和websocket進(jìn)行交互的處理過程.由于經(jīng)過封裝處理所以使用起來非常方便.
HTML:
功能很簡(jiǎn)單就是連接到websocket服務(wù)后進(jìn)行注冊(cè)信息提交,當(dāng)然為了更靈活點(diǎn)我們?cè)诒O(jiān)測(cè)到連接關(guān)閉的時(shí)候重新打開連接窗體,具體的JS代碼如下:
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());
}
代碼是不是很簡(jiǎn)潔,主要原因是在WebSocket的基礎(chǔ)上封裝了一個(gè)TcpChannel,詳細(xì)代碼可以下載了解.連接成功后就進(jìn)入了注冊(cè)窗體
通過填寫一些注冊(cè)信息后,點(diǎn)擊注冊(cè)把信息通過WebSocket提交給服務(wù)端,相關(guān)提交的JS代碼如下:
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;
}
});
}
當(dāng)驗(yàn)證數(shù)據(jù)成功后通過TcpChannel發(fā)送一個(gè)方法調(diào)用描述對(duì)象即可,url是指定調(diào)用的類方法,而paramters即是方法的參數(shù),參數(shù)也可以是復(fù)雜的結(jié)構(gòu)類型.第二個(gè)參數(shù)是一個(gè)回調(diào)處理. C#
服務(wù)由于基于Beetle的擴(kuò)展處理,所以代碼是非常簡(jiǎn)單的.針對(duì)以上注冊(cè)的邏輯方法代碼如下:
public class Handler
{
public string OnRegister(string UserName, string Email, string PassWord)
{
Console.WriteLine(UserName);
Console.WriteLine(Email);
Console.WriteLine(PassWord);
return UserName;
}
}
方法只需要定義相關(guān)參數(shù)即可,Beetle的消息擴(kuò)展控制器會(huì)自動(dòng)分析js提交的json數(shù)據(jù)進(jìn)行分析并綁定到相關(guān)方法中執(zhí)行.對(duì)于控制器的詳細(xì)代碼也可以通過下載代得到.邏輯編寫完成我們只需要簡(jiǎn)單地打開相關(guān)websocket服務(wù)即可. <pre>
{
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);
}
}
WebSocket.Server.rar (641.79 kb)
分享：html5 瀏覽器支持 如何讓所有的瀏覽器都支持HTML5標(biāo)簽樣式如今HTML5愈來愈引發(fā)大家的關(guān)注了，HTML5的開發(fā)者將必須考慮向下兼容的問題:如何讓所有的瀏覽器都能識(shí)別HTML5標(biāo)簽樣式
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定：body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5構(gòu)建觸屏網(wǎng)站之網(wǎng)站尺寸探討
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡(jiǎn)介
- html5 svg 中元素點(diǎn)擊事件添加方法
- 突襲HTML5之Javascript API擴(kuò)展2—地理信息服務(wù)及地理位置API學(xué)習(xí)
- html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因
- HTML5 語(yǔ)音搜索(淘寶店語(yǔ)音搜素)
- HTML5自定義data-* data(obj)屬性和jquery的data()方法的使用
- 突襲HTML5之Javascript API擴(kuò)展3—本地存儲(chǔ)全新體驗(yàn)
- html5 Canvas畫圖教程(6)—canvas里畫曲線之a(chǎn)rcTo方法
- html5拖曳操作 HTML5實(shí)現(xiàn)網(wǎng)頁(yè)元素的拖放操作
- 相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索html5-websocket基于遠(yuǎn)程方法調(diào)用的數(shù)據(jù)交互實(shí)現(xiàn)
- 教程說明：
HTML5教程-html5-websocket基于遠(yuǎn)程方法調(diào)用的數(shù)據(jù)交互實(shí)現(xiàn)
。