WebSocket使用詳解

一、WebSocket使用教程PHP

WebSocket是一種在單個TCP連接上進行全雙工通信的協議。因為它是全雙工的，所以客戶端和伺服器可以同時發送和接收數據。由於WebSocket協議基於TCP，因此它在網路層（OSI層）和傳輸層（TCP/IP層）上建立並保持連接。以下是一些用PHP創建WebSocket的步驟：

<!DOCTYPE html>
<html>
<head>
<title>WebSocket簡單教程</title>
</head>
<body>

<script language="javascript" type="text/javascript">
    var websocket;
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:9000");
    }else{
        alert('當前瀏覽器不支持 WebSocket')
    }
    websocket.onopen = function(event){
        console.log(event)
        websocket.send('客戶端:你好服務端');
    }
    websocket.onmessage = function(event){

        console.log(event)
    }
    websocket.onerror = function(event){
        console.log(event)
    }
    websocket.onclose = function(event){
        console.log(event)
    }

</script>
</body>
</html>

在上面的代碼中，我們實例化WebSocket並傳遞伺服器端點方法。然後我們建立了WebSocket。服務端也可以用同樣的方式進行WebSocket連接。

二、WebSocket使用教程

WebSocket的使用，可以分為三個部分：

1、客戶端與伺服器建立連接

在客戶端通過WebSocket實例化時，需要通過ip地址或域名：埠號創建連接，並且指定客戶端與伺服器建立連接成功後的回調函數onopen方法。

2、雙方通信

客戶端/伺服器端通過通過send()方法來進行消息的發送。通過onmessage事件接收到對應的消息，並處理消息。

3、連接關閉

連接關閉有多種情況：由客戶端/伺服器端調用「close()方法」關閉；沒有響應心跳包關閉；後台程序異常關閉；網路異常關閉等，當鏈接關閉時，會觸發onclose事件。

三、WebSocket使用什麼協議握手

WebSocket握手階段，客戶端向伺服器發送升級請求，升級請求可以看做是HTTP請求的一種，叫做「握手協議」。

當伺服器接收到升級請求之後，會通過校驗頭部的一些信息來確定協議是Websocket，然後進行應答，客戶端與伺服器開始通過Websocket進行通信。Websocket使用了一次HTTP握手建立連接，但之後的數據傳輸過程就不會再使用HTTP了，節省了HTTP協議大量浪費的頭部信息。

四、Vue中WebSocket使用

Vue.js是一個漸進式JavaScript框架，是一種MVVM模式的前端框架，專註於實現視圖與數據之間的雙向綁定。Vue.js中使用WebSocket進行通信可以通過vue-native-websocket插件實現。

步驟如下：

1、安裝插件

npm install vue-native-websocket --save

2、使用插件

import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'ws://localhost:3000', { 
    reconnection: true, //伺服器端斷開是否自動重連
    reconnectionAttempts: 5, //斷開後最大重連次數
    reconnectionDelay: 3000 //重連等待時長
})

五、WebSocket原理

WebSocket協議是基於TCP的全雙工協議，是借用HTTP/HTTPS的握手機制來完成握手，並且在數據傳輸時採用了一段特定的協議頭，數據的傳輸更為迅速和高效。

以下是WebSocket通信過程的原理：

1、客戶端到伺服器端的HTTP握手，使用Upgrade和Connection頭部。客戶端發送一個Upgrade頭部，把請求升級到一個新的協議（如WebSocket）

2、會話變成了雙向的，並且消息的格式是帶有控制位的二進位格式，從而實現了雙向交互

3、WebSocket是通過協議切換(HTTP協議構建WebSocket)，握手完成後，使用的是原協議。所以只需要使用一個埠，可以同時進行HTTP通信和WebSocket通信。

六、WebSocket使用步驟

使用WebSocket建立通信有以下三個步驟：

1、建立連接

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

2、消息通信

socket.onopen = function (event) {
  console.log("連接已經建立成功")
  socket.send("這是發送給伺服器的消息")
}

socket.onmessage = function (event) {
  console.log("來自服務端的消息： ", event.data);
}

socket.onerror = function (event) {
  console.log("WebSocket連接發生錯誤");
}

socket.onclose = function (event) {
  console.log("WebSocket連接已經關閉");
}

3、關閉連接

socket.close()

七、WebSocket使用場景

WebSocket使用場景如下：

1、在線遊戲應用，多個玩家實時交互，其他玩家實時看到其它玩家的操作，Socket.io庫就是專門為實時應用設計的。

2、全球金融市場實時行情信息的網站，實時更新信息，WebSocket將是不錯的選擇。

3、在線大型協作系統，擁有與其他用戶實時共享信息的需求，這時WebSocket能快速及時地更新所有在線用戶的數據。

八、WebSocket使用原理

WebSocket使用原理如下：

1、客戶端與伺服器只需建立一次連接

2、WebSocket基於TCP的，因此效率較高

3、服務端可以主動向客戶端發送信息，與傳統的HTTP請求不同，WebSocket支持雙向通信。

九、WebSocket使用定時器

WebSocket使用定時器可以定時發送一些數據，下面是示例代碼：

var socket = new WebSocket("ws://localhost:9000");
setInterval(function(){
  socket.send("這是每隔5秒發送一次的消息");
},5000)

十、WebSocket使用前端代碼示例

以下是一個完整的WebSocket前端代碼示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebSocket Demo</title>
    <script language="javascript" type="text/javascript">
        var ws;
        //判斷是否支持WebSocket
        if("WebSocket" in window){
            ws = new WebSocket("ws://localhost:8070/ws");
            //連接成功響應
            ws.onopen = function(){
                console.log("WebSocket成功連接");
            };
            //收到服務端的響應
            ws.onmessage = function(evt){
                console.log("收到服務端的響應", evt.data);
                var txt = document.createElement('p');
                txt.innerHTML = evt.data;
                document.getElementById('content').appendChild(txt);
            };
            //斷開連接響應,自動重連實現
            ws.onclose = function(){
                console.log("WebSocket已經關閉，進行自動重連...");
                setInterval(function() {
                    ws = new WebSocket("ws://localhost:8070/ws");
                }, 5000);
            };
            //連接錯誤響應
            ws.onerror = function(){
                console.log("WebSocket連接錯誤");
            };
        }else{
            alert("當前瀏覽器不支持WebSocket");
        }

        function send(){
            var content = document.getElementById('text').value
            ws.send(content)
            var txt = document.createElement('p')
            txt.innerHTML = content
            document.getElementById('content').appendChild(txt)
            document.getElementById('text').value = ''
        }
    </script>
</head>
<body>
    <p>請在下方輸入信息，並按下「發送」按鈕發送給伺服器進行測試:</p>
    <input type="text" id="text" style="width:200px;height:30px;">
    <button onclick="send()">發送</button>
    <div id="content"></div>
</body>
</html>

原創文章，作者：YVDU，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/137044.html