JavaScript 및 WebSocket: 효율적인 실시간 데이터 배포 시스템 만들기-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2023-12-18 12:49:11

원래의

807명이 탐색했습니다.

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

현재 실시간 데이터 배포는 기업의 가장 중요한 비즈니스 요구 사항 중 하나가 되었으며 JavaScript 및 WebSocket은 효율적인 실시간 데이터 배포를 달성하는 강력한 도구가 되었습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 데이터 배포 시스템을 구축하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 웹소켓이란?

WebSocket을 소개하기 전에 먼저 HTTP 프로토콜을 이해해야 합니다. HTTP 프로토콜은 현재 가장 일반적으로 사용되는 애플리케이션 계층 프로토콜입니다. 요청과 응답으로 구성되지만 실시간 통신의 경우에는 "요청-응답" 모델 프로토콜이라는 결함이 있습니다.

HTTP 프로토콜에서는 클라이언트가 데이터를 얻기 위해 지속적으로 서버에 요청을 해야 하지만 실시간 데이터 배포를 위해서는 이 방법이 당연히 불가능합니다. 따라서 WebSocket이 탄생했습니다.

WebSocket은 단일 TCP 연결을 통한 전이중 통신을 위한 프로토콜로, 핸드셰이킹에는 HTTP 프로토콜을 사용하고 데이터 전송에는 TCP 소켓을 사용합니다. WebSocket 프로토콜은 실시간 통신에 필요한 저지연 문제를 해결할 뿐만 아니라 서버 푸시 데이터에 필요한 고효율 문제도 해결합니다.

2. JavaScript 및 WebSocket을 사용하여 실시간 데이터 배포

WebSocket 연결 만들기

JavaScript의 WebSocket 개체를 사용하여 WebSocket 연결을 만듭니다. 예는 다음과 같습니다.

var socket = new WebSocket('ws://localhost:8080');

로그인 후 복사

WebSocket 이벤트 수신

WebSocket 연결의 다양한 이벤트를 처리하려면 onopen, onmessage, onerror 및 onclose 이벤트를 포함한 일부 WebSocket 이벤트를 수신해야 합니다. 아래와 같이:

socket.onopen = function () {
    console.log('WebSocket连接已建立');
};

socket.onmessage = function (event) {
    console.log('收到消息: ' + event.data);
};

socket.onerror = function (error) {
    console.log('WebSocket错误: ' + error);
};

socket.onclose = function (event) {
    console.log('WebSocket连接已关闭: ' + event.code + ' ' + event.reason);
};

로그인 후 복사

WebSocket 연결이 성공적으로 설정되면 onopen 이벤트가 트리거되고, 새 메시지가 수신되면 onmessage 이벤트가 트리거됩니다. WebSocket 연결에 오류가 발생하면 onerror 이벤트가 발생합니다. WebSocket 연결이 닫히면 onclose 이벤트가 트리거됩니다.

WebSocket 메시지 보내기

JavaScript의 WebSocket 개체를 사용하여 서버에 메시지를 보냅니다. 예는 다음과 같습니다.

socket.send('Hello, WebSocket!');

로그인 후 복사

Close WebSocket 연결

close() 메서드를 사용하여 WebSocket 연결을 닫을 수 있습니다. 아래와 같이:

socket.close();

로그인 후 복사

3. 샘플 코드

Node.js의 WebSocket 라이브러리를 사용하여 WebSocket 서버 구현:

const WebSocket = require('ws');

const wss = new WebSocket.Server({
  port: 8080,
});

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('收到消息: %s', message);
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
        console.log('消息已广播: %s', message);
      }
    });
  });

  ws.on('close', function () {
    console.log('WebSocket连接关闭');
  });
});

로그인 후 복사

HTML 및 JavaScript를 사용하여 WebSocket 클라이언트 구현:

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket实例</title>
  <meta charset="utf-8">
</head>
<body>
  <input type="text" id="message">
  <button onclick="send()">发送</button>
  <ul id="messages"></ul>
</body>
<script>
  var socket = new WebSocket('ws://localhost:8080');

  socket.onopen = function () {
    console.log('WebSocket连接已建立');
  };

  socket.onmessage = function (event) {
    console.log('收到消息: ' + event.data);
    var li = document.createElement("li");
    li.textContent = event.data;
    document.getElementById("messages").appendChild(li);
  };

  socket.onerror = function (error) {
    console.log('WebSocket错误: ' + error);
  };

  socket.onclose = function (event) {
    console.log('WebSocket连接已关闭: ' + event.code + ' ' + event.reason);
  };

  function send() {
    var message = document.getElementById("message").value;
    socket.send(message);
  }
</script>
</html>

로그인 후 복사

4. 요약

JavaScript 및 WebSocket 기술을 통해 효율적인 실시간 데이터 분산 시스템을 구축할 수 있습니다. WebSocket 프로토콜은 TCP 연결을 사용하여 전이중 통신을 달성하므로 HTTP 프로토콜의 비효율성 문제를 해결할 수 있습니다. WebSocket 연결을 통해 메시지를 보내고 받으면 서버에서 클라이언트로 실시간 데이터 배포가 쉬워집니다. 이 기사에서는 자세한 코드 예제를 제공하므로 독자에게 도움이 되기를 바랍니다.

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