蓝狮注册开户html5的重要应用WebSocket

什么是html5的webSocket运用？html5的websocket是一种服务器异步通信的方法 ，可以为网站服务器异步通信提供技术支持，websocket类似于网页中的ajax但是又有所不同 ，在涉及到网页通讯的时候websocket发挥着巨大的作用。下面P2H.cn带大家了解一下什么是html5的websocket运用，然后教大家创建一个基于websocket的hellow world程序。

认识HTML5的WebSocket

在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/

P2H.cn教你创建html5 websocket第一个运用hellow world

一直在关注HTML5，之前在几个生产项目中使用过CSS3，但JavaScript这块却一直没有尝试过。前几天突然想做点东西，于是决定挑选一 直期望很高的WebSocket来作为作为入门。但一顿Google后却发现少有文章适合初学者入门，要么只介绍原理，要么只介绍客户端实现没有服务器 端，又或者太接近规范太过深奥，遂决定自己写一篇，一方面巩固下知识，另一方面也方便后来人。

话不多说，就从Helloworld开始吧。

方案

要实现一个WebSocket有很多方案，客户端方面可以用原生的WebSocket对象，也可以使用类似Socket.IO、jQuery Websocket Plugin这样的封装API，服务器端则可以使用Jetty（Java）、Netty（Java）、mod_pywebsocket（Python&Apache）、nodejs（JavaScript）等

这里我挑选了客户端Socket.IO+服务器端Socket.IO-node，这样做一方面客户端和服务器端都使用JavaScript，避免有 些童鞋因为不了解Java、Python等其他语言而导致学习成本增加，另一方面两端框架均使用Socket.IO也可以避免客户端和服务器端学习两套不 同框架而导致的学习成本

前提条件

* Linux系统一个（或Mac、Solaris、Cgwin、MingW），用于安装nodejs
* 支持HTML5浏览器一个（非IE及其内核浏览器均可，建议Chrome）

安装WebSocket服务器

1. 安装nodejs

node.js是近年来较为流行的服务器端JavaScript框架，基于V8引擎开发，本人曾在早期做过其中文文档项目 https://github.com/fallenlord/node_doc_zh_CN
访问nodejs主页下载最新版本的nodejs，我用的是0.4.3（安装过程以Linux为例，其他平台可以访问https://github.com/joyent/node/wiki/Installation查看安装方法）。然后解压到本地

$ tar xfz node-v0.4.3.tar.gz
$ cd node-v0.4.3
$ ./configure –prefix /home/guolin/tools/node-v0.4.3
$ make
$ make install

如果安装过程出现问题，请确认本地安装有Python 2.4或更高版本，以及libssl-dev包

2. 安装nodejs管理工具NPM

NPM是个nodejs插件管理工具，执行下面的语句就能安装NPM

$ curl http://npmjs.org/install.sh | sh

3. 安装Socket.IO的nodejs插件

Socket.IO是个JavaScript框架，包括服务器端和客户端，使用统一的API封装了各种实时连接（如WebSocket、Flash Socket、AJAX长轮询等），使得后端的连接可以对开发人员透明。安装只需要执行下面的命令即可：

$ npm install socket.io

开始编码

服务器端代码

在服务器上任意目录编辑文件server.js：

JavaScript Code复制内容到剪贴板

  1. var http = require(“http”),
  2.     io = require(“socket.io”);
  4. // Create HTTP server
  5. var server = http.createServer(function(request, response) {
  6.     response.writeHead({ “Content-Type”: “text/html” });
  7.     response.end(“HTML5 WebSocket Demo”);
  8. });
  9. server.listen(8000, “localhost”);
  11. // Wrap HTTP server by socket.io
  12. var socket = io.listen(server);
  13. socket.on(“connection”, function(client) {
  14.     console.log(“connected”);
  16.     client.on(“message”, function(data) {
  17.         client.send(“Hello ” + data);
  18.     });
  20.     client.on(“disconnect”, function() {
  21.         console.log(“disconnected”);
  22.     });
  23. });

然后执行：

/home/guolin/tools/node-v0.4.3/bin/node server.js

可以看见服务器开始运行，此时访问 http://localhost:8000 如果看见HTML5 WebSocket Demo字样表示服务器启动成功
注意高亮部分，访问地址必须完全匹配高亮处写入的地址，例如，如果高亮处写的是localhost，且服务器IP地址为192.168.1.2，那么访问localhost将会成功，但访问192.168.1.2将会失败

客户端代码

在客户端编辑client.html文件：

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <script type=”text/javascript” charset=”utf-8″ src=”http://localhost:8000/socket.io/socket.io.js”></script>
  5.         <script type=”text/javascript” charset=”utf-8″>
  6.             var socket = new io.Socket(“localhost”, { port: 8000 });
  7.             socket.connect();
  8.             socket.on(“connect”, function(){
  9.                 console.log(“connected”);
  10.             });
  11.             socket.on(“message”, function(data){
  12.                 console.log(“received message: ” + data);
  13.                 document.getElementById(“message”).innerHTML = data;
  14.             });
  15.             socket.on(“disconnect”, function(){
  16.                 console.log(“disconnected”);
  17.             })
  19.             function send() {
  20.                 var name = document.querySelector(“input[namename=name]”).value;
  21.                 console.log(“send message: ” + name);
  22.                 socket.send(name);
  23.             }
  24.         </script>
  25.     </head>
  26.     <body>
  27.         <label for=”name”>What’s your name:</label>
  28.         <input type=”text” id=”name” name=”name” />
  29.         <button onclick=”send()”>Send</button>
  30.         <div id=”message” style=”color: red”></div>
  31.     </body>
  32. </html>

完成后直接用浏览器访问此文件（可以从文件系统访问，不要尝试访问 http://localhost:8000/client.html，那总是会显示HTML5 WebSocket Demo字样，蓝狮注册开户因为nodejs自带的HTTP服务器默认不会读取本地文件）

输入你的名字如guolin，点击Send，服务器端将返回Hello guolin并显示在页面上

整个过程可以通过打开浏览器Console以及观察服务器Console了解到交互过程。同时对于Chrome来说，可以从开发人员工具中的 Network栏中清楚的看到WebSocket与服务器端通信过程（如向ws:/协议发送GET请求，并得到一个101 WebSocket Protocol Handshake的响应等）

后记

到此为止一个简单的WebSocket的应用就搭建完成了，基于这个例子可以很快扩展出一个简易聊天室甚至更为强大的交互应用。

www.qietu6.com

Related Posts

0 Comments
Leave a Reply