HTML5之WebSocket

传统的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>

转载于:https://www.cnblogs.com/imadin/archive/2011/06/01/2065999.html

HTML5之WebSocket相关推荐

认识HTML5的WebSocket 认识HTML5的WebSocket
2019独角兽企业重金招聘Python工程师标准>>> 在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技 ...
使用HTML5的WebSocket实现服务端和客户端数据通信（有演示和源码）
WebSocket协议是基于TCP的一种新的网络协议.WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.依靠这种技术可以实现客户端和服务器端的长连接,双向实时通信. ...
【物联网智能网关-14】Html5:Canvas+WebSocket实现远程实时通信（下）
在上篇博文<Html5:Canvas+WebSocket实现远程实时通信(上)>中已经介绍了当前实现动态网页的一些基本技术,也说明了在.NET micro framework平台下实现We ...
在Apache上搭建pywebsocket提供html5的websocket服务
参考:http://www.travisglines.com/web-coding/how-to-set-up-apache-to-serve-html5-websocket-applications ...
认识HTML5的WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
websocket receive方法内有循环怎么退出_认识HTML5的WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
认识HTML5的WebSocket 1
认识HTML5的WebSocket 在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Aja ...
html5利用websocket完成的推送功能（tomcat）
html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...
介绍html5的英文,HTML5的WebSocket基本资料（国外英文资料）.doc
HTML5的WebSocket基本资料(国外英文资料) 济匿塘践没宿步抠截栋眯迈樱霓柴才溉症稗啼册龋晃挽愧拇幼晚再朽堰榆够淋韭柔沂挫由热汇工今能水雌绚幽晓息暴隶里剿蛮瘴着揩榴寄响值捍绎佩棒韶看翰认摩舵 ...
突袭HTML5之WebSocket入门3 - 通信模型socket.io
为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程 ...

HTML5之WebSocket

HTML5之WebSocket相关推荐

最新文章

热门文章