HTML5 WebSocket 이해

HTML5의 WebSocket에 대해 알아보세요

HTML5 사양에서 제가 가장 좋아하는 웹 기술은 빠르게 인기를 얻고 있는 WebSocket API입니다. WebSocket은 지난 몇 년 동안 우리가 사용해 온 Ajax 기술에 대한 환영받는 대안을 제공합니다. 이 새로운 API는 간단한 구문을 사용하여 클라이언트에서 서버로 메시지를 효율적으로 푸시하는 방법을 제공합니다. HTML5의 WebSocket API를 살펴보겠습니다. 이는 클라이언트 측과 서버 측 모두에서 사용할 수 있습니다. 그리고 Socket.IO라는 뛰어난 타사 API가 있습니다.

1. WebSocket API란 무엇인가요?
WebSocket API는 차세대 클라이언트-서버 비동기 통신 방식입니다. 이 통신은 ws 또는 wss 프로토콜을 사용하여 단일 TCP 소켓을 대체하며 모든 클라이언트 및 서버 프로그램에서 사용할 수 있습니다. WebSocket은 현재 W3C에 의해 표준화되었습니다. WebSocket은 이미 Firefox 4, Chrome 4, Opera 10.70 및 Safari 5와 같은 브라우저에서 지원됩니다.

WebSocket API의 가장 큰 장점은 서버와 클라이언트가 주어진 시간 범위 내에서 언제든지 서로에게 정보를 푸시할 수 있다는 것입니다. WebSocket은 Ajax(또는 XHR) 통신에만 국한되지 않습니다. Ajax 기술에서는 클라이언트가 요청을 시작해야 하고 WebSocket 서버와 클라이언트가 서로 정보를 푸시할 수 있기 때문입니다.

Ajax 기술의 영리한 점은 이를 사용하도록 설계된 방법이 없다는 것입니다. WebSocket은 지정된 대상에 대해 생성되며 양방향으로 메시지를 푸시하는 데 사용됩니다.

2. WebSocket API 사용
각 서버 측 언어에는 자체 API가 있으므로 클라이언트 측 API에만 집중하세요. 아래 코드 조각은 연결을 열고, 연결에 대한 이벤트 리스너를 생성하고, 연결을 끊고, 메시지 시간을 설정하고, 메시지를 서버로 다시 보내고, 연결을 닫습니다.
CODE:

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); 
// 打开Socket 
socket.onopen = function(event) { 
  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!'); 
  // 监听消息
  socket.onmessage = function(event) { 
    console.log('Client received a message',event); 
  }; 
  // 监听Socket的关闭
  socket.onclose = function(event) { 
    console.log('Client notified socket has closed',event); 
  }; 
  // 关闭Socket.... 
  //socket.close() 
};

WebSocket은 HTML5가 제공하기 시작한 단일 TCP 연결에서 전이중 통신을 위한 프로토콜입니다.
WebSocket API에서는 브라우저와 서버가 핸드셰이크 작업만 수행하면 되며, 그러면 브라우저와 서버 사이에 빠른 채널이 형성됩니다. 데이터는 둘 사이에서 직접 전송될 수 있습니다.

브라우저는 JavaScript를 통해 WebSocket 연결을 설정하라는 요청을 서버에 보냅니다. 연결이 설정된 후 클라이언트와 서버는 TCP 연결을 통해 직접 데이터를 교환할 수 있습니다.

웹 소켓 연결을 얻은 후 send() 메서드를 통해 서버에 데이터를 보내고 onmessage 이벤트를 통해 서버에서 반환된 데이터를 수락할 수 있습니다.

다음 API는 WebSocket 객체를 생성하는 데 사용됩니다.

var 소켓 = new WebSocket(url,[protocol]);
위 코드의 첫 번째 매개변수 url은 링크의 URL을 지정합니다. 두 번째 매개변수 프로토콜은 선택사항이며 허용되는 하위 프로토콜을 지정합니다.

WebSocket 속성

다음은 WebSocket 객체의 속성입니다. 위 코드를 사용하여 소켓 개체를 생성한다고 가정합니다.
Socket.readyState 읽기 전용 속성인 ReadyState는 연결 상태를 나타내며 다음 값이 될 수 있습니다.
  1. 0 - 연결이 아직 설정되지 않았음을 나타냅니다.
2. 1-링크가 설정되어 접속할 수 있음을 나타냅니다.
3. 2 - 연결이 종료되고 있음을 나타냅니다.
4. 3 - 연결이 닫혔거나 연결을 열 수 없음을 나타냅니다.
Socket.bufferedAmount 읽기 전용 ButteredAmount send()가 대기열에 배치되어 전송을 기다리고 있지만 아직 전송되지 않은 UTF-8 텍스트 바이트 수입니다.

WebSocket 이벤트
다음은 WebSocket 객체와 관련된 이벤트입니다. 생성된 소켓을 사용한다고 가정합니다.
이벤트: open                                                                                                                                                                        at : 연결이 설정될 때 트리거됩니다. 서버의 데이터입니다. 통신 오류가 발생할 때 발생합니다. 연결이 종료될 때 발생합니다.

WebSocket 방법
다음은 다음과 같습니다. WebSocket 개체의 관련 메서드. 위의 코드를 사용하여 소켓 개체를 생성한다고 가정합니다.

메서드: Socket.send()           Socket.close()
설명: 연결을 사용하여 데이터 전송                                                                               

위 내용은 HTML5 WebSocket 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!