HTML 5 Web Sockets應用初探 1

2021-08-31 08:16:47 字數 1205 閱讀 8273

html 5之中乙個很酷的新特性就是web sockets,在本文之前51cto在《html 5 web socket:下一次web通訊革命揭幕》一文中已經詳細的為大家介紹過html 5 web sockets為web通訊帶來的改變,而本文將介紹通過php環境的伺服器端執行web socket,建立客戶端並通過web sockets協議傳送和接收伺服器端資訊。

什麼是web sockets?

web sockets是在乙個(tcp)介面進行雙向通訊的技術,push技術型別。同時web sockets仍將基於w3c標準,目前為止,chrome和safari的最新版本瀏覽器已經支援web sockets了。

web sockets將會替代什麼?

web sockets可以替代long polling(php服務端推送技術),這是乙個有趣的概念。客戶端傳送乙個請求到伺服器,現在,伺服器端並不會響應還沒準備好的資料,它會保持連線的開啟狀態直到最新的資料準備就緒傳送,之後客戶端收到資料,然後傳送另乙個請求。

這有它的好處:減少任一連線的延遲,當乙個連線已經開啟時就不需要建立另乙個新的連線。但是long-polling並不是什麼花俏技術,他仍有可能發生請求暫停,因此會需要建立新的連線。

一些ajax應用使用上述技術-這經常是歸因於低資源利用。試想一下,如果伺服器在早晨會自啟動並傳送資料到那些希望接收而不用提前建立一些連線埠的客戶端,這是一件多棒的事情啊!歡迎來到push技術的世界!

第一步:搞定web socket伺服器

文章會把更多的精力放在客戶端的建立而不是伺服器端的執行等操作。作者使用的是基於windows 7的xampp來實現本地執行php。

啟動apache伺服器

第二步:修改urls和埠  

根據你之前的安裝修改伺服器,下面是setup.class.php中的例子:

public function __construct($host='localhost',$port=8000,$max=100)   

$this->createsocket($host,$port);   

瀏覽檔案並在適當情況下進行更改。

第三步:開始建立客戶端  

下面來建立基本模板,這是我的client.php檔案:

e.g. try 'hi', 'name', 'age', 'today'

disconnect

​  我們已經建立裡基本模板:乙個chat log容器,乙個input輸入框和乙個斷開連線的按鈕。

HTML 5 Web Sockets應用初探 2

第四步 新增一些css 沒什麼花俏 只是處理一下標籤的樣式。body container chatlog chatlog p event warning 第五步 web socket事件 首先讓我們嘗試並理解web socket事件的概念 onopen 當介面開啟時 onmessage 當收到資訊時...

html5介紹,什麼是html5,html5新特性

html5 將成為 html xhtml 以及 html dom 的新標準。html 的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 是 w3c 與 whatwg 合作的結果。編...

HTML5學習之 HTML 5 拖放

拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性,即抓取物件以後拖到另乙個位置。在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...