標籤：style blog http io color ar os sp for
WebSocket簡介 WebSocket是html5的重要特性。它是HTML5一種新的協議，實現了瀏覽器與伺服器全雙工系統通訊(full-duplex)。使伺服器可以主動傳送資料給用戶端，對構建即時web應用很有用 WebSocket 原理webSocket 出現的背景及優點：http://zh.wikipedia.org/wiki/WebSocket原現實現 ：參考 http://www.cnblogs.com/dxy1982/archive/2012/01/19/2325419.html WebSocket API 及文檔常用方法： send(data) 事件： onopen onmessage onerror onclose 官方API:http://dev.w3.org/html5/websockets/ WebSocket 執行個體執行個體：“看圖猜成語” 業務需求：使用者在用戶端看圖，輸入成語，伺服器端給出是否猜正確的響應。（下面的例子中輸出圖的方法省略）實現環境：用nodejs搭建伺服器，與 用戶端（支援 html5websocket）進行通訊。 目的：1. 瞭解socket編程的相關知識2. 瞭解node 實現socket編程的方法及資料通訊 提前準備：1. 安裝nodejs （網上有各自安裝教程）2. 安裝nodejs-websocket npm install nodejs-websocket 代碼：用戶端:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>我猜猜</title> <link rel="stylesheet" href="http://g.tbcdn.cn/??tb/global/3.2.1/global-min.css,tb/tb-fp/14.7.6/index-e-min.css?t=20141016"> <script src="http://g.tbcdn.cn/kissy/k/1.4.0/seed-min.js?t=20141016"></script> <link rel="stylesheet" href="guess.css"/></head><body><h2 class="header">我猜猜</h2><div class="clearfix"> <section class="mycanvas"> <h3>畫板</h3> </section></div><section class="foot clearfix"> <div class="btns"> <!--<label for="">請輸入使用者名稱：</label>--> <!--<input type="text" id="J_User" value=""/>--> <label for="">請輸入成語：</label> <input type="text" id="J_Word" value=""/> <button type="submit" class="next" id="J_Submit">提交</button> </div> <div class="info" id="J_Message"> <!--<div class="info-item">msg</div>--> </div></section><script> KISSY.use(‘core‘,function(S){ var $ = S.all; var btnSubmit = $(‘#J_Submit‘), txtWord = $(‘#J_Word‘), divMsg = $(‘#J_Message‘), //txtUser = $(‘#J_User‘), tpl = ‘<div class="info-item">#msg#</div>‘; var ws = createWs(); var ident = false; btnSubmit.on(‘click‘,function(){ var word = txtWord.val(); //var user = txtUser.val(); if(ws){ if(ident){ ws.send(word); } } }) function createWs(){ var ws = null; if(window.WebSocket){ ws = new WebSocket(‘ws://127.0.0.1:5000‘); ws.onopen = function(e){ html = tpl.replace(/#msg#/g, "已串連到伺服器"); divMsg.append(html); ident = true; } ws.onclose = function(e){ html = tpl.replace(/#msg#/g, "伺服器關閉"); divMsg.append(html); } ws.onerror = function(){ html = tpl.replace(/#msg#/g, "串連出錯"); divMsg.append(html); } ws.onmessage = function(e){ console.log(e.data); html = tpl.replace(/#msg#/g, e.data); divMsg.append(html); } } return ws; } })</script></body></html>
伺服器端：
var ws = require(‘nodejs-websocket‘);console.log(‘開始建立串連...‘);var answer = ‘聞雞起舞‘;var server = ws.createServer(function(conn){ conn.on(‘text‘,function(str){ console.log(‘收到的資訊為:‘+ str); var res =‘您輸入了‘+ str; if(str == answer){ conn.sendText(res +"。 恭喜你，答對了"); }else{ conn.sendText(res +"。 呃，錯了"); } }) conn.on("close", function (code, reason) { console.log("關閉串連") }); conn.on("error", function (code, reason) { console.log("異常關閉") });}).listen(5000);
啟動伺服器：
開啟用戶端：
輸入文字：伺服器返回資訊"您輸入了聞雞起舞。 恭喜你，答對了"
ok,結束。
我也是在學習過程中，如果大家發現文章中有寫的不正確的地方，歡迎各位看客指正。
附：nodejs實現websockethttp://blog.fens.me/nodejs-websocket/http://www.cnblogs.com/fullhouse/archive/2011/07/18/2109953.html
寫執行個體學習--html5 WebSocket
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
