JavaScript 및 WebSocket: 효율적인 실시간 데이터 수집 시스템 만들기

JavaScript 및 WebSocket: 효율적인 실시간 데이터 수집 시스템 만들기

최신 웹 애플리케이션에서 실시간 데이터 처리가 점점 더 보편화되고 있습니다. 임의의 실시간 데이터를 전송하려면 지연을 피해야 하므로 효율적인 통신 방법을 사용해야 합니다. 이 기사에서는 JavaScript와 WebSocket을 사용하여 효율적인 실시간 데이터 수집 시스템을 구축하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

WebSocket은 클라이언트와 서버 간의 장기간 연결을 허용하는 전이중 프로토콜입니다. 필요한 데이터 양이 많은 경우 WebSocket은 HTTP 통신 전송을 사용하는 것보다 이점이 있는 경우가 많습니다. 또한 WebSocket 프로토콜은 HTTP 프로토콜과 동시에 사용되므로 기존 웹 애플리케이션에 쉽게 통합할 수 있습니다.

기본 구현 예는 다음과 같습니다.

• 먼저 WebSocket 개체를 만듭니다.

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

이렇게 하면 An이 생성됩니다. 서버와 장기간 연결을 설정하는 온라인 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 전송에 비해 효율적이고 안정적인 전송을 보장할 수 있기 때문에 효과적인 선택입니다.

Client

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();
}

• 클라이언트 코드는 위에 표시되며 이전에 생성된 서버 WebSocket에 연결됩니다. 클라이언트가 메시지를 받으면 메시지 내용을 표시합니다. "보내기" 함수는 텍스트 필드 값을 수신하여 WebSocket 서버의 모든 클라이언트에 보냅니다. "close" 기능은 클라이언트 WebSocket 연결을 닫습니다.

이 문서에서는 기본 JavaScript 및 WebSocket 구현 예제와 전체 서버 및 클라이언트 예제 코드를 제공합니다. 누구나 WebSocket을 사용하여 자신만의 실시간 데이터 수집 애플리케이션 구축을 시작할 수 있습니다.

위 내용은 JavaScript 및 WebSocket: 효율적인 실시간 데이터 수집 시스템 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!