今天說起及時通訊的時候,突然被問到時用推的方式,還是定時接受的方式,由於之前頁面都是用傳統的ajax處理,可能對ajax的定時獲取根深蒂固了,所以一時之間沒有相同怎麼會出現推的方式呢?
當被提及websocket的時候突然頭腦中搭上了這根線。
一、websocket是html5出的東西(協議),也就是說http協議沒有變化,或者說沒關係,但http是不支援持久連線的(長連線,迴圈連線的不算)
首先http有1.1和1.0之說,也就是所謂的keep-alive,把多個http請求合併為乙個,但是websocket其實是乙個新協議,跟http協議基本沒有關係,只是為了相容現有瀏覽器的握手規範而已,也就是說websockt和http有交集,但是並不是全部。
另外html5是指的一系列新的api,或者說新規範,新技術。http協議本身只有1.0和1.1,而且跟html本身沒有直接關係。。通俗來說,你可以用http協議傳輸非html資料,就是這樣=。=是不同層次的東西。
二、websocket的特點
寫在別的特點之前,最重要的:是可以從伺服器向客戶端進行訊息的推送。
(1)建立在 tcp 協議之上,伺服器端的實現比較容易。
(2)與 http 協議有著良好的相容性。預設埠也是80和443,並且握手階段採用 http 協議,因此握手時不容易遮蔽,能通過各種 http **伺服器。
(3)資料格式比較輕量,效能開銷小,通訊高效。
(4)可以傳送文字,也可以傳送二進位制資料。
(5)沒有同源限制,客戶端可以與任意伺服器通訊。
(6)協議識別符號是ws(如果加密,則為wss),伺服器**就是 url。
三、websocket簡單api
1.建構函式
websocket 物件作為乙個建構函式,用於新建 websocket 例項。
var ws = new websocket('ws://localhost:8080');
執行上面語句之後,客戶端就會與伺服器進行連線。
2.狀態返回
readystate屬性返回例項物件的當前狀態,共有四種。
connecting:值為0,表示正在連線。
open:值為1,表示連線成功,可以通訊了。
closing:值為2,表示連線正在關閉。
closed:值為3,表示連線已經關閉,或者開啟連線失敗。
下面是乙個示例。
ws.onopen = function ()
如果要指定多個**函式,可以使用addeventlistener方法。
ws.addeventlistener('open', function (event) );
4.關閉**函式
例項物件的onclose屬性,用於指定連線關閉後的**函式。
ws.onclose = function(event) ;
ws.addeventlistener("close", function(event) );
5.指定伺服器資料後的**函式
例項物件的onmessage屬性,用於指定收到伺服器資料後的**函式。
ws.onmessage = function(event) ;
ws.addeventlistener("message", function(event) );
注意,伺服器資料可能是文字,也可能是二進位制資料(blob物件或arraybuffer物件)。
ws.onmessage = function(event)
if(event.data instanceof arraybuffer)
}除了動態判斷收到的資料型別,也可以使用binarytype屬性,顯式指定收到的二進位制資料型別。
// 收到的是 blob 資料
ws.binarytype = "blob";
ws.onmessage = function(e) ;
// 收到的是 arraybuffer 資料
ws.binarytype = "arraybuffer";
ws.onmessage = function(e) ;
6.向伺服器傳送資料
例項物件的send()方法用於向伺服器傳送資料。
傳送文字的例子。
ws.send('your message');
傳送 blob 物件的例子。
var file = document
.queryselector('input[type="file"]')
.files[0];
ws.send(file);
傳送 arraybuffer 物件的例子。
// sending canvas imagedata as arraybuffer
var img = canvas_context.getimagedata(0, 0, 400, 320);
var binary = new uint8array(img.data.length);
for (var i = 0; i < img.data.length; i++)
ws.send(binary.buffer);
7.錯誤處理方式
例項物件的onerror屬性,用於指定報錯時的**函式。
socket.onerror = function(event) ;
socket.addeventlistener("error", function(event) );
8.資料長度判定
例項物件的bufferedamount屬性,表示還有多少位元組的二進位制資料沒有傳送出去。它可以用來判斷傳送是否結束。
var data = new arraybuffer(10000000);
socket.send(data);
if (socket.bufferedamount === 0) else
四、伺服器方面
有很多常用的node
現在只說乙個特別的wobsocketd
它的最大特點,就是後台指令碼不限語言,標準輸入(stdin)就是 websocket 的輸入,標準輸出(stdout)就是 websocket 的輸出。
舉例來說,下面是乙個 bash 指令碼counter.sh。
#!/bin/bash
echo 1
sleep 1
echo 2
sleep 1
echo 3
命令列下執行這個指令碼,會輸出1、2、3,每個值之間間隔1秒。
$ bash ./counter.sh12
3現在,啟動websocketd,指定這個指令碼作為服務。
$ websocketd --port=8080 bash ./counter.sh
上面的命令會啟動乙個 websocket 伺服器,埠是8080。每當客戶端連線這個伺服器,就會執行counter.sh指令碼,並將它的輸出推送給客戶端。
var ws = new websocket('ws://localhost:8080/');
ws.onmessage = function(event) ;
上面是客戶端的 j**ascript **,執行之後會在控制台依次輸出1、2、3。
有了它,就可以很方便地將命令列的輸出,發給瀏覽器。
$ websocketd --port=8080 ls
上面的命令會執行ls命令,從而將當前目錄的內容,發給瀏覽器。使用這種方式實時監控伺服器,簡直是輕而易舉(**)。
websocketd 的實質,就是命令列的 websocket **。只要命令列可以執行的程式,都可以通過它與瀏覽器進行 websocket 通訊。下面是乙個 node 實現的回聲服務greeter.js。
process.stdin.setencoding('utf8');
process.stdin.on('readable', function()
});啟動這個指令碼的命令如下。
$ websocketd --port=8080 node ./greeter.js
官方倉庫還有其他各種語言的例子。
總結:
websocket的在即時通訊方面的作用還是相對巨大的,畢竟解決了ajax如果反覆請求時候的大的訪問壓力,所以如果有機會應該進一步對其進行研究。
go筆記 簡單的websocket入門
websocket是一種在單個tcp連線上進行全雙工通訊的協議。websocket讓客戶端和服務端之間的資料交換變得非常簡單,且允許伺服器主動向客戶端推送資料,並且之後客戶端和服務端所有的通訊都依靠這個專用協議進行。在websocket出現之前,一些 為了實現訊息的推送,採用最多的技術是ajax輪詢...
websocket快速入門
傳統的http請求需要實現資料一直變化,需要採用輪詢的做法,比較浪費客戶端效能,看到有些公司招聘要求有熟悉websocket 我就粗略的搞了一下,主要是網上借鑑,websocket的實現,只需要一次連線,保持連線即可,輪詢的做法是傳送一次就斷掉,網絡卡的時候伺服器都可能給搞崩掉,websocket可...
websocket入門示例
websocket 使得客戶端和伺服器之間的資料交換變得更加簡單,允許服務端主動向客戶端推送資料,可以取代以前的ajax輪詢,節約頻寬和伺服器資源,更好地進行實時通訊。1.客戶端使用方法 1 建立乙個websocket連線 2 let ws new websocket config.websocke...