统的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实验吧。
检测浏览器支持：
JavaScript Code复制内容到剪贴板
- 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的使用
巨简单无比，一段代码就可以说明：
XML/HTML Code复制内容到剪贴板
- <!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>
相关文章
精彩导读
热门资讯
关注我们
