首页 > 其他分享 >认识HTML5的WebSocket

认识HTML5的WebSocket

时间:2023-04-28 11:32:06浏览次数:41  
标签:WebSocket socket 认识 API HTML5 IO Socket 客户端


在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由于其高效率,被大多数公司所使用。

 

认识HTML5的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/

 


标签:WebSocket,socket,认识,API,HTML5,IO,Socket,客户端
From: https://blog.51cto.com/u_16087105/6233676

相关文章

  • Python3+WebSockets实现WebSocket通信
    一、说明1.1背景说明前段时间同事说云平台通信使用了个websocket的东西,今天抽空来看一下具体是怎么个通信过程。从形式上看,websocket是一个应用层协议,socket是数据链路层、网络层、传输层的抽像;从应用场合上看,websocket可以使用javascript实现,而socket不能用javascript实现(真......
  • 快速认识Delphi--九五小庞
    1、什么是Delphi:Delphi不是一门编程语言,它只是一个IDE,和VS,Eclipse,VSCode,Pycharm...一样,只是一个编程工具,但他主要是针对Pascal语言编程,因此很多时候,很多人把Delphi说成是一门编程语言,他只是用于Pascal编程的一个工具2、学习Delphi:既然知道Delphi只是一个IDE,他是针对Pasca......
  • 认识中间件
    链接:https://zhuanlan.zhihu.com/p/528425657最近十年是互联网磅礴发展的十年,IT系统从单体应用逐渐向分布式架构演变,高并发、高可用、高性能、分布式等话题变得异常火热,中间件也在这一时期如雨后春笋般涌现出来,那到底什么是中间件呢?存在哪些类型的中间件呢?同一类型的中间件,我们该......
  • 认识Ajax
    一.什么是ajaxAjax即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。2005年被提出Ajax是⼀种⽤于创建快速动态⽹⻚的技术。Ajax是⼀种在⽆需重新加载整个⽹⻚的情况下,能够更新部分⽹⻚的技术。后来,AJAX这个词就成为......
  • HTML5布局练习
    传统布局 HTML5布局新布局的意义 HTML5布局练习1结构层从上至下从左至右从外至里·······补充:li不利于搜索引擎收录,尽量少用2表现层熟练运用绝对定位排序:CSScomb插件:CSS属性排序工具。快捷键:ctrl+shift+C美化:ctrl+shift+H       ......
  • 最全的WebSocket协议分析
    0实时跟服务端通信方案1轮询:客户端向服务端无限循环发送http请求,一旦服务端有最新消息,从当次http响应中带回,客户端就能收到变化2长轮回(web版微信采用此方式)客户端和服务端保持一个长连接(http),等服务端有消息返回就断开,如果没有消息,就会hold住,等待一定时间,然后再重新连接,也......
  • (一) 认识Java与Java安装
    目录Java运行机制Java编译运行Java开发细节JavaJDKJava运行机制java语言的特点:跨平台性编译后的java程序可以在不同的操作系统上运行,依靠的是不同平台的JVMJava核心机制-Java虚拟机(JVMjavavirtualmachine)JVM是一个虚拟的计算机,具有指令集并使用不同的存储区域,......
  • 轮询、长轮询和websocket
    轮询从字面意思理解,轮询是不断的询问服务器然后获取资源的一种方式,可以解决像多次TCP连接造成的服务器堵塞(但是多次发送http请求也会浪费服务器资源)。长轮询长轮询是轮询的一种变种,我理解的是轮询相当于是每隔一个时间去发送http请求询问数据,长轮询会根据情况去决定间隔的时......
  • HTML5实现文件上传下载功能实例解析
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传  可以带参数        [HttpPost("upload")]        publicJsonResultuploadProject(I......
  • 基于HTML5的移动Web应用——Bootstrap 样式案例
     需求说明使用container、row等栅格系统的知识布局网页结构使用表单元素制作登录页面使用btn-success制作“搜索”按钮,用btn-danger制作“登录”按钮运行效果新梦想技术分享参考代码<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><metaname="view......