• 售前

  • 售后

热门帖子
入门百科

带你熟悉HTML5中的WebSocket

[复制链接]
消敢市音 显示全部楼层 发表于 2021-10-26 12:58:37 |阅读模式 打印 上一主题 下一主题
认识 HTML5 的 WebSocket
在 HTML5 规范中,我最喜好的Web技能就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技能,以更换我们已往几年一直在用的Ajax技能。这个新的API提供了一个方法,从客户端利用简朴的语法有用地推动消息到服务器。让我们看一看 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。下面的代码片段是打开一个毗连,为毗连创建事件监听器,断开毗连,消息时间,发送消息返回到服务器,关闭毗连。

复制代码代码如下:
// 创建一个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>

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

复制代码代码如下:
// 创建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由于其高服从,被大多数公司所利用。
HTML5 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/

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作