HTML5 웹 소켓

HTML5 웹 소켓은 단일 TCP 연결 프로토콜을 통해 전이중 (full-duplex) 통신에 의해 제공되는 시작이다.

웹 소켓 API에있어서, 브라우저와 서버는 브라우저와 패스트 트랙의 형성에 서버 사이 그리고, 핸드 쉐이크 동작을 수행한다. 당신은 서로간에 직접 데이터를 전송할 수 있습니다.

브라우저가 웹 소켓 연결을 자바 스크립트 요청을 통해 서버에 전송하고 연결이 설정된 클라이언트와 서버는 TCP를 통해 데이터를 교환하는 데에 직접 연결될 수있다.

웹 소켓 연결을 얻을 때, 당신은송신 () 메소드를 통해 서버에 데이터를 보낼 수 있고,의 onMessage이벤트 서버에 의해 반환 된 데이터를 수신 할 수 있습니다.

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

var Socket = new WebSocket(url, [protocal] );

위의 코드 첫 번째 매개 변수의 URL은 URL 연결을 지정합니다. 두 번째 매개 변수는 허용 서브 프로토콜을 지정 옵션 프로토콜입니다.

웹 소켓 속성

이러한 속성의 웹 소켓 객체입니다. 우리는 소켓 객체를 생성하는 위의 코드를 사용한다고 가정

재산	기술
Socket.readyState	읽기 전용readyState의 연결 상태는 다음과 같은 값을 가질 수 있습니다 나타냅니다 속성 : 0 - 연결이 설정되지 않았 음을 나타냅니다. 1 - 연결, 그것은 통신 할 수있는 설정을 나타냅니다. 2 - 연결이 닫히는 것을 나타냅니다. 3 - 연결이 종료되었거나 연결을 열 수 없음을 나타냅니다.
Socket.bufferedAmount	읽기 전용 전송 대기 큐에 배치됩니다 ()bufferedAmount 전송 된 속성,하지만 아직 UTF-8 텍스트 바이트를 발행하지 않았습니다.

재산

기술

Socket.readyState

읽기 전용readyState의 연결 상태는 다음과 같은 값을 가질 수 있습니다 나타냅니다 속성 :

0 - 연결이 설정되지 않았 음을 나타냅니다.
1 - 연결, 그것은 통신 할 수있는 설정을 나타냅니다.
2 - 연결이 닫히는 것을 나타냅니다.
3 - 연결이 종료되었거나 연결을 열 수 없음을 나타냅니다.

Socket.bufferedAmount

읽기 전용 전송 대기 큐에 배치됩니다 ()bufferedAmount 전송 된 속성,하지만 아직 UTF-8 텍스트 바이트를 발행하지 않았습니다.

웹 소켓 이벤트

다음은 이벤트 웹 소켓 객체입니다. 우리는 소켓 객체를 생성하는 위의 코드를 사용한다고 가정

행사	이벤트 핸들러	기술
열린	Socket.onopen	연결이 설정 될 때 트리거
메시지	Socket.onmessage	클라이언트는 트리거 서버 데이터를 수신하면
오류	Socket.onerror	오류가 통신을 발생 때 트리거됩니다
가까운	Socket.onclose	연결이 종료 될 때 트리거

웹 소켓 방법

여기에 방법의 웹 소켓 객체입니다. 우리는 소켓 객체를 생성하는 위의 코드를 사용한다고 가정

방법	기술
Socket.send ()	데이터를 전송하기 위해 연결을 사용
Socket.close ()	닫기 연결

웹 소켓 인스턴스

자연 웹 소켓 프로토콜은 TCP 기반의 프로토콜이다.

이것은 애플리케이션 프로토콜임을 나타내는하십시오 웹 소켓 연결을 구축하기 위해 클라이언트 브라우저에서 추가 헤더 정보 "웹 소켓 업그레이드"는 상기 HTTP 서버가 먼저 요청 일반적인 HTTP 요청은 추가적인 헤더 정보를 포함하도록 요청하고자 개시 HTTP 요청을 업그레이드 서버는 추가적인 헤더 정보는 다시 클라이언트, 웹 소켓 연결 클라이언트에게 응답 메시지를 생성하고 서버가 설정된 파싱 양측 수있는 정보의 연결 채널없는 전송하고,이 연결을 통해 이 연결을 종료하기 위해 클라이언트 또는 서버 측 활성 자까지 지속됩니다.

클라이언트 HTML 및 자바 스크립트

크롬, 모질라, 오페라와 사파리 : 현재, 대부분의 브라우저는 웹 소켓 () 인터페이스를 지원, 다음과 같은 브라우저의 예제를 시도 할 수 있습니다.

w3big_websocket.html 파일 내용

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>本教程(w3big.com)</title>
	
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
				
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
				
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
		
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

설치 pywebsocket

위의 프로그램을 실행하기 전에, 우리는 지원 웹 소켓 서비스를 만들어야합니다. 에서 pywebsocket의 다운로드 다운로드 mod_pywebsocket 또는 사용의 자식 명령

git clone https://github.com/google/pywebsocket.git

mod_pywebsocket 지원이 필요 파이썬 환경

다음과 같이 아파치 HTTP 웹 소켓 확장 mod_pywebsocket, 설치 단계는 다음과 같습니다

다운로드 한 파일의 압축을 풉니 다.
pywebsocket 디렉토리를 입력합니다.

실행

$ python setup.py build
$ sudo python setup.py install

설명서를 참조하십시오 :
```
$ pydoc mod_pywebsocket
```

오픈 서비스

pywebsocket / mod_pywebsocket 디렉토리에서 다음 명령을 실행합니다 :

$ sudo python standalone.py -p 9998 -w ../example/

위의 명령은, 서비스 포트 번호 9998을 열 수있는 디렉토리 핸들러 echo_wsh.py을 설정 -w를 사용합니다.

이제 우리는 이전에 크롬 브라우저에 생성 w3big_websocket.html 파일을 열 수 있습니다. 브라우저가 웹 소켓 ()를 지원하는 경우 "실행 웹 소켓은"당신이 전체 과정을 팝업 창, 프로세스 지프 데모의 각 단계를 볼 수 있습니다 클릭 :

우리가 서비스를 중지하면, 그것은 "연결이 닫혀 ...."나타납니다

이전 : HTML (5) 코드 사양

HTML 코스

HTML5

HTML 미디어

HTML 참조 설명서