1、概述

HTTP协议是一种无状态协议,服务端本身不具有识别客户端的能力,必须借助外部机制,比如session和cookie,才能与特定客户端保持对话。这多多少少带来一些不便,尤其在服务器端与客户端需要持续交换数据的场合(比如网络聊天),更是如此。为了解决这个问题,HTML5提出了浏览器的WebSocket API。

WebSocket的主要作用是,允许服务器端与客户端进行全双工(full-duplex)的通信。举例来说,HTTP协议有点像发电子邮件,发出后要等待对方回信;WebSocket则是像打电话,服务器端和客户端可以同时向对方发送数据,它们之间存在着一条持续打开的数据通道。

WebSocket协议完全可以取代Ajax方法,用来向服务器端发送文本和二进制数据,而且还没有“同域限制”。

WebSocket不使用HTTP协议,而是使用自己的协议。浏览器发出的WebSocket请求类似于下面的样子:

GET / HTTP/1.1
Connection: Upgrade
Upgrade: websocket
Host: example.com
Origin: null
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

上面的头信息显示,有一个HTTP头是Upgrade。HTTP1.1协议规定,Upgrade头信息表示将通信协议从HTTP1.1转向该项所指定的协议。“Connection: Upgrade”就表示浏览器通知服务器,如果可以,就升级到webSocket协议。Origin用于验证浏览器域名是否在服务器许可范围内。Sec-WebSocket-Key则是用于握手协议的密钥,是base64编码的16字节随机字符串。

服务端的WebSocket回应则是:

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Origin: null
Sec-WebSocket-Location: ws://example.com

服务端同样用“Connection: Upgrade”通知浏览器,需要改协议。Sec-WebSocket-Accept是服务器在浏览器提供的Sec-WebSocket-Key字符串后面,添加“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”字符串,然的再取sha-1的hash值。浏览器将对这个值进行验证,以证明确实是目标服务器回应了webSocket请求。Sec-WebSocket-Location表示通信的WebSocket网址。

注意:WebSocket协议用ws表示。此外,还有wss协议,表示加密的WebSocket协议,对应HTTPs协议。

完成握手以后,WebSocket协议就在TCP协议之上,开始传送数据。

WebSocket协议需要服务器支持,目前比较流行的实现是基于node.js的socket.io,更多实现可参阅Wikipedia。至于浏览器端,目前主流浏览器都支持WebSocket协议(包括IE10+),仅有的例外是手机端的Opera Mini和Android Browser。

2、客户端

浏览器端对WebSocket协议的处理,无非就是三件事:

  • 建立连接和断开连接
  • 发送数据和接收数据
  • 处理错误

2.1 建立连接和断开连接

首先,客户端要检查浏览器是否支持WebSocket,使用的方法是查看window对像是否具有WebSocket属性。

if (window.WebSocket != undefined) {
// 支持
}

然后,开始与服务器建立连接(这里假定服务器就是本机的1740端口,需要使用ws协议)。

if (window.WebSocket != undefined) {
var connection = new WebSocket('ws://localhost:1740');
}

建立连接以后的WebSocket实例对象(即上面代码中的connection),有一个readyState属性,表示目前状态,可以取4个值:

  • 0:正在连接
  • 1:连接成功
  • 2:正在关闭
  • 3:连接关闭

握手协议成功以后,readyState就从0变成1,并触发open事件,这时就可以向服务器发送信息了。我们可以指定open事件的回调函数。

connection.onopen = wsOpen;

function wsOpen(event) {
console.log('Connected');
}

关闭WebSocket会触发close事件。

connection.onclose = wsClose;

function onClose(event) {
var wasClean = event.wasClean; //bool值,连接是否关闭了
var code = event.code; //连接状态(数字),由服务端提供
var reason = event.reason; //关闭原因,由服务端提供
console.log('Closed');
} connection.close();

2.2 发送数据和接收数据

连接建立后,客户端通过send方法向服务器端发送数据。

connection.send(message);

除了发送字符串,也可以使用Blob或ArrayBuffer对象发送二进制数据。

//使用ArrayBuffer发送Canvas图像数据
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Unit8Array(img.data.length);
for(var i = 0; i < img.data.length; i++) {
binary[i] = img.data[i]
}
connection.send(binary.buffer); //使用Blob发送文件
var file = document.querySelector('input[type="file"]').files[0];
connection.send(file);

客户端收到服务器发送的数据,会触发message事件。可以通过定义message事件的回调函数,来处理服务端返回的数据。

connection.onmessage = wsMessage;

function wsMessage(event) {
console.log(event.data);
}

上面代码的回调函数wsMessage的参数为事件对象evnet,该对象的data属性包含了服务器返回的数据。

2.3 处理错误

如果出现错误,浏览器会触发WebSocket实例对象的error事件。

connection.onerror = wsError;

function wsError(event) {
console.log('Error: ' + event.data);
}

3、服务器端

服务器端需要单独部署处理WebSocket的代码。下面用node.js搭建一个服务器环境。

var http = require('http');
var server = http.createServer(function(request, response){});

假设监听1740端口。

server.listen(1740, function() {
console.log((new Date()) + ' Server is listening on port 1740');
});

接着启动WebSocket服务器。这需要加载websocket库,如果没有安装,可以先使用命令安装。

var WebSocketServer = require('websocket').server;
var wsServer = new WebSocketServer({
httpServer: server
});

WebSocket服务器建立request事件的回调函数。

var connection;

wsServer.on('request', function(req){
connect = req.accept('echo-protocol', req.origin);
});

上面代码的回调函数接受一个参数req,表示request请求对象。然后,在回调函数内部,建立WebSocket连接Connection。接着,就要对connection的message事件指定回调函数。

wsServer.on('request', function(r) {
connection = req.accept('echo-protocol', req.origin); connection.on('message', function(message) {
var msgString = message.utf8Data;
connection.sendUTF(msgString);
});
});

最后,监听用户的disconnect事件。

connection.on('close', function(reasonCode, description) {
console.log(connection.remoteAddress + ' disconnected');
});

4、Socket.io简介

Socket.io是目前最流行的WebSocket实现,包括服务器和浏览器两个部分。它不仅简化了接口,使得操作更容易,而且对于那些不支持WebSocket的浏览器,会自动降为Ajax连接,最大限度地保证了兼容性。

第一步,在服务器端的项目根目录下,安装socket.io模块。

npm install socket.io

第二步,在根目录下建立app.js,并写入以下代码(使定使用了Express框架)。

var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server); server.listen(80); app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});

上面代码表示,先建立并运行HTTP服务器。Socket.io的运行建立在HTTP服务器之上。

第三步,将Socket.io插入客户端网页。

<script src="/socket.io/socket.io.js"></script>

然后,在客户端脚本中,建立WebSocket连接。

var socket = io.connect('http://localhost');

由于本例假定WebSocket主机与客户端是同一台机器,所以connect方法的参数是http://localhost。接着,指定news事件(即服务器端发送news)的回调函数。

socket.on('news', function (data){
console.log(data);
});

最后,用emit方法向服务器端发送信号,触发服务器端的anotherNews事件。

请注意:emit方法可以取代Ajax请求,而on方法指定的回调函数,也等同于Ajax的回调函数。

第四步,在服务器端的app.js中加入以下代码。

io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('anotherNews', function (data) {
console.log(data);
});
});

上面代码的io.sockets.on方法指定connect事件(WebSocket连接建立)的回调函数。在回调函数中,用emit方法向客户端发送数据,触发客户端的news事件。然后,再用on方法指定服务器端anotherNews事件的回调函数。

5、参考链接

[1] Ryan Stewart, Real-time data exchage in HTML5 with WebSockets

[2] Malte Ubl & Eiji Kitamura, WEBSOCKETS 简介:将套接字引入网络

[3] Jack Lawson, WebSockets: A Guide

[4] Michael W., Starting with Node and Web Sockets

[5] Jesse Cravens, Introduction to WebSockets

[6] Matt West, An Introduction to Websockets

[7] Maciej Sopyło, Node.js: Better Performance With Socket.IO and doT

[8] Jos Dirksen, Capture Canvas and WebGL output as video using websockets

[9] Ruanyf, WebSocket

HTML5新特性之WebSocket的更多相关文章

  1. web新特性 之 WebSocket

    详情参见:你真的了解WebSocket吗?     WebSocket系列教程   HTML5新特性之WebSocket WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HT ...

  2. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  3. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  4. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  5. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  6. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  7. HTML5新特性:FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

  8. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  9. HTML5新特性:范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

随机推荐

  1. Dynamic CRM 2013学习笔记(十二)实现子表合计(汇总,求和)功能的通用插件

    上一篇 Dynamic CRM 2013学习笔记(十一)利用Javascript实现子表合计(汇总,求和)功能 , 介绍了如何用js来实现子表合计功能,这种方法要求在各个表单上添加js方法,如果有很多 ...

  2. 对bootstrap modal的简单扩展封装

    对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677   注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...

  3. Html5文件

    HTML5 file api 读取文件MD5码 http://www.zhuwenlong.com/blog/52d6769f93dcae3050000003

  4. ubuntu 12.04 安装 redis

    原文地址:http://ijonas.com/software-development/nosql/412/ 1 Installing Redis 2.6.x on Ubuntu 12.04 and ...

  5. [chrome插件分享] gitlab-tree 更方便的浏览Gitlab上的代码

    说明 经常玩Github的人肯定都知道大名鼎鼎的octotree吧,这款chrome插件可以说是浏览代码的神器,利用左侧的树形菜单可以很方便的打开目录.浏览文件等,加上Github全站本身使用了pja ...

  6. Deployment Pipeline using Docker, Jenkins, Java

    Deployment Pipeline using Docker, Jenkins, Java and Couchbase http://blog.couchbase.com/2016/septemb ...

  7. Windows 10 Java环境变量配置

    Win10下 Java环境变量配置 首先,你应该已经安装了 Java 的 JDK 了(如果没有安装JDK,请跳转到此网址:http://www.oracle.com/technetwork/java/ ...

  8. 好消息!Html5游戏和动画的福音

    今年基本都淡出了cocos2d-js的开发,更多集中在普通H5应用上,还有自己的Fanvas组件(http://code.tencent.com/),做canvas动画. 不过,最近回头一看WebGL ...

  9. [推荐]PMO学习贴大集合

    [推荐]PMO学习贴大集合 http://wenku.baidu.com/view/a9b19bd4240c844769eaeed9.html http://wenku.baidu.com/view/ ...

  10. 如何在servlet取得spring beans (autowired)(转)

    在应用中一般普通的JavaPojo都是由Spring来管理的,所以使用autowire注解来进行注入不会产生问题,但是有两个东西是例外的,一个是 Filter,一个是Servlet,这两样东西都是由S ...