一咖驮、 HTML5 WebSocket
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議。
WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單捻勉，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中说敏，瀏覽器和服務(wù)器只需要完成一次握手诗赌，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸被饿。
在 WebSocket API 中四康，瀏覽器和服務(wù)器只需要做一個握手的動作，然后狭握，瀏覽器和服務(wù)器之間就形成了一條快速通道闪金。兩者之間就直接可以數(shù)據(jù)互相傳送。
現(xiàn)在论颅，很多網(wǎng)站為了實(shí)現(xiàn)推送技術(shù)哎垦，所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒）恃疯，由瀏覽器對服務(wù)器發(fā)出HTTP請求漏设，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點(diǎn)今妄，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求郑口，然而HTTP請求可能包含較長的頭部鸳碧，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費(fèi)很多的帶寬等資源犬性。
二 瞻离、實(shí)現(xiàn)websocket通訊
客戶端代碼：
```
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8" />
? ? <title>我猜猜</title>
? ? <link rel="stylesheet" >
? ? <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, "已連接到服務(wù)器");
? ? ? ? ? ? ? ? ? ? divMsg.append(html);
? ? ? ? ? ? ? ? ? ? ident = true;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ws.onclose = function(e){
? ? ? ? ? ? ? ? ? ? html = tpl.replace(/#msg#/g, "服務(wù)器關(guān)閉");
? ? ? ? ? ? ? ? ? ? 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>
? ?```
