websocket簡單入門

2022-09-11 06:51:11 字數 4099 閱讀 5099

今天說起及時通訊的時候,突然被問到時用推的方式,還是定時接受的方式,由於之前頁面都是用傳統的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...