HTML5中的WebSocketAPI怎么用

本篇內(nèi)容介紹了“HTML5中的WebSocket API怎么用”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)綏芬河免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

一、HTML5 中的 WebSocket API 是個什么東東？

WebSocket API是下一代客戶端-服務(wù)器的異步通信方法。該通信取代了單個的TCP套接字，使用ws或wss協(xié)議，可用于任意的客戶端和服務(wù)器程序。WebSocket目前由W3C進(jìn)行標(biāo)準(zhǔn)化。WebSocket已經(jīng)受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支持。

WebSocket API最偉大之處在于服務(wù)器和客戶端可以在給定的時間范圍內(nèi)的任意時刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因?yàn)锳jax技術(shù)需要客戶端發(fā)起請求，而WebSocket服務(wù)器和客戶端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允許跨域通信。

Ajax技術(shù)很聰明的一點(diǎn)是沒有設(shè)計(jì)要使用的方式。WebSocket為指定目標(biāo)創(chuàng)建，用于雙向推送消息。

二、HTML5 中的 WebSocket API 的用法

只專注于客戶端的API，因?yàn)槊總€服務(wù)器端語言有自己的API。下面的代碼片段是打開一個連接，為連接創(chuàng)建事件監(jiān)聽器，斷開連接，消息時間，發(fā)送消息返回到服務(wù)器，關(guān)閉連接。

復(fù)制代碼

代碼如下:

// 創(chuàng)建一個Socket實(shí)例

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實(shí)例上。每個方法都提供了一個事件，以表示Socket的狀態(tài)。

onmessage事件提供了一個data屬性，它可以包含消息的Body部分。消息的Body部分必須是一個字符串，可以進(jìn)行序列化/反序列化操作，以便傳遞更多的數(shù)據(jù)。

WebSocket的語法非常簡單，使用WebSockets是難以置信的容易……除非客戶端不支持WebSocket。IE瀏覽器目前不支持WebSocket通信。如果你的客戶端不支持WebSocket通信，下面有幾個后備方案供你使用：

Flash技術(shù) —— Flash可以提供一個簡單的替換。 使用Flash最明顯的缺點(diǎn)是并非所有客戶端都安裝了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，那么該怎么辦呢？幸運(yùn)的是，Guillermo Rauch創(chuàng)建了一個Socket.IO技術(shù)。

三、帶Socket.IO的WebSocket

Socket.IO是Guillermo Rauch創(chuàng)建的WebSocket API，Guillermo Rauch是LearnBoost公司的首席技術(shù)官以及LearnBoost實(shí)驗(yàn)室的首席科學(xué)家。Socket.IO使用檢測功能來判斷是否建立WebSocket連接，或者是AJAX long-polling連接，或Flash等?？煽焖賱?chuàng)建實(shí)時的應(yīng)用程序。Socket.IO還提供了一個NodeJS API，它看起來非常像客戶端API。

建立客戶端Socket.IO

Socket.IO可以從GitHub下載，可以把socket.io.js文件包含到頁面中：

復(fù)制代碼

代碼如下:

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

此時，Socket.IO在此頁面上是有效的，是時候創(chuàng)建Socket了：

復(fù)制代碼

代碼如下:

// 創(chuàng)建Socket.IO實(shí)例，建立連接

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)一了返回運(yùn)輸?shù)腁PI。傳輸包括：

WebSocket

Flash Socket

AJAX long-polling

AJAX multipart streaming

IFrame

JSONP polling

你還可以設(shè)置任意的Socket.IO構(gòu)造器的第二個選項(xiàng)，選項(xiàng)包括：

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ù)器的實(shí)例傳遞到Socket.IO。從這里，你創(chuàng)建連接、斷開連接、建立消息監(jiān)聽器，跟在客戶端一樣。

一個簡單的服務(wù)器端腳本看起來如下：

復(fù)制代碼

代碼如下:

// 需要HTTP 模塊來啟動服務(wù)器和Socket.IO

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('<h2>Hello Socket Lover!</h2>');

});

server.listen(8080);

// 創(chuàng)建一個Socket.IO實(shí)例，把它傳遞給服務(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');

});

});

你可以運(yùn)行服務(wù)器部分，假定已安裝了NodeJS，從命令行執(zhí)行：

node socket-server.js

現(xiàn)在客戶端和服務(wù)器都能來回推送消息了！在NodeJS腳本內(nèi)，可以使用簡單的JavaScript創(chuàng)建一個定期消息發(fā)送器：

復(fù)制代碼

代碼如下:

// 創(chuàng)建一個定期（每5秒）發(fā)送消息到客戶端的發(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的例子：

復(fù)制代碼

代碼如下:

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還創(chuàng)建了在套接字失去連接時自動重連。期待包含dojox.Socket的Dojo 1.6版本早日發(fā)布。

六、實(shí)際應(yīng)用和WebSocket資源

有很多WebSocke的實(shí)際應(yīng)用。WebSocket對于大多數(shù)客戶機(jī)-服務(wù)器的異步通信是理想的，在瀏覽器內(nèi)聊天是最突出的應(yīng)用。WebSocket由于其高效率，被大多數(shù)公司所使用。

“HTML5中的WebSocket API怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁名稱：HTML5中的WebSocketAPI怎么用
文章位置：http://muchs.cn/article32/pipppc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)站內(nèi)鏈、營銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)