Writing Example Learning--HTML5 WebSocket

WebSocket IntroductionWebSocket is an important feature of HTML5. It is HTML5 a new protocol that implements browser-to-server full-duplex communication (Full-duplex). Enables the server to proactively transmit data to the client, useful for building a real-time Web application WebSocket principle WebSocket Background and advantages: Http://zh.wikipedia.org/wiki/WebSocket realized: Reference http:/ /www.cnblogs.com/dxy1982/archive/2012/01/19/2325419.html WebSocket API and documentation Common methods: Send ( data ) Event: OnOpen OnMessage onerror OnClose Official API:http://dev.w3.org/html5/websockets/ WebSocket instance: "Look at the picture guess idiom" business needs: the user in the client to see the picture, input idiom, the server side gives whether guessed the correct response. (In the example below, the output diagram method is omitted) to implement the environment: Build the server with Nodejs, and communicate with the client (support Html5websocket). Objective: 1. Learn about socket Programming 2. Learn how node implements socket programming and data communication preparation in advance: 1. Install Nodejs (online with respective installation tutorials) 2. Installing Nodejs-websocket NPM Install Nodejs-websocket Code:Client:

<! DOCTYPE html> for= "" > enter your username:</label>--> <!--<input type= "text" id= "J_user" value= "/>--> <label for= "" > Please enter idiom:</label> <input type= "text" id= "J_word" value= "/> <button type=" Submit "class=" Next "id=" J_submit "> 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; varBtnsubmit = $ (' #J_Submit '), Txtword= $ (' #J_Word '), Divmsg= $ (' #J_Message '),            //Txtuser = $ (' #J_User '),TPL = ' <div class= ' Info-item ' > #msg #</div> '; varWS =createws (); varIdent =false; Btnsubmit.on (' Click ',function(){            varWord =Txtword.val (); //var user = Txtuser.val ();            if(WS) {if(ident) {ws.send (word); }            }        })        functioncreatews () {varWS =NULL; if(window. WebSocket) {ws=NewWebSocket (' ws://127.0.0.1:5000 '); Ws.onopen=function(e) {HTML= Tpl.replace (/#msg #/g, "connected to server");                    Divmsg.append (HTML); Ident=true; } ws.onclose=function(e) {HTML= Tpl.replace (/#msg #/g, "Server Off");                Divmsg.append (HTML); } ws.onerror=function() {HTML= Tpl.replace (/#msg #/g, "Connection error");                Divmsg.append (HTML); } ws.onmessage=function(e) {console.log (e.data); HTML= Tpl.replace (/#msg #/g, E.data);                Divmsg.append (HTML); }            }            returnws; }    })</script></body>
Server-side:
varWS = Require (' Nodejs-websocket '); Console.log (' Start to establish connection ... ');varAnswer = ' Wenjiqiwu ';varServer = Ws.createserver (function(conn) {Conn.on (' Text ',function(str) {Console.log (' The message received is: ' +str); varres = ' You have entered ' +str; if(str = =answer) {Conn.sendtext (res+ ". Congratulations, you're right.); }Else{conn.sendtext (res+ ". Uh, wrong. "); }}) Conn.on ("Close",function(code, reason) {Console.log ("Close Connection")    }); Conn.on ("Error",function(code, reason) {Console.log ("Abnormal shutdown")    });}). Listen (5000);
start the server:
Open the client:
Enter text: The server returns the message "you entered Wenjiqiwu. Congratulations, you're right.
OK, end.
I am also in the process of learning, if you find the article has written in the wrong place, you are welcome to correct.
Attached: Nodejs realization websockethttp://blog.fens.me/nodejs-websocket/http://www.cnblogs.com/fullhouse/archive/2011/07/18/2109953.html
Writing Example Learning--HTML5 WebSocket