返回上一页
客服QQ
客服QQ
一切从沟通开始……
《精通HTML5编程》第六章：WebSocket API
作者：睿美印象网站建设工作室 发布日期：2012-11-26
统的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 + " ");
}
}
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(" "));
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>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
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 + " ");
}
}
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(" "));
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>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
已有 0 条评论
暂无评论
- HTML5移动应用开发第3章：移动Web离线应用
- css图层-图片半透明
- HTML5网页如何让所有的浏览器都能识别HTML5标签样式
- HTML元素的ID和Name属性的区别
- 8、【视频】IE6的双倍边距bug
- 正IE6不支持position:fixed的bug
- 仿AS语法来写HTML5—第2章，Sprite实现动画
- Windows Internet Explorer 10 开发者指南
- CSS浏览器常见兼容问题汇总
- HTML5特性检测一：Canvas Text
- HTML5时代：实战PHP之Web页面表单设计
- 了解CSS挂马及相应防范方法
- 实例解决FF下常遇到的5个bug
- IE下li下面空隙问题
- 包括IE8的浏览器兼容hack汇总
- 一步一步学做游戏 第七回：熊碰到奖品处理
版权所有：睿美印象网络网站建设工作室 2010-2012 服务热线：15636322282（网站建设工作室）
