成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

WebSocket的簡單介紹及應(yīng)用

OBKoro1 / 3495人閱讀

摘要:一旦建立了連接,此后的通信就不再使用了,改為使用獨立的數(shù)據(jù)幀這個幀有辦法看到,見后文。在里看到的,就是的數(shù)據(jù)幀了可以看到很像聊天記錄,其中用淺綠色標(biāo)注的是由客戶端發(fā)送給服務(wù)器的部分。

定時刷新的不足與改進(jìn)

web開發(fā)中可能遇到這樣的場景:網(wǎng)頁里的某一塊區(qū)域里寫了一些內(nèi)容,但這些內(nèi)容不是固定的,即使看網(wǎng)頁的人沒有做任何操作,它們也會隨時間不斷變化。股票行情、活動或游戲的榜單都是比較常見的例子。

對此,一般的做法是用setTimeout()setInverval()定時執(zhí)行任務(wù),任務(wù)內(nèi)容是Ajax訪問一次服務(wù)器,并在成功拿到返回數(shù)據(jù)后去更新頁面。

這種定時刷新的做法會有這樣一些感覺不足的地方:

頻繁的定時網(wǎng)絡(luò)請求對瀏覽器(客戶端)和服務(wù)器來說都是一種負(fù)擔(dān),尤其是當(dāng)網(wǎng)頁里有多個定時刷新區(qū)域的時候。

某幾次的定時任務(wù)可能是不必要的,因為服務(wù)器可能并沒有新數(shù)據(jù),還是返回了和上一次一樣的內(nèi)容。

頁面內(nèi)容可能不夠新,因為服務(wù)器可能剛更新了數(shù)據(jù),但下一輪定時任務(wù)還沒有開始。

造成這些不足的原因歸結(jié)起來,主要還是由于服務(wù)器的響應(yīng)總是被動的。HTTP協(xié)議限制了一次通信總是由客戶端發(fā)起請求,再由服務(wù)器端來返回響應(yīng)。

因此,如果讓服務(wù)器端也可以主動發(fā)送信息到客戶端,就可以很大程度改進(jìn)這些不足。WebSocket就是一個實現(xiàn)這種雙向通信的新協(xié)議。

WebSocket是基于HTTP的功能追加協(xié)議

WebSocket最初由html5提出,但現(xiàn)在已經(jīng)發(fā)展為一個獨立的協(xié)議標(biāo)準(zhǔn)。WebSocket可以分為協(xié)議(Protocol)和API兩部分,分別由IETF和W3C制定了標(biāo)準(zhǔn)。

先來看看WebSocket協(xié)議的建立過程。

為了實現(xiàn)WebSocket通信,首先需要客戶端發(fā)起一次普通HTTP請求(也就是說,WebSocket的建立是依賴HTTP的)。請求報文可能像這樣:

GET ws://websocket.example.com/ HTTP/1.1
Host: websocket.example.com
Upgrade: websocket
Connection: Upgrade
Origin: http://example.com
Sec-WebSocket-Key:pAloKxsGSHtpIHrJdWLvzQ==
Sec-WebSocket-Version:13

其中HTTP頭部字段Upgrade: websocketConnection: Upgrade很重要,告訴服務(wù)器通信協(xié)議將發(fā)生改變,轉(zhuǎn)為WebSocket協(xié)議。支持WebSocket的服務(wù)器端在確認(rèn)以上請求后,應(yīng)返回狀態(tài)碼為101 Switching Protocols的響應(yīng):

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: nRu4KAPUPjjWYrnzxDVeqOxCvlM=

其中字段Sec-WebSocket-Accept是由服務(wù)器對前面客戶端發(fā)送的Sec-WebSocket-Key進(jìn)行確認(rèn)和加密后的結(jié)果,相當(dāng)于一次驗證,以幫助客戶端確信對方是真實可用的WebSocket服務(wù)器。

驗證通過后,這個握手響應(yīng)就確立了WebSocket連接,此后,服務(wù)器端就可以主動發(fā)信息給客戶端了。此時的狀態(tài)比較像服務(wù)器端和客戶端接通了電話,無論是誰有什么信息想告訴對方,開口就好了。

一旦建立了WebSocket連接,此后的通信就不再使用HTTP了,改為使用WebSocket獨立的數(shù)據(jù)幀(這個幀有辦法看到,見后文)。

整個過程像這樣:

簡單的應(yīng)用示例

應(yīng)用WebSocket有這樣幾件事要做:

選用支持WebSocket的瀏覽器。

網(wǎng)頁內(nèi)添加創(chuàng)建WebSocket的代碼。

服務(wù)器端添加使用WebSocket通信的代碼。

服務(wù)器端

以Node的服務(wù)器為例,我們使用ws這個組件,這樣搭建一個支持WebSocket的服務(wù)器端:

var request = require("request");
var dateFormat = require("dateformat");
var WebSocket = require("ws"),
    WebSocketServer = WebSocket.Server,
    wss = new WebSocketServer({
        port: 8080,
        path: "/guest"
    });

// 收到來自客戶端的連接請求后,開始給客戶端推消息
wss.on("connection", function(ws) {
    ws.on("message", function(message) {
        console.log("received: %s", message);
    });
    sendGuestInfo(ws);
});

function sendGuestInfo(ws) {
    request("http://uinames.com/api?region=china",
        function(error, response, body) {
            if (!error && response.statusCode === 200) {
                var jsonObject = JSON.parse(body),
                    guest = jsonObject.name + jsonObject.surname,
                    guestInfo = {
                        guest: guest,
                        time: dateFormat(new Date(), "HH:MM:ss")
                    };

                if (ws.readyState === WebSocket.OPEN) {

                    // 發(fā),送
                    ws.send(JSON.stringify(guestInfo));

                    // 用隨機(jī)來“裝”得更像不定時推送一些
                    setTimeout(function() {
                        sendGuestInfo(ws);
                    }, (Math.random() * 5 + 3) * 1000);
                }
            }
        });
}

這個例子使用了姓名生成站點uinames的API服務(wù),來生成{guest: "人名", time: "15:26:01"}這樣的數(shù)據(jù)。函數(shù)sendGuestInfo()會不定時執(zhí)行,并把包含姓名和時間的信息通過send()方法發(fā)送給客戶端。另外,注意send()方法需要以字符串形式來發(fā)送json數(shù)據(jù)。

這就像是服務(wù)器自己在做一些事,然后在需要的時候會通知客戶端一些信息。

客戶端

客戶端我們使用原生javascript來完成(僅支持WebSocket的瀏覽器):

var socket = new WebSocket("ws://localhost:8080/guest");

socket.onopen = function(openEvent) {
    console.log("WebSocket conntected.");
};

socket.onmessage = function(messageEvent) {
    var data = messageEvent.data,
        dataObject = JSON.parse(data);
    console.log("Guest at " + dataObject.time + ": " + dataObject.guest);
};

socket.onerror = function(errorEvent) {
    console.log("WebSocket error: ", errorEvent);
};

socket.onclose = function(closeEvent) {
    console.log("WebSocket closed.");
};

WebSocket的URL格式是ws://wss://。因此,需要注意下URL地址的寫法,這也包括注意WebSocket服務(wù)器端的路徑(如這里的/guest)等信息。因為是本地的示例所以這里是localhost。

客戶端代碼的流程很簡單:創(chuàng)建WebSocket對象,然后指定onopen、onmessage等事件的回調(diào)即可。其中onmessage是客戶端與服務(wù)器端通過WebSocket通信的關(guān)鍵事件,想要在收到服務(wù)器通知后做點什么,寫在onmessage事件的回調(diào)函數(shù)里就好了。

效果及分析

通過node server(假定服務(wù)器端的文件名為server.js)啟動WebSocket服務(wù)器后,用瀏覽器打開一個引入了前面客戶端代碼的html(直接文件路徑file:///就可以),就可以得到像這樣的結(jié)果:

聯(lián)系前面客戶端的代碼可以想到,實際從創(chuàng)建WebSocket對象的語句開始,連接請求就會發(fā)送,并很快建立起WebSocket連接(不出錯誤的話),此后就可以收到來自服務(wù)器端的通知。如果此時客戶端還想再告訴服務(wù)器點什么,這樣做:

socket.send("Hello, server!");

服務(wù)器就可以收到:

當(dāng)然,這也是因為前面服務(wù)器端的代碼內(nèi)同樣設(shè)置了message事件的回調(diào)。在這個客戶端和服務(wù)器都是javascript的例子中,無論是服務(wù)器端還是客戶端,都用send()發(fā)送信息,都通過message事件設(shè)置回調(diào),形式上可以說非常一致。

其他可用的數(shù)據(jù)類型

WebSocket的send()可以發(fā)送的消息,除了前面用的字符串類型之外,還有兩種可用,它們是Blob和ArrayBuffer。

它們都代表二進(jìn)制數(shù)據(jù),可用于原始文件數(shù)據(jù)的發(fā)送。比如,這是一個發(fā)送Blob類型數(shù)據(jù)以完成向服務(wù)器上傳圖片的例子:

var fileEl = document.getElementById("image_upload");
var file = fileEl.files[0];
socket.send(file);

然后服務(wù)器端可以這樣把文件保存下來:

var fs = require("fs");

wss.on("connection", function(ws) {
    ws.on("message", function(message) {
        fs.writeFile("upload.png", message, "binary", function(error) {
            if (!error) {
                console.log("File saved.");
            }
        });
    });
});

在客戶端接收二進(jìn)制數(shù)據(jù)時,需注意WebSocket對象有一個屬性binaryType,初始值為"blob"。因此,如果接收的二進(jìn)制數(shù)據(jù)是ArrayBuffer,應(yīng)在接收之前這樣做:

socket.binaryType = "arraybuffer";
其他WebSocket服務(wù)器端

其他語言來做WebSocket服務(wù)器是怎樣的呢?下面是一個php的WebSocket服務(wù)器的例子(使用Ratchet):

send("The server is listening to you now.");
    }

    public function onMessage(ConnectionInterface $conn, $msg) {
        $conn->send($this->generateGuestInfo());
    }

    public function onClose(ConnectionInterface $conn) {
    }

    public function onError(ConnectionInterface $conn, Exception $e) {
        $conn->close();
    }

    private function generateGuestInfo() {
        $jsonString = file_get_contents("http://uinames.com/api?region=china");
        $jsonObject = json_decode($jsonString, true);
        $guest = $jsonObject["name"] . $jsonObject["surname"];
        $guestInfo = array(
            "guest" => $guest,
            "time" => date("H:i:s", time()),
        );

        return json_encode($guestInfo);
    }
}

$app = new RatchetApp("localhost", 8080);
$app->route("/guest", new GuestServer(), array("*"));
$app->run();

這個例子也同樣是由服務(wù)器返回{guest: "人名", time: "15:26:01"}的json數(shù)據(jù),不過由于php不像Node那樣可以用setTimeout()很容易地實現(xiàn)異步定時任務(wù),這里改為在客戶端發(fā)送一次任意信息后,再去uinames取得信息并返回。

也可以看到,php搭建的WebSocket服務(wù)器仍然是近似的,主要通過WebSocket的open、message等事件來實現(xiàn)功能。

在Chrome開發(fā)工具中查看WebSocket數(shù)據(jù)幀

Chrome開發(fā)工具中選擇Network,然后找到WebSocket的那個請求,里面可以選擇Frames。在Frames里看到的,就是WebSocket的數(shù)據(jù)幀了:

可以看到很像聊天記錄,其中用淺綠色標(biāo)注的是由客戶端發(fā)送給服務(wù)器的部分。

結(jié)語

總的來說,把服務(wù)器和客戶端拉到了一個聊天窗口來辦事,這確實是很棒的想法。

即使只從形式上說,WebSocket的事件回調(diào)感覺也比定時任務(wù)用起來要更親切一些。

(重新編輯自我的博客,原文地址:http://acgtofe.com/posts/2016/03/websocket-how-to)

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/78966.html

相關(guān)文章

  • 計算機(jī)常識 - 收藏集 - 掘金

    摘要:使用簡記后端掘金全稱為即消息隊列。優(yōu)測優(yōu)社區(qū)干貨精選老司機(jī)亂談編輯器之神掘金前言是一種信仰,我自從年有了這個信仰,已經(jīng)個年頭了。 PHP 程序員進(jìn)階學(xué)習(xí)書籍參考指南 - 后端 - 掘金PHP程序員進(jìn)階學(xué)習(xí)書籍參考指南 @heiyeluren lastmodify: 2016/2/18 ... 當(dāng)我們在談?wù)撉岸思用軙r,我們在談些什么 - 前端 - 掘金潘建旭,豈安科技(www.bigse...

    Yi_Zhi_Yu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<