websocket-示例

時間 2019-11-08

標籤 websocket 示例简体版

原文原文鏈接

WebSocket protocol 是HTML5一種新的協議(protocol)。它是實現了瀏覽器與服務器全雙工通訊(full-duplex)。

WebSocket 協議本質上是一個基於 TCP 的協議。同http協議使用http://開頭同樣，WebSocket協議的URL使用ws://開頭，另外安全的WebSocket協議使用wss://開頭。javascript

首先申請一個 websocket的構造方法構建一個websocket對象，參數是須要鏈接的服務器端的地址。 var Socket = new WebSocket(url, [protocol] ); 以上代碼中的第一個參數 url, 指定鏈接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。html

特色:

事件驅動
異步
使用ws或者wss協議的客戶端socket
可以實現真正意義上的推送功能

缺點：

少部分瀏覽器不支持，瀏覽器支持的程度與方式有區別。

websocket 兩大好處：

Header 互相溝通的Header是很小的-大概只有 2 Bytes
Server Push 服務器能夠主動傳送數據給客戶端

WebSocket的工做流程：

瀏覽器經過JavaScript向服務端發出創建WebSocket鏈接的請求，在WebSocket鏈接創建成功後，客戶端和服務端就能夠經過java
TCP鏈接傳輸數據。由於WebSocket鏈接本質上是TCP鏈接，不須要每次傳輸都帶上重複的頭部數據，因此它的數據傳輸量比輪詢和Comet技術小了不少。jquery
socket 是雙向通信，數據只要渲染到頁面上，後臺有改動的話，頁面會實時更新。web

構建websocket對象：

首先申請一個 websocket的構造方法構建一個websocket對象，參數是須要鏈接的服務器端的地址。 var Socket = new WebSocket(url, [protocol] ); 以上代碼中的第一個參數 url, 指定鏈接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。後端
在支持WebSocket的瀏覽器中，在建立socket以後。能夠經過onopen，onmessage，onclose即onerror四個事件實現對socket進行響應。api

WebSocket 事件（監聽函數）：

open Socket.onopen 鏈接創建時觸發
message Socket.onmessage 客戶端接收服務端數據時觸發
error Socket.onerror 通訊發生錯誤時觸發
close Socket.onclose 鏈接關閉時觸發

WebSocket 方法：

Socket.send() 使用鏈接向遠程服務器發送數據
Socket.close() 關閉該websocket連接

webSocket.readyState（webSocket的屬性）

readyState屬性返回實例對象的當前狀態，共有四種：
CONNECTING：值爲0，表示正在鏈接。
OPEN：值爲1，表示鏈接成功，能夠通訊了。
CLOSING：值爲2，表示鏈接正在關閉。
CLOSED：值爲3，表示鏈接已經關閉，或者打開鏈接失敗。

jquery項目 demo：

參考示例： client 先發起握手請求服務器端響應交互數據瀏覽器

<html>
    <body>
        <div id="main">
            <div id="message"></div>
            <p style="color: red;" class="content"></p>
            <span class="changeme">請把我替換掉</span>
        </div>
    </body>
</html>
複製代碼

<script type="text/javascript">
    $(".changeme").replaceWith("555); var websocket = null; // 判斷當前瀏覽器是否支持webSocket if('websocket' in window) { // 建立一個webSocket 連接，URL:127.0.0.1:8080/realTimeWebSocket/webSocket // 注：後端Server 在模塊realTimeWebSocket下，因此路徑下多了一層realTimeWebSocket websocket = new Websocket("wss://127.0.0.1:8080/realTimeWebSocket/webSocket"); }else { console.log('當前瀏覽器 不支持webSocket') } // 鏈接發生錯誤的回調方法： websocket.onerror = function () { setMessageInnerHTML("鏈接錯誤！"); } // 鏈接成功創建的回調方法 websocket.onopen = function () { setMessageInnerHTML("鏈接成功！"); } // 接收到消息的回調方法，此處添加處理接收消息方法，當前是將接收到的消息顯示在網頁上 websocket.onmessage = function (event) { setMessageInnerHTML(event.data); var detail = event.data; $(".content").html(detail); } // 鏈接關閉的回調方法： websocket.onclose = function () { setMessageInnerHTML("鏈接關不，如需登陸請刷新頁面！"); } // 監聽窗口關閉事件，當窗口關閉時，主動去關閉 websocket 鏈接，防止鏈接還沒斷開就關閉窗口，server 端會拋出異常。 window.onbeforeunload = function () { closeWebSocket(); } // 將消息顯示在網頁上，若是不須要顯示在網頁上則不調用該分支 function setMessageInnerHTML(INNERhtml) { document.getElementById('message').innerHTML + = innerHTML + '<br/>' } </script> 複製代碼

Vue項目 demo：

<template>
    <div>
        <p @click="clickMe()"></p>
    </div>
</template>
複製代碼

<script>
    export default {
        data() {
            return {
                websocket:''
            }
        },
        mounted() {
            this.initWebSocket();  // 調取行情
        },
        method: {
            // 當數據切換時須要從新調取行情，從新調取行情不能直接再初始化websocket，須要從新 send websocket數據，
            clickMe() {
                this.websocketonsend();
            },
            // 初始化websocket 
            initWebSocket() {
                const wsuri = 'wss://api.swbei.cn:9501/';
                this.websocket = new WebSocket(wsuri);
                this.websocket.onopen = this.websocketonsend;
                this.websocket.onmessage = this.websocketonmessage;
                this.websocket.onclose = this.websocketonclose;
            },
            websocketonsend(e) {
                this.websocket.send();
            },
            websocketonmessage(e) {
                var data = JSON.parse(e.data);
            },
            websocketonclose(e) {
                this.websocket.close();
            }
        },
        // 離開頁面時，關閉websocket
        beforeDestroy() {
            this.websocketclose();
        }
    }
</script>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。