好程序员带你认识HTML5中的WebSocket。在HTML5规范中，我最喜欢的网络技术是正在迅速流行的WebSocketAPI。WebSocket为我们过去几年一直使用的Ajax技术提供了一个受欢迎的替代方案。这个新的API提供了一种使用简单语法有效地将消息从客户端推送到服务器的方法。让我们看一下HTML5的WebSocketAPI：它可以在客户端、服务器端使用。还有一个优秀的第三方API，叫做Socket.IO。 1。HTML5中的WebSocketAPI是什么？ WebSocketAPI是下一代客户端-服务器异步通信方式。通信取代单一的TCP套接字，使用ws或wss协议，可用于任意客户端和服务器程序。WebSocket目前由W3C标准化。WebSocket已经被Firefox4、Chrome4、Opera10.70、Safari5等浏览器支持。 WebSocketAPI的厉害之处在于服务端和客户端可以在给定的时间内随时向对方推送信息范围。WebSocket不局限于Ajax（或XHR）通信，因为Ajax技术需要客户端发起请求，WebSocket服务器和客户端可以相互推送信息；XHR受域限制，而WebSocket允许跨域通信。 Ajax技术的巧妙之处在于，它不是为以某种方式使用而设计的。WebSocket是为指定的目标创建的，用于双向推送消息。 其次，WebSocketAPI在HTML5中的使用 只关注客户端API，因为每种服务端语言都有自己的API。下面的代码片段打开一个连接，为连接创建事件侦听器，断开连接，消息时间，将消息发送回服务器，然后关闭连接。代码如下： //创建一个Socket实例 varsocket=newWebSocket('ws://localhost:8080'); //打开Socket socket。onopen=function(event){ //发送初始化消息 socket.send('我是客户端，我在听！'); //监听消息 socket.onmessage=function(event){ console.log('客户端收到一个message',event); };?? //监听Socket关闭 socket.onclose=function(event){ console.log('客户端通知socket已关闭',event); }; //关闭Socket。参数为URL，ws表示WebSocket协议。onopen、onclose和onmessage方法将事件连接到Socket实例。每个方法都提供一个事件来指示Socket的状态。 onmessage事件提供了一个data属性，可以包含消息的Body部分。消息的Body部分必须是字符串，可以序列化/反序列化传递更多的数据。 WebSocket的语法非常简单，使用WebSockets非常简单……除非客户端不支持WebSocket。InternetExplorer当前不支持WebSocket通信。如果您的客户端不支持WebSocket通信，这里有一些后备解决方案供您使用： Flash技术-Flash可以提供一个简单的替代品。使用Flash最明显的缺点是并非所有客户端都安装了Flash，并且某些客户端（例如iPhone/iPad）不支持Flash。 AJAX长轮询技术——利用AJAX的长轮询模拟WebSocket在业界已经有一段时间了。这是一种可行的技术，但它并没有优化发送的信息。也就是说，它是一种解决方案，但不是最好的技术方案。 因为目前IE等浏览器都不支持WebSocket，那么在服务端提供WebSocket事件处理，返回传输，使用统一的API，我们应该怎么做呢？幸运的是，GuillermoRauch创建了一个Socket。IO技术。 3.WebSocketwithSocket.IO Socket.IO是由LearnBoostInc.的CTO和LearnBoostLabs的首席科学家GuillermoRauch创建的WebSocketAPI。Socket.IO通过检测功能判断是建立WebSocket连接，还是AJAX长轮询连接，还是Flash等，可以快速创建实时应用。Socket.IO还提供了一个看起来非常像客户端API的NodeJSAPI。 构建客户端Socket.IO Socket.IO可以在GitHub上下载，页面中包含socket.io.js文件即可： 代码如下： 此时,Socket.IO到此页面有效，是时候创建一个Socket了： 代码如下： //创建一个Socket.IO实例并建立连接 varsocket=newio.Socket('localhost',{ port:8080 }); socket.connect(); //添加连接监听 socket.on('connect',function(){ console.log('Clienthasconnectedtotheserver!'); }); //添加连接监听 socket.on('message',function(data){ console.log('收到服务器发来的消息！',data); }); //添加监听关闭连接 socket.on('disconnect',function(){ console.log('客户端已断开连接！'); }); //通过Socket向服务端发送消息 functionsendMessageToServer(message){ socket.send(message); } Socket.IO简化了WebSocketAPI并统一了返回传输的API。传输包括： WebSocket FlashSocket AJAXlong-polling AJAXmultipartstreaming IFrame JSONPpolling 也可以设置Socket.IO构造函数的任意第二个选项，选项包括： port-连接到 transports-一个包含不同传输类型的数组 transportOptions-用于传输参数的对象，具有附加属性 Socket.IO还提供常见的连接、断开连接、消息事件。Socket还提供了封装每个事件类型的方法。 4.NodeJS和Socket.IO的联合开发 Socket.IO提供了一个服务器端的解决方案，允许统一的客户端和服务器端API。使用Node，您可以创建一个典型的HTTP服务器，然后将服务器实例传递给Socket.IO。从这里，您可以创建连接、断开连接和设置消息侦听器，就像您在客户端所做的那样。 一个简单的服务器端脚本如下所示： 代码如下： //需要HTTP模块来启动服务器和Socket.IO varhttp=require('http'),io=require('socket.io'); //在端口8080上启动服务器 varserver=http.createServer(function(req,res){ //发送HTML头和消息 res.writeHead(200,{'Content-Type':'text/html'}); res.end('HelloSocketLover!'); }); server.listen(8080); //创建一个Socket.IO实例并传给服务端 varsocket=io.listen(server); //添加连接监听 socket.on('connection',function(client){ //成功！现在开始监听收到的消息 client.on('message',function(event){ console.log('收到来自客户端的消息！',event); }); client.on('disconnect',function(){ clearInterval(interval); console.log('Serverhasdisconnected'); }); }); 假设已安装NodeJS，您可以从命令行运行服务器部分： nodesocket-server.js 现在客户端和服务端可以来回推送消息了！在NodeJS脚本中，可以使用简单的JavaScript创建一个周期性的消息发送器： 代码如下： //创建一个周期性的消息（每5秒一次）发送消息给客户端的发送器 varinterval=setInterval(function(){ client.send('这是服务端的消息！'+newDate().getTime()); },5000); 服务器每5秒向客户端推送一次消息 5.KrisZyp，dojox.Socket和Socket.IO Persevere的创建者，创建了dojox.Socket。dojox.Socket以与Dojo库一致的方式封装了WebSocketAPI，用于在客户端不支持WebSocket时使用长轮询代替。这里举例说明如何在客户端使用dojox.Socket，在服务端使用Socket.IO： 代码如下： varargs,ws=typeofWebSocket!='undefined'; varsocket=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;//使用URL编码发送消息而不是原始消息体 dojo.xhrPost(args); };?? }); varsessionId; socket.on('message',function(){ if(!sessionId){ sessionId=message; args.url+='/'+sessionId; }elseif(message.substr(0,3)=='~h~'){ //心跳 } }); dojox.socket.Reconnect还创建了一个套接字丢失连接时自动重新连接。期待早日发布包含dojox.Socket的Dojo1.6版本。 6.实际应用和WebSocket资源 WebSocket的实际应用有很多。WebSocket是大多数异步客户端-服务器通信的理想选择，浏览器内聊天是最突出的应用程序。WebSocket由于其高效性而被大多数公司使用。
