小編給大家分享一下HTML5中的WebSocket有什么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的平湖網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

認(rèn)識(shí) HTML5 的 WebSocket

在 HTML5 規(guī)范中，我最喜歡的Web技術(shù)就是正迅速變得流行的 WebSocket API。WebSocket 提供了一個(gè)受歡迎的技術(shù)，以替代我們過(guò)去幾年一直在用的Ajax技術(shù)。這個(gè)新的API提供了一個(gè)方法，從客戶(hù)端使用簡(jiǎn)單的語(yǔ)法有效地推動(dòng)消息到服務(wù)器。讓我們看一看 HTML5 的 WebSocket API：它可用于客戶(hù)端、服務(wù)器端。而且有一個(gè)優(yōu)秀的第三方API，名為Socket.IO。

一、HTML5 中的 WebSocket API 是個(gè)什么東東？

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

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

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

二、HTML5 中的 WebSocket API 的用法

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

代碼如下:

// 創(chuàng)建一個(gè)Socket實(shí)例
var socket = new WebSocket('ws://localhost:8080');
// 打開(kāi)Socket 
socket.onopen = function(event){
  // 發(fā)送一個(gè)初始化消息
  socket.send('I am the client and I\'m listening!');
  // 監(jiān)聽(tīng)消息
  socket.onmessage = function(event){
    console.log('Client received a message',event);
  };
  // 監(jiān)聽(tīng)Socket的關(guān)閉
  socket.onclose = function(event){
    console.log('Client notified socket has closed',event);
  };
  // 關(guān)閉Socket.... 
  //socket.close()
};

讓我們來(lái)看看上面的初始化片段。參數(shù)為URL，ws表示W(wǎng)ebSocket協(xié)議。onopen、onclose和onmessage方法把事件連接到Socket實(shí)例上。每個(gè)方法都提供了一個(gè)事件，以表示Socket的狀態(tài)。

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

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

Flash技術(shù) —— Flash可以提供一個(gè)簡(jiǎn)單的替換。 使用Flash最明顯的缺點(diǎn)是并非所有客戶(hù)端都安裝了Flash，而且某些客戶(hù)端，如iPhone/iPad，不支持Flash。

AJAX Long-Polling技術(shù) —— 用AJAX的long-polling來(lái)模擬WebSocket在業(yè)界已經(jīng)有一段時(shí)間了。它是一個(gè)可行的技術(shù)，但它不能優(yōu)化發(fā)送的信息。也就是說(shuō)，它是一個(gè)解決方案，但不是最佳的技術(shù)方案。

由于目前的IE等瀏覽器不支持WebSocket，要提供WebSocket的事件處理、返回傳輸、在服務(wù)器端使用一個(gè)統(tǒng)一的API，那么該怎么辦呢？幸運(yùn)的是，Guillermo Rauch創(chuàng)建了一個(gè)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使用檢測(cè)功能來(lái)判斷是否建立WebSocket連接，或者是AJAX long-polling連接，或Flash等?？煽焖賱?chuàng)建實(shí)時(shí)的應(yīng)用程序。Socket.IO還提供了一個(gè)NodeJS API，它看起來(lái)非常像客戶(hù)端API。

看完了這篇文章，相信你對(duì)“HTML5中的WebSocket有什么用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享標(biāo)題：HTML5中的WebSocket有什么用
轉(zhuǎn)載來(lái)于：http://chinadenli.net/article26/jiiscg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、品牌網(wǎng)站設(shè)計(jì)、、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷(xiāo)

廣告

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