ITPUB论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 14765|回复: 3

[精华] 认识HTML5的WebSocket [复制链接]

注册会员

天地会

精华贴数
21
专家积分
278
技术积分
23075
社区积分
71
注册时间
2007-8-20
论坛徽章:
61
2010广州亚运会纪念徽章:台球
日期:2010-10-18 12:43:48ITPUB 11周年纪念徽章
日期:2012-10-09 18:08:15蛋疼蛋
日期:2012-11-27 15:47:59茶鸡蛋
日期:2013-01-09 10:59:002013年新春福章
日期:2013-02-25 14:51:24奥运会纪念徽章:帆船
日期:2013-04-02 17:07:05奥运纪念徽章
日期:2013-07-18 13:55:12优秀写手
日期:2013-12-18 09:29:10技术图书徽章
日期:2014-01-24 10:11:16马上有车
日期:2014-03-20 16:13:24马上有房
日期:2014-03-20 16:14:11马上有钱
日期:2014-03-20 16:14:11
发表于 2010-12-1 11:28:08 |显示全部楼层
《认识HTML5的WebSocket》
【版权声明】:本文属于原创,转载需征得作者chszs的同意!

认识HTML5的WebSocket



在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API:它可用于客户端、服务器端。而且有一个优秀的第三方API,名为Socket.IO。

一、什么是WebSocket API?

WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字,使用ws或wss协议,可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。

Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建,用于双向推送消息。

二、WebSocket API的用法

只专注于客户端的API,因为每个服务器端语言有自己的API。下面的代码片段是打开一个连接,为连接创建事件监听器,断开连接,消息时间,发送消息返回到服务器,关闭连接。
  1. // 创建一个Socket实例
  2. var socket = new WebSocket('ws://localhost:8080');

  3. // 打开Socket
  4. socket.onopen = function(event) {

  5.   // 发送一个初始化消息
  6.   socket.send('I am the client and I\'m listening!');

  7.   // 监听消息
  8.   socket.onmessage = function(event) {
  9.     console.log('Client received a message',event);
  10.   };

  11.   // 监听Socket的关闭
  12.   socket.onclose = function(event) {
  13.     console.log('Client notified socket has closed',event);
  14.   };

  15.   // 关闭Socket....
  16.   //socket.close()
  17. };
复制代码


让我们来看看上面的初始化片段。参数为URL,ws表示WebSocket协议。onopen、onclose和onmessage方法把事件连接到Socket实例上。每个方法都提供了一个事件,以表示Socket的状态。

onmessage事件提供了一个data属性,它可以包含消息的Body部分。消息的Body部分必须是一个字符串,可以进行序列化/反序列化操作,以便传递更多的数据。

WebSocket的语法非常简单,使用WebSockets是难以置信的容易……除非客户端不支持WebSocket。IE浏览器目前不支持WebSocket通信。如果你的客户端不支持WebSocket通信,下面有几个后备方案供你使用:

Flash技术 —— Flash可以提供一个简单的替换。 使用Flash最明显的缺点是并非所有客户端都安装了Flash,而且某些客户端,如iPhone/iPad,不支持Flash。

AJAX Long-Polling技术 —— 用AJAX的long-polling来模拟WebSocket在业界已经有一段时间了。它是一个可行的技术,但它不能优化发送的信息。也就是说,它是一个解决方案,但不是最佳的技术方案。

由于目前的IE等浏览器不支持WebSocket,要提供WebSocket的事件处理、返回传输、在服务器端使用一个统一的API,那么该怎么办呢?幸运的是,Guillermo Rauch创建了一个Socket.IO技术。

三、带Socket.IO的WebSocket

Socket.IO是Guillermo Rauch创建的WebSocket API,Guillermo Rauch是LearnBoost公司的首席技术官以及LearnBoost实验室的首席科学家。Socket.IO使用检测功能来判断是否建立WebSocket连接,或者是AJAX long-polling连接,或Flash等。可快速创建实时的应用程序。Socket.IO还提供了一个NodeJS API,它看起来非常像客户端API。
建立客户端Socket.IO

Socket.IO可以从GitHub下载,可以把socket.io.js文件包含到页面中:

  1. <script src="http://cdn.socket.io/stable/socket.io.js"></script>
  2. [/code

  3. 此时,Socket.IO在此页面上是有效的,是时候创建Socket了:

  4. [code]
  5. // 创建Socket.IO实例,建立连接
  6. var socket= new io.Socket('localhost',{
  7.   port: 8080
  8. });
  9. socket.connect();

  10. // 添加一个连接监听器
  11. socket.on('connect',function() {
  12.   console.log('Client has connected to the server!');
  13. });

  14. // 添加一个连接监听器
  15. socket.on('message',function(data) {
  16.   console.log('Received a message from the server!',data);
  17. });

  18. // 添加一个关闭连接的监听器
  19. socket.on('disconnect',function() {
  20.   console.log('The client has disconnected!');
  21. });

  22. // 通过Socket发送一条消息到服务器
  23. function sendMessageToServer(message) {
  24.   socket.send(message);
  25. }
复制代码


Socket.IO简化了WebSocket API,统一了返回运输的API。传输包括:
WebSocket
Flash Socket
AJAX long-polling
AJAX multipart streaming
IFrame
JSONP polling

你还可以设置任意的Socket.IO构造器的第二个选项,选项包括:

port - 待连接的端口
transports - 一个数组,包含不同的传输类型
transportOptions - 传输的参数使用的对象,带附加属性

Socket.IO还提供了由本地WebSocket API提供的普通连接、断开连接、消息事件。Socket还提供了封装每个事件类型的方法。

四、NodeJS和Socket.IO联合开发

Socket.IO提供的服务器端解决方案,允许统一的客户端和服务器端的API。使用Node,你可以创建一个典型的HTTP服务器,然后把服务器的实例传递到Socket.IO。从这里,你创建连接、断开连接、建立消息监听器,跟在客户端一样。

一个简单的服务器端脚本看起来如下:

  1. // 需要HTTP 模块来启动服务器和Socket.IO
  2. var http= require('http'), io= require('socket.io');

  3. // 在8080端口启动服务器
  4. var server= http.createServer(function(req, res){
  5.   // 发送HTML的headers和message
  6.   res.writeHead(200,{ 'Content-Type': 'text/html' });
  7.   res.end('<h1>Hello Socket Lover!</h1>');
  8. });
  9. server.listen(8080);

  10. // 创建一个Socket.IO实例,把它传递给服务器
  11. var socket= io.listen(server);

  12. // 添加一个连接监听器
  13. socket.on('connection', function(client){

  14.   // 成功!现在开始监听接收到的消息
  15.   client.on('message',function(event){
  16.     console.log('Received message from client!',event);
  17.   });
  18.   client.on('disconnect',function(){
  19.     clearInterval(interval);
  20.     console.log('Server has disconnected');
  21.   });
  22. });
复制代码


你可以运行服务器部分,假定已安装了NodeJS,从命令行执行:
  1. node socket-server.js
复制代码


现在客户端和服务器都能来回推送消息了!在NodeJS脚本内,可以使用简单的JavaScript创建一个定期消息发送器:

  1. // 创建一个定期(每5秒)发送消息到客户端的发送器
  2. var interval= setInterval(function() {
  3.   client.send('This is a message from the server! ' + new Date().getTime());
  4. },5000);
复制代码


服务器端将会每5秒推送消息到客户端!

五、dojox.Socket和Socket.IO

Persevere的创建者Kris Zyp创建了dojox.Socket。dojox.Socket以Dojo库一致的方式封装了WebSocket API,用于在客户端不支持WebSocket时,使用long-polling替代。

下面是怎样在客户端使用dojox.Socket和在服务器端使用Socket.IO的例子:

  1. var args, ws= typeof WebSocket!= 'undefined';
  2. var socket= dojox.socket(args= {
  3.   url: ws? '/socket.io/websocket' : '/socket.io/xhr-polling',
  4.   headers:{
  5.     'Content-Type':'application/x-www-urlencoded'
  6.   },
  7.   transport: function(args, message){
  8.     args.content = message; // use URL-encoding to send the message instead of a raw body
  9.     dojo.xhrPost(args);
  10.   };
  11. });
  12. var sessionId;
  13. socket.on('message', function(){
  14.   if (!sessionId){
  15.     sessionId= message;
  16.     args.url += '/' + sessionId;
  17.   }else if(message.substr(0, 3) == '~h~'){
  18.    // a heartbeat
  19.   }
  20. });
复制代码


dojox.socket.Reconnect还创建了在套接字失去连接时自动重连。期待包含dojox.Socket的Dojo 1.6版本早日发布。

六、实际应用和WebSocket资源

有很多WebSocke的实际应用。WebSocket对于大多数客户机-服务器的异步通信是理想的,在浏览器内聊天是最突出的应用。WebSocket由于其高效率,被大多数公司所使用。

WebSocket资源
Socket.IO站点:http://socket.io/
WebSocket的Wikipedia:http://en.wikipedia.org/wiki/WebSockets
WebSockets.org站点:http://www.websockets.org/
Dojo WebSocket站点:http://www.sitepen.com/blog/2010/10/31/dojo-websocket/

[ 本帖最后由 chszs 于 2010-12-1 11:29 编辑 ]
梦想,是坚信自己的信念!是强烈的需求,能激发自己所有的潜能!

版主

磨刀

精华贴数
14
专家积分
1268
技术积分
119157
社区积分
4648
注册时间
2005-3-31
认证徽章
论坛徽章:
221
马上加薪
日期:2014-02-19 11:55:14马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14马上有车
日期:2014-02-18 16:41:112014年新春福章
日期:2014-02-18 16:41:11版主9段
日期:2012-11-25 02:21:03ITPUB年度最佳版主
日期:2014-02-19 10:05:27现任管理团队成员
日期:2011-05-07 01:45:08ITPUB元老
日期:2008-04-05 18:20:27itpub13周年纪念徽章
日期:2014-10-08 15:20:46
发表于 2010-12-1 23:25:09 |显示全部楼层
好文。

使用道具 举报

精华贴数
0
专家积分
1
技术积分
54
社区积分
2
注册时间
2010-10-9
论坛徽章:
1
开发板块每日发贴之星
日期:2010-12-04 01:01:01
发表于 2010-12-3 10:42:34 |显示全部楼层

使用道具 举报

版主

闭关修炼

精华贴数
5
专家积分
349
技术积分
111431
社区积分
39552
注册时间
2005-6-10
论坛徽章:
112
马上加薪
日期:2014-11-22 01:34:24阿斯顿马丁
日期:2013-12-25 19:34:59保时捷
日期:2013-12-16 16:50:55阿斯顿马丁
日期:2013-11-27 09:48:40路虎
日期:2013-11-20 16:51:17法拉利
日期:2013-11-16 13:14:53三菱
日期:2013-11-15 10:04:36法拉利
日期:2013-11-08 14:03:09奥迪
日期:2013-11-03 11:06:39雪佛兰
日期:2013-09-12 13:15:18兰博基尼
日期:2013-08-31 10:33:16法拉利
日期:2013-08-24 10:54:25
发表于 2010-12-5 23:48:22 |显示全部楼层
牛的
====================
ITPUB附件下载器 免输验证码
====================

使用道具 举报


您需要登录后才可以回帖 登录 | 注册

TOP技术积分榜 社区积分榜 徽章 电子杂志 团队 统计 邮箱 虎吧 老博客 知识索引树 读书频道 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档 | IT博客
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛 | IXPUB | SAP ERP系统
CopyRight 1999-2011 itpub.net All Right Reserved. 北京皓辰网域网络信息技术有限公司版权所有 联系我们 网站律师 隐私政策 知识产权声明
京ICP证:060528号 北京市公安局海淀分局网监中心备案编号:1101082001 广播电视节目制作经营许可证:编号(京)字第1149号
  
回顶部