亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端技術棧補全計劃－－－websocket

wzyplus / 1148人閱讀

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

本系列文章旨在總結前端技術棧中的一些通用技術
本文主要總結websocket

websocket WebSocket之前

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

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

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

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

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

WebSocket

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

關于網(wǎng)絡協(xié)議的問題，本文不多討論(因為筆者暫時也不懂,協(xié)議部分以后會放到別的文章里)。

WebSocket使用
與http

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

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

服務端

本文只以最簡單的node服務端為例。
新建文件夾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就可以啟動服務器了

前端
// index.html
// 本文件與服務端無關，不需要配置

直接運行index.html，在控制臺network中可以看到對應的WebSocket連接

WebSocket attr & method（前端）

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

attr
url ---string

WebSocket連接的目標地址

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

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

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

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

onmessage --- function

當從服務端收到消息時觸發(fā)onmessage事件

onerror --- function

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

onclose --- function

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

method
send(message)

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

close()

Websocket.close()
用于客戶端主動關閉WebSocket通信

node端的WebSocketAPI此文不做介紹

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93441.html

相關文章

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

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

    CompileYouth 評論0 收藏0

  • 關于Subscribe Rancher Events的思考

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

    yuxue 評論0 收藏0

  • 我的學習計劃

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

    Object 評論0 收藏0

發(fā)表評論

0條評論

wzyplus

男|高級講師

TA的文章

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