认识HTML5的WebSocket
在HTML5規(guī)范中，我最喜歡的Web技術(shù)就是正迅速變得流行的WebSocket API。WebSocket提供了一個受歡迎的技術(shù)，以替代我們過去幾年一直在用的Ajax技術(shù)。這個新的API提供了一個方法，從客戶端使用簡單的語法有效地推動消息到服務(wù)器。讓我們看一看HTML5的WebSocket API：它可用于客戶端、服務(wù)器端。而且有一個優(yōu)秀的第三方API，名為Socket.IO。
一、什么是WebSocket API?
WebSocket API是下一代客戶端-服務(wù)器的異步通信方法。該通信取代了單個的TCP套接字，使用ws或wss協(xié)議，可用于任意的客戶端和服務(wù)器程序。WebSocket目前由W3C進行標準化。WebSocket已經(jīng)受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支持。
WebSocket API最偉大之處在于服務(wù)器和客戶端可以在給定的時間范圍內(nèi)的任意時刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因為Ajax技術(shù)需要客戶端發(fā)起請求，而WebSocket服務(wù)器和客戶端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允許跨域通信。
Ajax技術(shù)很聰明的一點是沒有設(shè)計要使用的方式。WebSocket為指定目標創(chuàng)建，用于雙向推送消息。
二、WebSocket API的用法
只專注于客戶端的API，因為每個服務(wù)器端語言有自己的API。下面的代碼片段是打開一個連接，為連接創(chuàng)建事件監(jiān)聽器，斷開連接，消息時間，發(fā)送消息返回到服務(wù)器，關(guān)閉連接。
var socket = new WebSocket('ws://localhost:8080');?
// 打開Socket?
socket.onopen = function(event) {?
??// 發(fā)送一個初始化消息
??socket.send('I am the client and I\'m listening!');?
??// 監(jiān)聽消息
??socket.onmessage = function(event) {?
? ? console.log('Client received a message',event);?
??};?
??// 監(jiān)聽Socket的關(guān)閉
??socket.onclose = function(event) {?
? ? console.log('Client notified socket has closed',event);?
??};?
??// 關(guān)閉Socket....?
??//socket.close()?
};
讓我們來看看上面的初始化片段。參數(shù)為URL，ws表示W(wǎng)ebSocket協(xié)議。onopen、onclose和onmessage方法把事件連接到Socket實例上。每個方法都提供了一個事件，以表示Socket的狀態(tài)。
onmessage事件提供了一個data屬性，它可以包含消息的Body部分。消息的Body部分必須是一個字符串，可以進行序列化/反序列化操作，以便傳遞更多的數(shù)據(jù)。
WebSocket的語法非常簡單，使用WebSockets是難以置信的容易……除非客戶端不支持WebSocket。IE瀏覽器目前不支持WebSocket通信。如果你的客戶端不支持WebSocket通信，下面有幾個后備方案供你使用：
Flash技術(shù)?—— Flash可以提供一個簡單的替換。 使用Flash最明顯的缺點是并非所有客戶端都安裝了Flash，而且某些客戶端，如iPhone/iPad，不支持Flash。
AJAX Long-Polling技術(shù)?—— 用AJAX的long-polling來模擬WebSocket在業(yè)界已經(jīng)有一段時間了。它是一個可行的技術(shù)，但它不能優(yōu)化發(fā)送的信息。也就是說，它是一個解決方案，但不是最佳的技術(shù)方案。
由于目前的IE等瀏覽器不支持WebSocket，要提供WebSocket的事件處理、返回傳輸、在服務(wù)器端使用一個統(tǒng)一的API，那么該怎么辦呢？幸運的是，Guillermo Rauch創(chuàng)建了一個Socket.IO技術(shù)。
三、帶Socket.IO的WebSocket
Socket.IO是Guillermo Rauch創(chuàng)建的WebSocket API，Guillermo Rauch是LearnBoost公司的首席技術(shù)官以及LearnBoost實驗室的首席科學(xué)家。Socket.IO使用檢測功能來判斷是否建立WebSocket連接，或者是AJAX long-polling連接，或Flash等。可快速創(chuàng)建實時的應(yīng)用程序。Socket.IO還提供了一個NodeJS API，它看起來非常像客戶端API。
建立客戶端Socket.IO
Socket.IO可以從GitHub下載，可以把socket.io.js文件包含到頁面中：
[/code
此時，Socket.IO在此頁面上是有效的，是時候創(chuàng)建Socket了：
[code]
// 創(chuàng)建Socket.IO實例，建立連接
var socket= new io.Socket('localhost',{?
??port: 8080?
});?
socket.connect();?
// 添加一個連接監(jiān)聽器
socket.on('connect',function() {?
??console.log('Client has connected to the server!');?
});
// 添加一個連接監(jiān)聽器
socket.on('message',function(data) {?
??console.log('Received a message from the server!',data);?
});
// 添加一個關(guān)閉連接的監(jiān)聽器
socket.on('disconnect',function() {?
??console.log('The client has disconnected!');?
});?
// 通過Socket發(fā)送一條消息到服務(wù)器
function sendMessageToServer(message) {?
??socket.send(message);?
}
Socket.IO簡化了WebSocket API，統(tǒng)一了返回運輸?shù)腁PI。傳輸包括：
WebSocket
Flash Socket
AJAX long-polling
AJAX multipart streaming
IFrame
JSONP polling
你還可以設(shè)置任意的Socket.IO構(gòu)造器的第二個選項，選項包括：
port - 待連接的端口
transports - 一個數(shù)組，包含不同的傳輸類型
transportOptions - 傳輸?shù)膮?shù)使用的對象，帶附加屬性
Socket.IO還提供了由本地WebSocket API提供的普通連接、斷開連接、消息事件。Socket還提供了封裝每個事件類型的方法。
四、NodeJS和Socket.IO聯(lián)合開發(fā)
Socket.IO提供的服務(wù)器端解決方案，允許統(tǒng)一的客戶端和服務(wù)器端的API。使用Node，你可以創(chuàng)建一個典型的HTTP服務(wù)器，然后把服務(wù)器的實例傳遞到Socket.IO。從這里，你創(chuàng)建連接、斷開連接、建立消息監(jiān)聽器，跟在客戶端一樣。
一個簡單的服務(wù)器端腳本看起來如下：
var http= require('http'), io= require('socket.io');?
// 在8080端口啟動服務(wù)器
var server= http.createServer(function(req, res){?
??// 發(fā)送HTML的headers和message
??res.writeHead(200,{ 'Content-Type': 'text/html' });?
??res.end('<h1>Hello Socket Lover!</h1>');?
});?
server.listen(8080);?
// 創(chuàng)建一個Socket.IO實例，把它傳遞給服務(wù)器
var socket= io.listen(server);?
// 添加一個連接監(jiān)聽器
socket.on('connection', function(client){?
??// 成功！現(xiàn)在開始監(jiān)聽接收到的消息
??client.on('message',function(event){?
? ? console.log('Received message from client!',event);?
??});?
??client.on('disconnect',function(){?
? ? clearInterval(interval);?
? ? console.log('Server has disconnected');?
??});?
});
你可以運行服務(wù)器部分，假定已安裝了NodeJS，從命令行執(zhí)行：
現(xiàn)在客戶端和服務(wù)器都能來回推送消息了！在NodeJS腳本內(nèi)，可以使用簡單的JavaScript創(chuàng)建一個定期消息發(fā)送器：
var interval= setInterval(function() {?
??client.send('This is a message from the server! ' + new Date().getTime());?
},5000);
服務(wù)器端將會每5秒推送消息到客戶端！
五、dojox.Socket和Socket.IO
Persevere的創(chuàng)建者Kris Zyp創(chuàng)建了dojox.Socket。dojox.Socket以Dojo庫一致的方式封裝了WebSocket API，用于在客戶端不支持WebSocket時，使用long-polling替代。
下面是怎樣在客戶端使用dojox.Socket和在服務(wù)器端使用Socket.IO的例子：
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還創(chuàng)建了在套接字失去連接時自動重連。期待包含dojox.Socket的Dojo 1.6版本早日發(fā)布。
六、實際應(yīng)用和WebSocket資源
有很多WebSocke的實際應(yīng)用。WebSocket對于大多數(shù)客戶機-服務(wù)器的異步通信是理想的，在瀏覽器內(nèi)聊天是最突出的應(yīng)用。WebSocket由于其高效率，被大多數(shù)公司所使用。
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/
?
轉(zhuǎn)自：http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html
轉(zhuǎn)自：http://www.itpub.net/thread-1373652-1-1.html###
?
可參考的網(wǎng)址：https://www.zhihu.com/question/20215561
轉(zhuǎn)載于:https://www.cnblogs.com/ourLifes/p/WebSocket.html
總結(jié)
以上是生活随笔為你收集整理的认识HTML5的WebSocket的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 往数据库的表中插入新行
- 下一篇： web前端【第九篇】JS的DOM对象三