2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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

[Copy to clipboard]  [ - ]

CODE:

// 创建一个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文件包含到页面中：

[Copy to clipboard]  [ - ]

CODE:

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

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

[Copy to clipboard]  [ - ]

CODE:

// 需要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，从命令行执行：

[Copy to clipboard]  [ - ]

CODE:

node socket-server.js

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

[Copy to clipboard]  [ - ]

CODE:

// 创建一个定期（每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的例子：

[Copy to clipboard]  [ - ]

CODE:

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/

转载于:https://my.oschina.net/yearnfar/blog/42041

认识HTML5的WebSocket 认识HTML5的WebSocket相关推荐

  1. 第二期分享 | WebSocket+MSE——HTML5直播技术解析

    分享 | 刘博(又拍云多媒体开发工程师) 又小拍: 如何实现HTML5直播技术是直播创业团队一直想要攻克的难题.12月1日20:00,深度参与"又拍直播云"开发的工程师刘博就如何利 ...

  2. html5在线客服源码 websocket c#实现， im 即时通讯 完整的源代码，在线聊天

    html5在线客服源码 websocket c#实现,可扩展 im 即时通讯 在线客服系统源代码,客户端使用 websocket实现,服务器端使用C#实现,完整的源代码.可扩展性强根据自己的需求灵活扩 ...

  3. html5 websocket php,HTML5 WebSocket技术使用详解

    WebSocket WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术. 现很多网站为了实现即时通讯,所用的技术都是轮询(polling).轮询是在特定的的时间间隔( ...

  4. HTTP/2和WebSocket及HTML5资料整理--HTTP2篇

    发现HTTP/2.WebSocket.HTML5这些东西很多人都听过,但具体到各有哪些特点?有什么区别? 各自要解决什么问题? 其实很多人并不是那么清楚的.所以我之前在公司内部做了个这方面的分享. 当 ...

  5. websocket之二：WebSocket编程入门

    一.WebSocket客户端 websocket允许通过JavaScript建立与远程服务器的连接,从而实现客户端与服务器间双向的通信.在websocket中有两个方法: 1.send() 向远程服务 ...

  6. websocket 代理tcp_netty实现websocket请求实战

    描述 WebSocket是html5开始浏览器和服务端进行全双工通信的网络技术.在该协议下,与服务端只需要一次握手,之后建立一条快速通道,开始互相传输数据,实际是基于TCP双向全双工,比http半双工 ...

  7. WebSocket协议入门：WebSocket API

    HTML5连接性领域包括WebSocket.服务器发送事件和跨文档消息传递(Cross-Document Messaging)等技术.在HTML5之前,浏览器窗口和框架之间的通信由于安全的原因而受到限 ...

  8. html5代码转换为视频,HTML5中的视频代码详解

    摘要 腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...

  9. html5 本地批量存储,HTML5本地存储

    什么是HTML5存储? 简单地说,它是一种让web页面在浏览器端本地化存储键值对的方式.跟cookies一样,即使你从网站导航到别的网站,关掉了浏览器的tab页,退出了浏览器,数据依然存在:与cook ...

最新文章

  1. UITextField的详细使用
  2. JDBC--Statement,PreparedStatement,CallableStatement的区别
  3. 030_vue命名路由
  4. 网页全文搜索字符和全局搜索文件名【Edge和谷歌浏览器均适用】
  5. css html 方格,使用CSS创建方格背景
  6. 【数据库】关系数据库理论学习
  7. Kubernetes插件部署
  8. 浅入浅出 Android 安全 翻译完成！
  9. Javascript根据属性从对象数据中删除元素
  10. Lightroom Classic 教程，如何在 Lightroom 中裁剪并修齐照片？
  11. 2022年，想自学java有没有一个详细的框架？
  12. 英语单词拼写游戏开发纪录
  13. android设备当广告屏使用方法,Android手机与电视无线HDMI同屏器使用教程
  14. EJB是什么，以及weblogic和tomcat的区别
  15. c++求余弦的泰勒展开式
  16. php计算周长,PHP实现的简单三角形、矩形周长面积计算器分享
  17. jquery判断select的选中 selected
  18. php实现积分加头像排行榜,PHPCMS首页GET调用标签会员积分与头像前十名
  19. uniapp app安卓系统真机调试
  20. 新的任务发布平台源码

热门文章

  1. 【笔记】PIL 中的 Image 模块
  2. 钉钉大数据：贵州政府效率意识全国领先
  3. 201521123016《Java程序设计》第12周学习总结
  4. java连接mysql数据库（jsp显示和控制台显示）
  5. iOS 10 个实用小技巧（总有你不知道的和你会用到的）
  6. IIS 配置Http重定向到Https
  7. 关于最大子段和线性算法的证明
  8. EOS智能合约：system系统合约源码分析
  9. win8计算机管理没有用户组,Win8右键计算机管理提示“该文件没有与之关联的程序”怎么办？...
  10. java中判断两个字符（或者字符串相等）