今天需
要做一个websocket的
后台服务demo,以前没接触过,所以今天转载了下别人的东东,学习下。
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了
一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的API提供了
一个方法,
从客户端
使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API:它可用于客户端、服务器端。而且有
一个优秀的第三方API,名为Socket.IO。
@H_
502_15@@H_
502_15@
一、什么是WebSocket API?
@H_
502_15@@H_
502_15@ WebSocket API是下一代客户端-服务器的异步通信
方法。该通信取代了单个的TCP
套接字,使用ws或wss协议,可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的
支持。
@H_
502_15@@H_
502_15@ WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。
@H_
502_15@@H_
502_15@ Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建,用于双向推送消息。
@H_
502_15@@H_
502_15@
二、WebSocket API的用法
@H_
502_15@@H_
502_15@ 只专注于客户端的API,因为每个服务器端语言有自己的API。下面的
代码片段是打开
一个连接,为连接创建事件监听器,断开连接,消息时间,发送消息返回到服务器,
关闭连接。
@H_
502_15@@H_
502_15@
// 创建
一个Socket实例
@H_
502_15@ var socket = new WebSocket('ws://localhost:8080'
);
@H_
502_15@@H_
502_15@ // 打开Socket
@H_
502_15@ socket
.onopen = function(event)
{
@H_
502_15@@H_
502_15@ // 发送
一个初始化消息
@H_
502_15@ socket.send('I am the client and I\'m listening!'
);
@H_
502_15@@H_
502_15@ // 监听消息
@H_
502_15@ socket
.on
message = function(event)
{
@H_
502_15@ console.log('Client received a
message',event
);
@H_
502_15@ };
@H_
502_15@@H_
502_15@ // 监听Socket的
关闭
@H_
502_15@ socket
.onclose = function(event)
{
@H_
502_15@ console.log('Client notified socket has closed',event
);
@H_
502_15@ };
@H_
502_15@@H_
502_15@ //
关闭Socket....
@H_
502_15@ //socket.close()
@H_
502_15@ };
@H_
502_15@ 让我们来看看上面的初始化片段。参数为URL,ws表示WebSocket协议。onopen、onclose和on
message
方法把事件连接到Socket实例上。每个
方法都提供了
一个事件,以表示Socket的状态。
@H_
502_15@@H_
502_15@ on
message事件提供了
一个data
属性,它可以包含消息的Body部分。消息的Body部分必须是
一个字符串,可以进行序列化/反序列化操作,以
便传递更多的数据。
@H_
502_15@@H_
502_15@ WebSocket的语法非常简单,使用WebSockets是难以置信的容易……除非客户端
不支持WebSocket。IE浏览器目前
不支持WebSocket通信。如果
你的客户端
不支持WebSocket通信,下面有几个后备方案供你使用:
@H_
502_15@@H_
502_15@
Flash技术 —— Flash可以提供
一个简单的替换。 使用Flash最明显的缺点是并非所有客户端都安装了Flash,而且某些客户端,如iPhone/iPad,
不支持Flash。
@H_
502_15@@H_
502_15@
AJAX Long-Polling技术 —— 用AJAX的long-polling来模拟WebSocket在业界已经有一段时间了。它是
一个可行的技术,但它不能优化发送的信息。也就是说,它是
一个解决方案,但不是最佳的技术方案。
@H_
502_15@@H_
502_15@ 由于目前的IE等浏览器
不支持WebSocket,要提供WebSocket的事件处理、返回传输、在服务器端使用
一个统一的API,那么该
怎么办呢?幸运的是,Guillermo Rauch创建了
一个Socket.IO技术。
@H_
502_15@@H_
502_15@
三、带Socket.IO的WebSocket
@H_
502_15@@H_
502_15@ Socket.IO是Guillermo Rauch创建的WebSocket API,Guillermo Rauch是LearnBoost公司的首席技术官以及LearnBoost实验室的首席科学家。Socket.IO使用检测
功能来判断是否建立WebSocket连接,或者是AJAX long-polling连接,或Flash等。可
快速创建实时的应用程序。Socket.IO还提供了
一个NodeJS API,它看起来非常像客户端API。
@H_
502_15@ 建立客户端Socket.IO
@H_
502_15@@H_
502_15@ Socket.IO可以从GitHub下载,可以把socket.io.js
文件包含到
页面中:
@H_
502_15@@H_
502_15@
<script src="
http://cdn
.socket.io/stable/socket.io.js"></script>
@H_
502_15@ [/code
@H_
502_15@@H_
502_15@ 此时,Socket.IO在此
页面上是有效的,是时候创建Socket了:
@H_
502_15@@H_
502_15@ [code]
@H_
502_15@ // 创建Socket.IO实例,建立连接
@H_
502_15@ var socket= new io
.socket('localhost',
{
@H_
502_15@ port: 8080
@H_
502_15@ }
);
@H_
502_15@ socket.connect(
);
@H_
502_15@@H_
502_15@ //
添加一个连接监听器
@H_
502_15@ socket
.on('connect',function()
{
@H_
502_15@
console.log('Client has connected to the server!'
);
@H_
502_15@ }
);
@H_
502_15@@H_
502_15@ //
添加一个连接监听器
@H_
502_15@ socket
.on('
message',function(data)
{
@H_
502_15@
console.log('Received a
message from the server!',data
);
@H_
502_15@ }
);
@H_
502_15@@H_
502_15@ //
添加一个关闭连接的监听器
@H_
502_15@ socket
.on('disconnect',function()
{
@H_
502_15@
console.log('The client has disconnected!'
);
@H_
502_15@ }
);
@H_
502_15@@H_
502_15@ // 通过Socket发送一条消息到服务器
@H_
502_15@ function send
messageToServer(
messag
E) {
@H_
502_15@ socket.send(
messag
E);
@H_
502_15@ }
@H_
502_15@ Socket.IO简化了WebSocket API,统一了返回运输的API。传输
包括:
@H_
502_15@ WebSocket
@H_
502_15@ Flash Socket
@H_
502_15@ AJAX long-polling
@H_
502_15@ AJAX multipart streaming
@H_
502_15@ IFrame
@H_
502_15@ JSONP polling
@H_
502_15@@H_
502_15@ 你还可以设置任意的Socket.IO构造器的第二个选项,选项
包括:
@H_
502_15@@H_
502_15@ port - 待连接的端口
@H_
502_15@ transports -
一个数组,包含不同的传输类型
@H_
502_15@ transportOptions - 传输的参数使用的对象,带附加
属性
@H_
502_15@@H_
502_15@ Socket.IO还提供了由本地WebSocket API提供的普通连接、断开连接、消息事件。Socket还提供了封装每个事件类型的
方法。
@H_
502_15@@H_
502_15@
四、NodeJS和Socket.IO联合开发
@H_
502_15@@H_
502_15@ Socket.IO提供的服务器端
解决方案,允许统一的客户端和服务器端的API。
使用Node,你
可以创建一个典型的
http服务器,然后把服务器的实例传递到Socket.IO。从这里,你创建连接、断开连接、建立消息监听器,跟在客户端一样。
@H_
502_15@@H_
502_15@
一个简单的服务器端脚本看起来如下:
@H_
502_15@@H_
502_15@
// 需要
http 模块来启动服务器和Socket.IO
@H_
502_15@ var
http=
require('
http'),io=
require('socket.io'
);
@H_
502_15@@H_
502_15@ // 在8080端口启动服务器
@H_
502_15@ var server=
http.createServer(function(req,res)
{
@H_
502_15@ // 发送HTML的headers和
message
@H_
502_15@
re
s.writeHead(200,
{ 'Content-Type': 'text/html' }
);
@H_
502_15@
re
s.end('<h1>
Hello Socket Lover!</h1>'
);
@H_
502_15@ }
);
@H_
502_15@ server.listen(8080
);
@H_
502_15@@H_
502_15@ // 创建
一个Socket.IO实例,把它传递给服务器
@H_
502_15@ var socket= io.listen(server
);
@H_
502_15@@H_
502_15@ //
添加一个连接监听器
@H_
502_15@ socket
.on('connection',function(client)
{
@H_
502_15@@H_
502_15@ // 成功!现在开始监听接收到的消息
@H_
502_15@ client
.on('
message',function(event)
{
@H_
502_15@ console.log('Received
message from client!',event
);
@H_
502_15@ }
);
@H_
502_15@ client
.on('disconnect',function()
{
@H_
502_15@ clearInterval(interval
);
@H_
502_15@ console.log('Server has disconnected'
);
@H_
502_15@ }
);
@H_
502_15@ }
);
@H_
502_15@ 你可以运行服务器部分,假定已安装了NodeJS,从命令行执行:
@H_
502_15@@H_
502_15@
@H_
502_15@ 现在客户端和服务器都能来回推送消息了!
在NodeJS脚本内,可以
使用简单的JavaScript创建
一个定期消息发送器:
@H_
502_15@@H_
502_15@
// 创建
一个定期(每5秒)发送消息到客户端的发送器
@H_
502_15@ var interval= se
Tinterval(function()
{
@H_
502_15@ client.send('This is a
message from the server! ' + new Date().getTime()
);
@H_
502_15@ },5000
);
@H_
502_15@ 服务器端将会每5秒推送消息到客户端!
@H_
502_15@@H_
502_15@
五、dojox.socket和Socket.IO
@H_
502_15@@H_
502_15@ Persevere的创建者Kris Zyp创建了dojox
.socket。dojox
.socket以Dojo库
一致的方式封装了WebSocket API,用于在客户端
不支持WebSocket时,使用long-polling替代。
@H_
502_15@@H_
502_15@ 下面是怎样在客户端使用dojox
.socket和在服务器端使用Socket.IO的例子:
@H_
502_15@@H_
502_15@
var args,ws= typeof WebSocket
!= 'undefined';
@H_
502_15@ var socket= dojox
.socket(args=
{
@H_
502_15@ url: ws? '/socket.io/websocket' : '/socket.io/xhr-polling',
@H_
502_15@ headers:
{
@H_
502_15@ 'Content-Type':'application/x-www-urlencoded'
@H_
502_15@ },
@H_
502_15@ transport: function(args,
messag
E){
@H_
502_15@ arg
s.content =
message; // use URL-encoding to send the
message instead of a raw body
@H_
502_15@ dojo.xhrPost(args
);
@H_
502_15@ };
@H_
502_15@ }
);
@H_
502_15@ var sessionId;
@H_
502_15@ socket
.on('
message',function()
{
@H_
502_15@ if (!sessionId)
{
@H_
502_15@ sessionId=
message;
@H_
502_15@ arg
S.Url += '/' + sessionId;
@H_
502_15@ }else if(
message.substr(0,3) == '~h~')
{
@H_
502_15@ // a heartbeat
@H_
502_15@ }
@H_
502_15@ }
);
@H_
502_15@ dojox
.socket.Reconnect还创建了在
套接字失去连接时
自动重连。期待包含dojox
.socket的Dojo 1.6版本早日发布。
@H_
502_15@@H_
502_15@
六、实际应用和WebSocket资源
@H_
502_15@@H_
502_15@ 有很多WebSocke的实际应用。WebSocket对于大多数客户机-服务器的异步通信是理想的,在浏览器内聊天是最突出的应用。WebSocket由于其高效率,被大多数公司所使用。
@H_
502_15@@H_
502_15@
WebSocket资源
@H_
502_15@ Socket.IO
站点:
http://socket.io/
@H_
502_15@ WebSocket的Wikipedia:
@L_781_
262@
@H_
502_15@ WebSocket
s.org
站点:
http://www.websockets.org/
@H_
502_15@ Dojo WebSocket
站点:
http://www.sitepen.com/blog/2010/10/31/dojo-websocket