WebSocket技術入門：JavaScript實戰詳解

言

WebSocket是一種在單個TCP連接上進行全雙工通信的協議，允許客戶端與服務器之間進行實時、雙向的數據傳輸。它極大地改善了傳統HTTP請求-響應模式下延遲和效率的問題，特別適合于實時應用如聊天室、協同編輯、股票報價等場景。本文將通過一個完整的JavaScript示例，帶領讀者快速入門WebSocket技術。

目標

了解WebSocket基本概念
學習如何創建WebSocket客戶端
掌握WebSocket事件處理方法
實現簡單的WebSocket消息發送和接收

WebSocket基礎概念

WebSocket是基于HTTP協議升級機制建立起來的一種持久化的TCP連接。客戶端通過ws://（非加密）或wss://（加密，即HTTPS）協議發起握手請求，并在成功升級后保持長連接狀態。在此連接之上，客戶端和服務端可以自由地互相發送數據幀，無需像HTTP那樣每次發送都新建連接。

創建WebSocket客戶端

在JavaScript中，我們可以通過構造函數WebSocket來創建一個新的WebSocket對象：

var socket = new WebSocket('ws://yourserver.com/ws-endpoint');

這里的ws://yourserver.com/ws-endpoint是WebSocket服務器的地址和端點，替換為實際的服務地址即可。

WebSocket事件處理

WebSocket對象提供了多個事件處理方法，用于監聽連接的狀態變化以及數據交互：

socket.onopen = function(event) {
    console.log('Connection open!');
};

socket.onmessage = function(event) {
    console.log('Received message:', event.data);
    // 對接收到的消息進行處理，例如更新UI
};

socket.onerror = function(error) {
    console.error('Error occurred:', error);
};

socket.onclose = function(event) {
    console.log('Connection closed with code: ' + event.code + ', reason: ' + event.reason);
};

onopen：當連接成功建立時觸發。
onmessage：每當從服務器接收到新消息時觸發，事件對象的data屬性包含接收到的數據。
onerror：當發生錯誤時觸發，如網絡問題或者服務器返回錯誤等。
onclose：當連接關閉時觸發，提供關閉原因代碼和關閉理由。

發送和接收消息

在WebSocket連接建立后，可以使用send()方法向服務器發送數據：

// 發送文本消息到服務器
socket.send('Hello, Server!');

// 或者發送JSON格式數據
var data = { message: 'Some data', sender: 'Client' };
socket.send(JSON.stringify(data));

同時，在服務器返回消息時，onmessage處理器會捕獲并處理這些消息。

完整示例

下面是一個簡單的HTML頁面上的WebSocket客戶端實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Example</title>
</head>
<body>
    <script>
        var socket = new WebSocket('ws://yourserver.com/ws-endpoint');

        socket.onopen = function(event) {
            console.log('WebSocket connection opened.');
            socket.send('Client connected');
        };

        socket.onmessage = function(event) {
            console.log('Received message:', event.data);
            // 在此處添加對消息的實際處理邏輯，例如顯示在頁面上
        };

        socket.onerror = function(error) {
            console.error('WebSocket error:', error);
        };

        socket.onclose = function(event) {
            console.log('WebSocket connection closed with code: ' + event.code + ', reason: ' + event.reason);
        };
    </script>
</body>
</html>

以上就是使用JavaScript構建WebSocket客戶端的基本過程。為了實現完整的通訊功能，還需要在服務器端設置WebSocket服務來接收和響應客戶端的消息。這通常可以通過Node.js的ws庫或其他后端框架（如Spring Boot、Java EE）提供的WebSocket支持來完成。

、JavaScript 寫得websocket html主要代碼如下圖，詳細代碼在最下邊：

運行效果如下：

、使用跨文檔消息傳遞（Cross-document Messaging）

可以在不同窗口或iframe之間安全地傳遞消息，即使這些窗口或iframe來自不同的域。以下是使用window.postMessage()方法進行跨域消息傳遞的基本示例：

假設有兩個頁面：page1.html和page2.html，它們分別位于不同的域。

在page1.html中，我們想要向page2.html發送消息：

<!-- page1.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 1</title>
</head>
<body>
    <button id="sendMessageBtn">Send Message to Page 2</button>

    <script>
        const sendMessageBtn = document.getElementById('sendMessageBtn');

        // 監聽按鈕點擊事件
        sendMessageBtn.addEventListener('click', function() {
            // 獲取目標窗口的引用
            const targetWindow = window.parent.frames['page2-frame'];

            // 向目標窗口發送消息
            targetWindow.postMessage('Hello from Page 1!', 'http://www.example.com/page2.html');
        });
    </script>
</body>
</html>

在page2.html中，我們接收來自page1.html的消息：

<!-- page2.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 2</title>
</head>
<body>
    <iframe src="http://www.example.com/page1.html" name="page1-frame" id="page1-frame"></iframe>

    <script>
        // 監聽來自其他窗口的消息
        window.addEventListener('message', function(event) {
            // 判斷消息來源是否是預期的域
            if (event.origin === 'http://www.example.com') {
                // 處理收到的消息
                console.log('Received message from Page 1:', event.data);
            }
        });
    </script>
</body>
</html>

page1.html包含一個按鈕，當點擊按鈕時，會向page2.html發送消息。page2.html中通過監聽window對象的message事件來接收來自page1.html的消息，并且只有當消息的來源是預期的域時才會處理該消息。

需要注意的是，跨文檔消息傳遞僅在現代瀏覽器中得到支持，且需要發送消息的窗口或iframe引用以及目標窗口的域。以前的IE瀏覽器啥的是不支持的。這種方式較為簡單，方便初學者進行測試。

二、還有一種辦法較為復雜，可以利用代理服務器，通過在同一域下設置一個代理服務器，將跨域請求發送到該代理服務器上，再由代理服務器轉發請求到目標服務器。這種方法需要在服務器端實現代理，但可以繞過瀏覽器的跨域限制。

另外還有兩種較為簡單的方式也做一下介紹，下面這2種方式是常用的方式了，較為簡單，

三、JSONP（JSON with Padding）：JSONP是一種利用<script>標簽的GET請求實現跨域數據傳輸的技術。它允許從其他域加載數據，但只支持GET請求，且需要目標服務器支持返回JavaScript回調函數。JSONP的缺點是安全性較低，僅能進行GET請求。

四、CORS（Cross-Origin Resource Sharing）：CORS是一種現代的跨域資源共享機制，它允許服務器端設置HTTP頭部，以允許在不同域之間的安全數據傳輸。通過在服務器端配置，可以允許跨域請求發送和接收數據。

五、WebSocket：得利于HTML5技術的發展，現在主流瀏覽器的支持，WebSocket是HTML5提供的一種在單個TCP連接上進行全雙工通訊的協議，它可以與任意域的服務器進行通訊，但需要服務器端支持WebSocket協議。

在客戶端，我們可以使用JavaScript來創建WebSocket連接：

// 客戶端代碼
const socket = new WebSocket('ws://example.com:8080'); // 替換為實際的WebSocket服務器地址

// 當WebSocket連接成功建立時觸發
socket.onopen = function(event) {
    console.log('WebSocket連接已建立');
    
    // 向服務器發送數據
    socket.send('Hello from client!');
};

// 當接收到來自服務器的消息時觸發
socket.onmessage = function(event) {
    console.log('Received message from server:', event.data);
};

// 當發生錯誤時觸發
socket.onerror = function(error) {
    console.error('WebSocket發生錯誤:', error);
};

// 當WebSocket連接關閉時觸發
socket.onclose = function(event) {
    console.log('WebSocket連接已關閉');
};

在服務器端，您需要使用相應的語言和框架來創建WebSocket服務器。以下是一個簡單的Node.js示例：

在線咨詢

上一篇：Web前端：帶你深入了解Angular11新功能
下一篇：DW如何新建HTML網頁

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商