html5利用websocket完成的推送功能

程序簡單來說，就是客戶A可以發送消息給客戶B，但有很多可以擴展的地方，

比如

1.如果加入數據庫后，A發消息時客戶B未上線，服務端將會把消息存在數據庫中，等客戶B上線后，在將消息取出發送給客戶B

2.服務端也可發送消息到任意客戶端上。

Websocket

1.websocket是什么？

WebSocket是為解決客戶端與服務端實時通信而產生的技術。其本質是先通過HTTP/HTTPS協議進行握手后創建一個用於交換數據的TCP連接，

此后服務端與客戶端通過此TCP連接進行實時通信。

2.websocket的優點

以前我們實現推送技術，用的都是輪詢，在特點的時間間隔有瀏覽器自動發出請求，將服務器的消息主動的拉回來，在這種情況下，我們需要不斷的向服務器發送請求，然而HTTP request 的header是非常長的，里面包含的數據可能只是一個很小的值，這樣會占用很多的帶寬和服務器資源。會占用大量的帶寬和服務器資源。

WebSocket API最偉大之處在於服務器和客戶端可以在給定的時間范圍內的任意時刻，相互推送信息。在建立連接之后，服務器可以主動傳送數據給客戶端。

此外，服務器與客戶端之間交換的標頭信息很小。

WebSocket並不限於以Ajax(或XHR)方式通信，因為Ajax技術需要客戶端發起請求，而WebSocket服務器和客戶端可以彼此相互推送信息；

關於ajax,comet,websocket的詳細介紹，和websocket報文的介紹，大家可以參看http://www.shaoqun.com/a/54588.aspx 網頁設計]Ajax、Comet與Websocket，

如果以后有時間，也會寫出來的

3.如何使用websocket

客戶端

在支持WebSocket的瀏覽器中，在創建socket之后。可以通過onopen，onmessage，onclose即onerror四個事件實現對socket進行響應

一個簡單是示例

var ws = new WebSocket(“ws://localhost:8080”);
ws.onopen = function()
{
  console.log(“open”);
  ws.send(“hello”);
};
ws.onmessage = function(evt)
{
  console.log(evt.data)
};
ws.onclose = function(evt)
{
  console.log(“WebSocketClosed!”);
};
ws.onerror = function(evt)
{
  console.log(“WebSocketError!”);
};

1.var ws = new WebSocket(“ws://localhost:8080”);

申請一個WebSocket對象，參數是需要連接的服務器端的地址，同http協議使用http://開頭一樣，WebSocket協議的URL使用ws://開頭，另外安全的WebSocket協議使用wss://開頭。

ws.send(“hello”);

用於叫消息發送到服務端

2.ws.onopen = function() { console.log(“open”)};

當websocket創建成功時，即會觸發onopen事件

3.ws.onmessage = function(evt) { console.log(evt.data) };

當客戶端收到服務端發來的消息時，會觸發onmessage事件，參數evt.data中包含server傳輸過來的數據

4.ws.onclose = function(evt) { console.log(“WebSocketClosed!”); };

當客戶端收到服務端發送的關閉連接的請求時，觸發onclose事件

5.ws.onerror = function(evt) { console.log(“WebSocketError!”); };

如果出現連接，處理，接收，發送數據失敗的時候就會觸發onerror事件

我們可以看出所有的操作都是采用事件的方式觸發的，這樣就不會阻塞UI，使得UI有更快的響應時間，得到更好的用戶體驗。