WebSocket简介
WebSocket是html5的重要特性。它是HTML5一种新的协议，实现了浏览器与服务器全双工通信(full-duplex)。使服务器可以主动传送数据给客户端，对构建实时web应用很有用
WebSocket 原理
webSocket 出现的背景及优点：http://zh.wikipedia.org/wiki/WebSocket
WebSocket API 及文档
常用方法：
send(data)
事件：
onopen
onmessage
onerror
onclose
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实现websocket