一、 HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
二 、实现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){
var url = 'ws://127.0.0.1:5000/index?token=xxxxxx';
//ws = new WebSocket('wss://127.0.0.1:5000');
ws = new WebSocket(url);
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>
```
网友评论