JavaScript與WebSocket：打造高效率的即時資料擷取系統-js教程-PHP中文網

JavaScript與WebSocket：打造高效率的即時資料擷取系統

PHPz

發布： 2023-12-18 13:00:51

原創

676 人瀏覽過

JavaScript與WebSocket：打造高效率的即時資料擷取系統

JavaScript和WebSocket：打造高效的即時資料擷取系統

在現代web應用中，即時資料的處理變得越來越普遍。由於傳輸任意即時資料需要避免延遲，我們需要使用一個有效的通訊方法。本文將介紹如何利用JavaScript和WebSocket來打造高效的即時資料擷取系統，並提供具體程式碼範例。

WebSocket是一種全雙工協議，允許在客戶端和伺服器之間保持長期連線。當所需的資料量較大時，WebSocket通常比使用HTTP通訊傳輸更具優勢。另外，WebSocket協定是與HTTP協定同時使用的，這使得它能夠更方便地整合到現有的web應用中。

下面是一個基本的實作範例：

首先，建立一個WebSocket物件：

var socket = new WebSocket('ws:// example.com/socket');

這將建立一個線上的WebSocket對象，它建立一個與伺服器的長期連線。 URL 'ws：//example.com/socket' 指向WebSocket伺服器。

接下來，監聽WebSocket事件：

socket.addEventListener('open', function (event) {
```
  console.log('WebSocket连接已建立');
```
登入後複製
});
socket.addEventListener('message', function (event) {
```
  console.log('Received:', event.data);
```
登入後複製
});
socket.addEventListener('close', function (event) {
```
  console.log('WebSocket连接已关闭');
```
登入後複製
});

在這裡，addEventListener()函數用於新增事件處理程序，以回應WebSocket事件。當WebSocket連線建立時，'open'事件將被觸發，當接受到資料時，'message'事件將被觸發，當WebSocket連線關閉時，'close'事件將被觸發。

最後，傳送/接收WebSocket資料：
socket.send('Hello World'); // 傳送資料
var data = JSON .parse(event.data); // 接收資料

這個簡單的範例展示如何使用JavaScript和WebSocket來建立客戶端到伺服器的即時連線。但是，真正實際的應用中需要更多的程式碼來處理更多的情況和技術細節。

下面是一個更完整的WebSocket應用範例：

伺服器端

const WebSocket = require('ws');
const wss = new WebSocket.Server({
  port: 8080
});
console.log("WebSocket server started...");
 
wss.on('connection', function(ws) {
    console.log("WebSocket client connected...");
 
    ws.on('message', function(message) {
        console.log("Message received:"+message);
        if (message === 'close') {
            ws.close();
        }
        else {
            wss.clients.forEach(function each(client) {
                if (client.readyState === WebSocket.OPEN) {
                    console.log("Broadcasting:", message);
                    client.send(message);  // 实现广播
                }
            });
        }
    });
 
    ws.on('close', function() {
        console.log("WebSocket closed...");
    });
});

登入後複製

在這個範例中，伺服器會接受客戶端連接，當有訊息發生時將廣播給所有已連線的客戶端。當接收到「close」訊息時，該客戶端的連線將關閉。請注意，為了實現廣播，我們需要遍歷所有連接到伺服器的客戶端。使用WebSocket作為即時資料擷取系統的核心是一個有效的選擇，因為它相對於HTTP傳輸能夠保證更有效率、穩定的傳輸。

客戶端

var ws = new WebSocket('ws://localhost:8080');
console.log("WebSocket client started...");
 
ws.onmessage = function(msg) {
    console.log("Received: " + msg.data);
};
 
ws.onclose = function() {
    console.log("WebSocket closed...");
};
 
function send() {
    var val = document.getElementById('input').value;
    console.log("Sending: " + val);
    ws.send(val);
}
 
function close() {
    console.log("Closing WebSocket...");
    ws.send('close');
    ws.close();
}

登入後複製