HTML5의 WebSocket에 대해 알아보세요.

HTML5의 WebSocket 알아보기

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

1. HTML5의 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. HTML5에서 WebSocket API 사용

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

코드는 다음과 같습니다.

// 创建一个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()
};

위의 초기화 스니펫을 살펴보겠습니다. 매개변수는 URL이고 ws는 WebSocket 프로토콜을 나타냅니다. onopen, onclose 및 onmessage 메소드는 이벤트를 Socket 인스턴스에 연결합니다. 각 메서드는 Socket의 상태를 나타내는 이벤트를 제공합니다.

onmessage 이벤트는 메시지의 본문 부분을 포함할 수 있는 데이터 속성을 제공합니다. 메시지의 본문 부분은 더 많은 데이터를 전송하기 위해 직렬화/역직렬화할 수 있는 문자열이어야 합니다.

WebSocket의 구문은 매우 간단하고 WebSocket을 사용하는 것도 매우 쉽습니다...클라이언트가 WebSocket을 지원하지 않는 한. IE 브라우저는 현재 WebSocket 통신을 지원하지 않습니다. 클라이언트가 WebSocket 통신을 지원하지 않는 경우 사용할 수 있는 몇 가지 대체 옵션이 있습니다.

Flash 기술 - Flash는 간단한 대체 기능을 제공할 수 있습니다. Flash 사용의 가장 분명한 단점은 모든 클라이언트에 Flash가 설치되어 있지 않으며 iPhone/iPad와 같은 일부 클라이언트는 Flash를 지원하지 않는다는 것입니다.

AJAX 롱 폴링 기술 - AJAX 롱 폴링을 사용하여 WebSocket을 시뮬레이션하는 것은 한동안 업계에서 사용되어 왔습니다. 이는 실행 가능한 기술이지만 전송되는 메시지를 최적화하지 않습니다. 즉, 솔루션이지만 최고의 기술 솔루션은 아닙니다.

IE 등 현재의 브라우저는 WebSocket을 지원하지 않는데, 서버측에서 WebSocket 이벤트 처리, 반환 전송, 통합 API를 제공해야 한다면 어떻게 해야 할까요? 다행히 Guillermo Rauch는 Socket.IO 기술을 만들었습니다.

3. Socket.IO가 포함된 WebSocket

Socket.IO는 LearnBoost의 최고 기술 책임자이자 LearnBoost Labs의 최고 과학자인 Guillermo Rauch가 만든 WebSocket API입니다. Socket.IO는 감지 기능을 사용하여 WebSocket 연결, AJAX 롱 폴링 연결 또는 Flash 등을 설정할지 여부를 결정합니다. 실시간 애플리케이션을 빠르게 생성할 수 있습니다. Socket.IO는 클라이언트 API와 매우 유사한 NodeJS API도 제공합니다.

[관련 추천]

1. 무료 h5 온라인 동영상 튜토리얼

HTML5 정식 버전 매뉴얼

3. php.cn 원본 html5 동영상 튜토리얼

4. h5Canvas로 별 5개짜리 붉은 깃발을 그리는 방법의 예