国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

wzyplus / 1097人閱讀

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

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

websocket WebSocket之前

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

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

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

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

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

WebSocket

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

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

WebSocket使用
與http

WebSocket的url與http最大的不同就是協議不同

http的協議是
http://(未加密）和https://（加密）
WebSocket的協議是
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表示WebSocket當前的連接狀態

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

當連接已開啟時觸發onopen事件

onmessage --- function

當從服務端收到消息時觸發onmessage事件

onerror --- function

連接拋出錯誤時觸發onerror事件

onclose --- function

連接關閉后觸發onclose事件

method
send(message)

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

close()

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

node端的WebSocketAPI此文不做介紹

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93441.html

相關文章

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

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

    CompileYouth 評論0 收藏0

  • 關于Subscribe Rancher Events的思考

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

    yuxue 評論0 收藏0

  • 我的學習計劃

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

    Object 評論0 收藏0

發表評論

0條評論

wzyplus

男|高級講師

TA的文章

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