html5 웹소켓 예제

JSON을 사용하여 합리적으로 복잡한 데이터를 서버로 보내는 것이 편리합니다. 예를 들어 채팅 프로그램은 JSON 캡슐화된 데이터의 패킷을 사용하여 구현된 프로토콜을 사용하여 서버와 상호 작용할 수 있습니다. 이는 단일 서버가 여러 WebSocket 하위 프로토콜을 구현할 수 있도록 서버에서 구현한 하위 프로토콜을 나타냅니다(예: 한 서버가 지정된 프로토콜에 따라 서로 다른 유형의 상호 작용을 처리할 수 있도록 할 수 있음). 프로토콜 문자열을 지정하지 않으면 빈 문자열이 가정됩니다. 참고: 이 문서의 예제 조각은 WebSocket 채팅 클라이언트/서버 샘플에서 가져옵니다. 코드를 본 다음 직접 예제를 사용해 보십시오. 그래서 우리는 몇 가지 작업을 추가하는 작은 양식으로 기본 목록을 만들 것입니다. 나는 이미 할 일 목록 예제 (HTML5 오프라인 웹 응용 프로그램 예제 참조)와 함께 기사를 만들었기 때문에 일부 자바 스크립트 코드를 재사용합니다. 반환시, 예제소켓.readyState 연결. 연결이 데이터를 전송할 준비가 되면 readyState가 OPEN이 됩니다. WebSocket을 설정하면 HTTP 업그레이드 메커니즘이 있으므로 웹 서버를 ws://www.example.com 또는 wss://www.example.com 처리할 때 프로토콜 업그레이드 요청이 암시적입니다.

다음은 html5 웹 소켓 http://www.codeproject.com/Articles/890092/Low-latency-html-WebSocket-Server-to-stream-live-a 실험에서 ajax 폴링 및 WebSocket의 성능을 자세히 비교한 Websocket.org 다른 샘플입니다. 이 실험의 일환으로 두 개의 웹 페이지를 만들었는데, 한 페이지는 정기적인 AJAX 폴링을 통해 서버와 통신하고 다른 웹소켓은 사용했습니다. 각 HTTP 요청/응답 헤더는 약 871바이트인 반면 WebSocket 프레임의 각 메시지는 2바이트에 불과했습니다. 아래는 ws 모듈을 사용하는 간단한 Node.js WebSocket 서버의 예입니다. 당신은 크롬, 모질라, 오페라와 사파리의 최신 버전으로 예를 다음과 같은 시도 할 수 있습니다. 예를 들어 컨트롤에 대해 이벤트를 듣거나 생성하는지(동시에 둘 다 일 수 있음) 이벤트 생성 및 소비를 쉽게 처리할 수 있는지 정의할 수 있습니다. 동시에 나는 사용할 수있는 풍부한 UI 구성 요소를 환영합니다.