当前火起来的HTML5语言里面,很多学者们都还没有完全了解这语言的效果情况,我最喜欢的Web开发技术就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器。让我们看一看6个HTML5教程介绍里 的 WebSocket API:它可用于客户端、服务器端。而且有一个优秀的第三方API,名为Socket.IO。
一、HTML5 中的 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为指定目标创建,用于双向推送消息。
二、HTML5 中的 WebSocket API 的用法
只专注于客户端的API,因为每个服务器端语言有自己的API。下面的代码片段是打开一个连接,为连接创建事件监听器,断开连接,消息时间,发送消息返回到服务器,关闭连接。
04 |
socket.onopen = function (event){
|
06 |
socket.send( 'I am the client and I\\'m listening!' );
|
08 |
socket.onmessage = function (event){
|
09 |
console.log( 'Client received a message' ,event);
|
12 |
socket.onclose = function (event){
|
13 |
console.log( 'Client notified socket has closed' ,event);
|
让我们来看看上面HTML5教程的初始化片段。参数为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文件包含到页面中:
此时,Socket.IO在此页面上是有效的,是时候创建Socket了:
02 |
var socket= new io.Socket( 'localhost' ,{
|
07 |
socket.on( 'connect' , function (){
|
08 |
console.log( 'Client has connected to the server!' );
|
11 |
socket.on( 'message' , function (data){
|
12 |
console.log( 'Received a message from the server!' ,data);
|
15 |
socket.on( 'disconnect' , function (){
|
16 |
console.log( 'The client has disconnected!' );
|
19 |
function sendMessageToServer(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。从这里,你创建连接、断开连接、建立消息监听器,跟在客户端一样。
一个简单的服务器端脚本看起来如下:HTML5教程的NodeJS和Socket.IO联合开发>>
01 |
// 需要HTTP 模块来启动服务器和Socket.IO |
02 |
var http= require( 'http' ), io= require( 'socket.io' );
|
04 |
var server= http.createServer( function (req, res){
|
05 |
// 发送HTML的headers和message
|
06 |
res.writeHead(200,{ 'Content-Type' : 'text/html' });
|
07 |
res.end( '
Hello Socket Lover!
' );
|
10 |
// 创建一个Socket.IO实例,把它传递给服务器 |
11 |
var socket= io.listen(server);
|
13 |
socket.on( 'connection' , function (client){
|
15 |
client.on( 'message' , function (event){
|
16 |
console.log( 'Received message from client!' ,event);
|
18 |
client.on( 'disconnect' , function (){
|
19 |
clearInterval(interval);
|
20 |
console.log( 'Server has disconnected' );
|
你可以运行服务器部分,假定已安装了NodeJS,从命令行执行:
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());
|
服务器端将会每5秒推送消息到客户端
五、dojox.Socket和Socket.IO
Persevere的创建者Kris Zyp创建了dojox.Socket。dojox.Socket以Dojo库一致的方式封装了WebSocket API,用于在客户端不支持WebSocket时,使用long-polling替代。
下面是怎样在客户端使用dojox.Socket和在服务器端使用Socket.IO的例子:
01 |
var args, ws= typeof WebSocket!= 'undefined' ;
|
02 |
var socket= dojox.socket(args= {
|
03 |
url: ws? '/socket.io/websocket' : '/socket.io/xhr-polling' ,
|
05 |
'Content-Type' : 'application/x-www-urlencoded'
|
07 |
transport: function (args, message){
|
08 |
args.content = message; // use URL-encoding to send the message instead of a raw body
|
13 |
socket.on( 'message' , function (){
|
16 |
args.url += '/' + sessionId;
|
17 |
} else if (message.substr(0, 3)== '~h~' ){
|
dojox.socket.Reconnect还创建了在套接字失去连接时自动重连。期待包含dojox.Socket的Dojo 1.6版本早日发布。
六、实际应用和WebSocket资源
有很多WebSocke的实际应用。WebSocket对于大多数客户机-服务器的异步通信是理想的,在浏览器内聊天是最突出的应用。WebSocket由于其高效率,被大多数公司所使用。
以上6个html5教程里的介绍内容,大家应该有所认识了吧。
分享到:
相关推荐
资源名称:HTML5 WebSocket权威指南内容简介:《HTML5 WebSocket权威指南》是HTML5 WebSocket领域最权威的著作之一,它系统、全面地讲解了HTML5 WebSocket的各个方面,是Web开发人员和架构师学习WebSocket的最佳选择...
《HTML5 WebSocket权威指南》是HTML5 WebSocket领域最权威的著作之一,它系统、全面地讲解了HTML5 WebSocket的各个方面,是Web开发人员和架构师学习WebSocket的最佳选择。书中讨论了基于WebSocket的架构师如何减少...
在现代Web开发中,实时通信已经成为一个不可或缺的功能,特别是在构建互动性强、响应迅速的应用时。本文将深入探讨如何使用HTML5的WebSocket协议、PHP后端处理以及jQuery前端库来构建实时Web应用。WebSocket提供了一...
在如今的Web开发中,实时性变得越来越重要,因为它可以极大地提升用户体验,比如聊天应用、实时消息系统、在线游戏等。 ### HTML5 WebSocket WebSocket是HTML5的一种新协议,提供了浏览器和服务器间双向的、全双工...
综上所述,HTML5 WebSocket 不仅极大地提高了实时 Web 应用的性能和用户体验,还简化了开发过程,使其成为构建现代 Web 应用不可或缺的一部分。对于 Web 开发者而言,掌握这项技术无疑是至关重要的。
《HTML5 WebSocket权威指南》是HTML5 WebSocket领域最权威的著作之一,它系统、全面地讲解了HTML5 WebSocket的各个方面,是Web开发人员和架构师学习WebSocket的最佳选择。书中讨论了基于WebSocket的架构师如何减少...
WebSocket是HTML5的一项重要技术,它为Web应用提供了全双工、低延迟的通信机制,使得浏览器和服务器之间可以实时交换数据,非常适合构建实时交互的聊天应用。在本项目中,我们将探讨如何利用HTML5的WebSocket特性,...
Jetty HTML5 WebSocket服务器是一种基于Java的轻量级Web服务器,它支持HTML5的WebSocket协议,使得实时双向通信成为可能。WebSocket是Web应用程序中的一个关键技术,它允许客户端和服务器之间建立持久连接,从而实现...
资源名称:使用 HTML5 WebSocket 构建实时Web应用内容简介: 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例来充分展示 WebSocket 的...
WebSocket是HTML5中引入的一种全双工通信协议,它允许Web应用和服务端进行持久性的双向通信,打破了传统的HTTP请求-响应模式。WebSocket协议基于TCP,提供了低延迟、高效率的数据传输方式,尤其适用于实时交互应用,...
WebSocket是HTML5引入的一种在客户端和服务器之间建立持久性连接的协议,解决了HTTP协议的无状态、无连接、单向通信的问题。WebSocket使得双向通信成为可能,允许服务器主动向客户端发送数据,极大地优化了实时性...
WebSocket技术和PHP在现代Web开发中的应用是构建实时交互性应用的关键技术之一。WebSocket协议是HTML5标准的一部分,它提供了一种双向通信机制,允许服务器和客户端之间进行持续的、低延迟的数据交换,这对于实时...
HTML5是现代网页开发的标准,它引入了许多新特性,其中就包括WebSocket API。WebSocket API使得浏览器可以直接通过JavaScript与WebSocket服务器进行交互,创建全双工的通信通道。 首先,让我们了解一下WebSocket的...
WebSocket是一种在客户端和服务器之间建立持久连接的协议,它允许双方进行全双工通信,即数据可以在两个方向上同时传输,极大地提高了实时性。在这个"websocket demo(页面html客户端)"中,我们可以学习如何使用HTML...
HTML5的WebSocket是一种双向通信协议,它为Web应用程序提供了低延迟、全双工的通信渠道,使得客户端与服务器之间的实时交互变得更加便捷。WebSocket协议的引入是为了解决HTTP协议的不足,HTTP协议在进行频繁的请求-...
总的来说,HTML5 WebSocket是现代Web开发中不可或缺的技术,它为实时Web应用提供了强大的支持,提升了用户体验,也简化了开发者的工作。通过阅读“HTML5 WebSocket 构建实时 Web 应用.pdf”这份文档,你可以深入理解...
HTML5和WebSocket技术是现代Web开发中的重要组成部分,它们极大地提升了网页应用的实时性和互动性。HTML5作为超文本标记语言的新版本,引入了许多新特性,而WebSocket则是它的一个关键特性,用于创建持久的双向通信...