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

資訊專欄INFORMATION COLUMN

前端技術(shù)棧補(bǔ)全計(jì)劃－－－websocket

wzyplus / 1111人閱讀

摘要：本系列文章旨在總結(jié)前端技術(shù)棧中的一些通用技術(shù)本文主要總結(jié)之前在之前，請(qǐng)求的主要模式是客戶端發(fā)起請(qǐng)求，服務(wù)端負(fù)責(zé)接收，并返回?cái)?shù)據(jù)。一種比較常見的方式是服務(wù)端攜帶參數(shù)，訪問某個(gè)指定的前端頁面，例如后端主動(dòng)訪問。協(xié)議是基于的一種新的網(wǎng)絡(luò)協(xié)議。

本系列文章旨在總結(jié)前端技術(shù)棧中的一些通用技術(shù)
本文主要總結(jié)websocket

websocket WebSocket之前

在WebSocket之前，http請(qǐng)求的主要模式是客戶端發(fā)起請(qǐng)求，服務(wù)端負(fù)責(zé)接收，并返回?cái)?shù)據(jù)。如果需要服務(wù)端將一些參數(shù)主動(dòng)傳遞至客戶端，下面是一些常見的方法。

一種比較常見的方式是服務(wù)端攜帶參數(shù)，訪問某個(gè)指定的前端頁面，例如后端主動(dòng)訪問http://www.params.com?want=param1;。params頁面被訪問時(shí)接收到了want＝param1這個(gè)參數(shù)，其含義為，服務(wù)端想從客戶端拿到param1這個(gè)字段的數(shù)據(jù)。前端就會(huì)發(fā)出對(duì)應(yīng)http請(qǐng)求來滿足服務(wù)端的需求

另一種更加常見的方式就是輪詢(polling)，其本質(zhì)就是利用定時(shí)器，不斷像服務(wù)端發(fā)送請(qǐng)求，直到獲得想要的數(shù)據(jù)

const polling ＝ setInterval(() => {
    // 像服務(wù)器發(fā)出請(qǐng)求
    http.(url, options)
        .then((data) => {
            if () {
                // 沒有新消息，繼續(xù)輪詢
                ... 
            } else {
                // 拿到新消息，推出輪詢
                ...
                polling.clearInterval();
            }
        });
}, 500);

這兩種方法，總的來說都是妥協(xié)性實(shí)現(xiàn)，第一種方法對(duì)需要通過中間頁面實(shí)現(xiàn)，不具備通用性。第二種方法則會(huì)浪費(fèi)大量資源，給服務(wù)器帶來不必要的壓力。還有其他很多實(shí)現(xiàn)方法，不一一列舉了。

WebSocket

WebSocket協(xié)議是基于TCP的一種新的網(wǎng)絡(luò)協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工(full-duplex)通信——允許服務(wù)器主動(dòng)發(fā)送信息給客戶端。

關(guān)于網(wǎng)絡(luò)協(xié)議的問題，本文不多討論(因?yàn)楣P者暫時(shí)也不懂,協(xié)議部分以后會(huì)放到別的文章里)。

WebSocket使用
與http

WebSocket的url與http最大的不同就是協(xié)議不同

http的協(xié)議是
http://(未加密）和https://（加密）
WebSocket的協(xié)議是
ws://（未加密）和 wss://（加密）

服務(wù)端

本文只以最簡(jiǎn)單的node服務(wù)端為例。
新建文件夾wsTest

// node端 ws依賴
npm install ws --save
// wsTest/server.js

const PORT = 3000;
const WebSocketServer = require("ws").Server;
const wss = new WebSocketServer({port: PORT});
    wss.on("connection", function (ws) {
        console.log("client connected");
        wss.send("websocket connect success");
        wss.on("message", function(evt) {
            console.log(evt);
        }
        wss.on("error", function(evt) {
            console.log(evt);
        }
        wss.on("close", function(evt) {
            console.log(evt);
        }
});

console.log(`server start ${PORT}`);

回到命令行，輸入指令node server.js就可以啟動(dòng)服務(wù)器了

前端
// index.html
// 本文件與服務(wù)端無關(guān)，不需要配置

直接運(yùn)行index.html，在控制臺(tái)network中可以看到對(duì)應(yīng)的WebSocket連接

WebSocket attr & method（前端）

(本文僅列舉一些前端WebSocket常用attr，全部api可見官方文檔）

attr
url ---string

WebSocket連接的目標(biāo)地址

const ws = new WebSocket("ws://www.baidu.com");
ws.url       // "ws://www.baidu.com";
readyState --- number

readyState表示W(wǎng)ebSocket當(dāng)前的連接狀態(tài)

constant state code description
CONNECTING 0 連接還沒開啟
OPEN 1 連接已開啟并準(zhǔn)備好通信
CLOSING 2 連接正在關(guān)閉過程中
CLOSED 3 連接已經(jīng)關(guān)閉，活著無法建立
onopen ---function

當(dāng)連接已開啟時(shí)觸發(fā)onopen事件

onmessage --- function

當(dāng)從服務(wù)端收到消息時(shí)觸發(fā)onmessage事件

onerror --- function

連接拋出錯(cuò)誤時(shí)觸發(fā)onerror事件

onclose --- function

連接關(guān)閉后觸發(fā)onclose事件

method
send(message)

Websocket.send(message)
用于向服務(wù)端發(fā)送一條消息

close()

Websocket.close()
用于客戶端主動(dòng)關(guān)閉WebSocket通信

node端的WebSocketAPI此文不做介紹

暫時(shí)只做這么多介紹，更多詳細(xì)內(nèi)容和使用經(jīng)驗(yàn)會(huì)會(huì)隨著筆者不斷學(xué)習(xí)應(yīng)用逐步更新2333，希望大家共同進(jìn)步
websocket-Mozila官方文檔

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93441.html

相關(guān)文章

  • 阿里副總裁玄難：藏經(jīng)閣計(jì)劃首次在阿里應(yīng)用落地

    摘要：在全國知識(shí)圖譜與語義計(jì)算大會(huì)上，阿里巴巴集團(tuán)副總裁藏經(jīng)閣計(jì)劃阿里負(fù)責(zé)人墻輝玄難宣布藏經(jīng)閣計(jì)劃首次在阿里應(yīng)用落地，以及首次披露大規(guī)模知識(shí)構(gòu)建技術(shù)細(xì)節(jié)，并從三個(gè)方面進(jìn)行了解讀。 2018年4月，阿里聯(lián)合清華大學(xué)、浙江大學(xué)、中科院自動(dòng)化所、中科院軟件所、蘇州大學(xué)等五家機(jī)構(gòu)，聯(lián)合發(fā)布藏經(jīng)閣（知識(shí)引擎）研究計(jì)劃，同時(shí)還宣布打算用一年時(shí)間初步建成首個(gè)開放的知識(shí)引擎服務(wù)平臺(tái)，服務(wù)社會(huì)。 在全國知識(shí)圖...

    CompileYouth 評(píng)論0 收藏0

  • 關(guān)于Subscribe Rancher Events的思考

    摘要：年月日社區(qū)技術(shù)支持計(jì)劃全面啟動(dòng)，本文是研發(fā)人員在社區(qū)答疑過程中關(guān)于的一些心得和思考。初識(shí)基于的消息總線可以很好的與前端兼容，讓消息的傳遞不再是后端的專利。 2016年2月14日「Rancher社區(qū)技術(shù)支持計(jì)劃」全面啟動(dòng)，本文是Rancher研發(fā)人員在社區(qū)答疑過程中關(guān)于Subscribe Rancher Events的一些心得和思考。 引言 幾乎每個(gè)大型的分布式的集群軟件，都離不開一樣?xùn)|...

    yuxue 評(píng)論0 收藏0

  • 我的學(xué)習(xí)計(jì)劃

    摘要：導(dǎo)語工作了之后發(fā)現(xiàn)，工作不是學(xué)習(xí)的結(jié)束，而是學(xué)習(xí)的開始，我們從校園里踏入社會(huì)，丟下了教科書，但是并不應(yīng)該丟下學(xué)習(xí)的興趣，學(xué)習(xí)是一件一生的事業(yè)，在學(xué)校內(nèi)我們最應(yīng)該擁有的三樣?xùn)|西培養(yǎng)學(xué)習(xí)的興趣學(xué)習(xí)到專業(yè)知識(shí)養(yǎng)成良好的學(xué)習(xí)方法。 導(dǎo)語: 工作了之后發(fā)現(xiàn)，工作不是學(xué)習(xí)的結(jié)束，而是學(xué)習(xí)的開始，我們從校園里踏入社會(huì)，丟下了教科書，但是并不應(yīng)該丟下學(xué)習(xí)的興趣，學(xué)習(xí)是一件一生的事業(yè)，在學(xué)校內(nèi)我們最應(yīng)該...

    Object 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<