代码改变世界

HTML5之WebSocket

2011-06-01 14:27  卫佳  阅读(394)  评论(0)  编辑  收藏  举报

传统的HTTP都是基于请求响应模型的，客户端和服务器端无法实现实时通信。之前有一种模仿实时通信的技术，从轮循、长轮循到comet都不能彻底 解决问题。WebSocket的出现改变了现状，上百倍的减少通信中无用的消息头，极大的提高了通信效率的同时也提供了非常低地的延时。
 
WebSocket请求和回复的消息头如下：

From client to server:

GET /demo HTTP/1.1

Host: example.com

Connection: Upgrade

Sec-WebSocket-Key2: 12998 5 Y3 1 .P00

Sec-WebSocket-Protocol: sample

Upgrade: WebSocket

Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5

Origin: http://example.com

[8-byte security key]

From server to client:

HTTP/1.1 101 WebSocket Protocol Handshake

Upgrade: WebSocket

Connection: Upgrade

WebSocket-Origin: http://example.com

WebSocket-Location: ws://example.com/demo

WebSocket-Protocol: sample

[16-byte hash response]

原书上有一个python写的简单的WebSocket EchoServer的实现，我就不贴代码了，大家用Nodejs实验吧。

检测浏览器支持Discount mbt sini men's shoes：

function loadDemo() {      if (window.WebSocket) { 
        document.getElementById("support").innerHTML = "HTML5 WebSocket is supported in your browser."; 
    } else { 
        document.getElementById("support").innerHTML = "HTML5 WebSocket is not supported in your browser."; 
    }  }

WebSocket的使用

巨简单无比，一段代码就可以说明：

<!DOCTYPE html> 
<title>WebSocket Test Page</title> 
<script> 
var log = function(s) { 
    if (document.readyState !== "complete") { 
        log.buffer.push(s); 
    } else { 
        document.getElementById("output").innerHTML += (s + "\n"); 
    } 
} 
log.buffer = []; 
url = "ws://localhost:8080/echo"; 
w = new WebSocket(url); 
w.onopen = function() { 
    log("open"); 
    w.send("thank you for accepting this WebSocket request"); 
} 
w.onmessage = function(e) { 
    log(e.data); 
} 
w.onclose = function(e) { 
    log("closed"); 
} 
window.onload = function() { 
    log(log.buffer.join("\n")); 
    document.getElementById("sendButton").onclick = function() { 
        w.send(document.getElementById("inputMessage").value); 
    } 
} 
</script> 
<input type="text" id="inputMessage" value="Hello, WebSocket!"><button 
id="sendButton">Send</button> 
<pre id="output"></pre>