认识HTML5的WebSocket-阿里云开发者社区

开发者社区> 吞吞吐吐的> 正文

认识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。下面的代码片段是打开一个连接,为连接创建事件监听器,断开连接,消息时间,发送消息返回到服务器,关闭连接。

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); 

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

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

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

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

  // 关闭Socket.... 
  //socket.close() 
};


让我们来看看上面的初始化片段。参数为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文件包含到页面中:

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

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

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

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

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

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

// 通过Socket发送一条消息到服务器
function sendMessageToServer(message) { 
  socket.send(message); 
}


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。从这里,你创建连接、断开连接、建立消息监听器,跟在客户端一样。

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

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

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

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

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

  // 成功!现在开始监听接收到的消息
  client.on('message',function(event){ 
    console.log('Received message from client!',event); 
  }); 
  client.on('disconnect',function(){ 
    clearInterval(interval); 
    console.log('Server has disconnected'); 
  }); 
});


你可以运行服务器部分,假定已安装了NodeJS,从命令行执行:

node socket-server.js


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

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


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

五、dojox.Socket和Socket.IO

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

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

var args, ws= typeof WebSocket!= 'undefined'; 
var socket= dojox.socket(args= { 
  url: ws? '/socket.io/websocket' : '/socket.io/xhr-polling', 
  headers:{ 
    'Content-Type':'application/x-www-urlencoded' 
  }, 
  transport: function(args, message){ 
    args.content = message; // use URL-encoding to send the message instead of a raw body 
    dojo.xhrPost(args); 
  }; 
}); 
var sessionId; 
socket.on('message', function(){ 
  if (!sessionId){ 
    sessionId= message; 
    args.url += '/' + sessionId; 
  }else if(message.substr(0, 3) == '~h~'){ 
   // a heartbeat 
  } 
});


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/

分类: Html5

本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/5859031.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python的开发环境
Python的开发环境 在 Python 开发环境中我们能看到很多工具,如 pip 、conda 、poetry 、 virtualenv 、 venv 、 pyenv 等等。他们是什么,都有什么作用,该怎么选择,如何构建一个开发环境,在这篇文章我会尽力全面的阐明,既然全面那么很多细节就无法照顾,感兴趣可以在参考资料中进一步了解。本文将人群分为两类,一类是持保持最新策略的人,希望个人 PC 里所有软件工具都保持最新,想体验最新特性,最新优化等;另一类是持保持稳定策略的人,比如部署在生产环境,不会经常变更版本,防止出现未知依赖问题等。对于这两类人群提供不同的建议。
10 0
ASP.NET Core : 三. 项目结构(上)
ASP.NET Core : 三. 项目结构(上)
3 0
ASP.NET Core : 一. 概述
ASP.NET Core : 一. 概述
6 0
未来会怎样构建 Web 应用程序?
  在未来,我们会怎样构建 Web 应用程序呢?如果行业正常发展下去的话,那么今天我们认为很难、做起来很有价值的事情在明天都会变得很轻松普遍。我想我们会发现很多新的抽象,让Google Docs写起来也能像今天的普通 Web 应用一样简单。   这就引出来一个问题——这些抽象会是什么样子?我们今天能发现它们吗?想要找出答案,一种方法是审视我们在构建 Web 应用程序时必须经历的所有问题,然后看看我们能做些什么。   亲爱的读者,这篇文章就是我对上述方法的一次实践尝试。我们会走过一段旅程,看看今天我们是如何构建 Web 应用程序的:我们将回顾行业面临的各种问题,评估Firebase、Supa
3 0
用 Golang 快速实现 Paxos 分布式共识算法
  前文《理解 Paxos》只包含伪代码,帮助了理解但又不够爽,既然现在都讲究 Talk is cheap. Show me the code.这次就把文章中的伪代码用 Go 语言实现出来,希望能帮助各位朋友更直观的感受 Paxos 论文中的细节。   但我们需要对算法做一些简化,有多简单呢?我们不持久化存储任何变量,并且用 chan直接代替 RPC 调用。
6 0
程序员为什么使用Kotlin?
  如今,在软件开发领域,除了现在比较热门的人工智能技术和大数据技术之外,移动开发依然是受到大家关注的领域分支,而移动开发中非常重要的一门技术就是Android开发。Java作为Android开发的官方标准语言,其语法的设计思想还停留在纯命令式语言时代,在函数式语言的大背景下,Java显得有点落伍。虽然随着Java 8和Java 9版本的发布,Java也在向函数式语言靠近,但是Java 8和Java 9的市场份额并不高,很多项目还停留在Java 6的时代。特别是对于Android开发者来说,想体验函数式编程的优势似乎太过遥远。所以,使用Kotlin成为一个不错的选择。
4 0
PHP 没你想的那么差
  PHP现在名声很糟糕,因为它曾经是“可怕”的。本文试着回答一些常见的关于 PHP 的断言,目的是向非技术人员解释,PHP 并不像许多人所说的那么糟糕。   不再是了。过去,许多开发者被书本教授非常糟糕的实践,因此 PHP 代码的质量非常差。PHP 曾经还允许你做一些非常奇怪的事情,使得它非常容易构建,但维护起来却是一场噩梦。   这些不再是常见的问题。随着高质量学习材料的引入,这些材料易学且易获取,一名新的开发人员可以以正确的方式学习 PHP。这样就可以避免初级开发者因为不知道构建事物的正确方法而编写一些维护起来非常痛苦的代码。   随着框架的引入,导致许多糟糕体验的大部分通用代码现
6 0
ASP.NET Core : 三. 项目结构(下)
ASP.NET Core : 三. 项目结构(下)
4 0
ToB从业者“辩”生态开放:真开放才能带来真生态
  随着国内人口红利优势逐渐褪去,To B 市场的万亿空间优势显露,作为仍有机会的蓝海生意,企业服务市场吸引了大厂以及 To B 从业者的目光。由于单个企业不可能满足企业客户的所有需求,因此,把其他优秀企业当伙伴,发挥各自优势分工协作,合力创造更强大的产品和服务,共同打造“To B 开放生态”尤为重要。   近几年,To B 成为互联网下半场的风口,开放生态也成为热议话题,虽然业内一直提倡开放,近年来开放的程度也有所提升,但其深度和广度远远不够,平台和伙伴之间的合作模式也尚未成熟,如何开放、开放能带来哪些价值又会有什么风险,对于很多从业者来说还不明晰。   近期,InfoQ 联合钉钉聚焦“
4 0
从 React 的视角谈谈 Rust 和 GTK
  最近我尝试了多种框架,想要制作出既易用又容易安装的应用程序,但是都以失败告终;最后我决定转向 Rust 和 GTK,开始拥抱原生软件开发。   虽说以前我也短暂尝试过 GTK,但它对我来说还是很陌生的。在此之前,我在用户界面上的大部分经验都来自于 React 应用程序的构建。从 React 到 GTK 的过渡带来了一些挑战,其中多数是小部件原理上的差异造成的。用 Rust 写 GTK 是尤其困难的事情,因为 Rust 强制执行一些额外的规则来防止内存管理错误,并避免在线程上下文中执行不安全的操作。
5 0
4852
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载