HTML5-WebSockets

WebSockets는 단일 소켓에서 작동하고 HTML 5 호환 브라우저에서 JavaScript 인터페이스를 통해 노출되는 웹 애플리케이션을위한 차세대 양방향 통신 기술입니다.

웹 서버와 웹 소켓 연결이 이루어지면 브라우저에서 서버로 데이터를 보낼 수 있습니다. send() 방법으로 서버에서 브라우저로 데이터를 수신합니다. onmessage 이벤트 핸들러.

다음은 새로운 WebSocket 객체를 생성하는 API입니다.

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

여기서 첫 번째 인수 인 url은 연결할 URL을 지정합니다. 두 번째 속성 인 protocol은 선택 사항이며 존재하는 경우 연결이 성공하기 위해 서버가 지원해야하는 하위 프로토콜을 지정합니다.

WebSocket 속성

다음은 WebSocket 객체의 속성입니다. 위에서 언급 한대로 Socket 객체를 만들었다 고 가정합니다.

Sr. 아니.	속성 및 설명
1	Socket.readyState readonly 속성 readyState는 연결 상태를 나타냅니다. 다음 값을 가질 수 있습니다- 값 0은 연결이 아직 설정되지 않았 음을 나타냅니다. 값 1은 연결이 설정되고 통신이 가능함을 나타냅니다. 값 2는 연결이 종료 핸드 셰이크를 거치고 있음을 나타냅니다. 값 3은 연결이 닫혔거나 열 수 없음을 나타냅니다.
2	Socket.bufferedAmount readonly 속성 bufferedAmount는 send () 메소드를 사용하여 큐에 넣은 UTF-8 텍스트의 바이트 수를 나타냅니다.

WebSocket 이벤트

다음은 WebSocket 객체와 관련된 이벤트입니다. 위에서 언급 한대로 Socket 객체를 만들었다 고 가정합니다.

행사	이벤트 핸들러	기술
열다	Socket.onopen	이 이벤트는 소켓 연결이 설정되었을 때 발생합니다.
메시지	Socket.onmessage	이 이벤트는 클라이언트가 서버에서 데이터를받을 때 발생합니다.
오류	Socket.onerror	이 이벤트는 통신에 오류가있을 때 발생합니다.
닫기	Socket.onclose	이 이벤트는 연결이 닫힐 때 발생합니다.

WebSocket 메서드

다음은 WebSocket 객체와 관련된 메서드입니다. 위에서 언급 한대로 Socket 객체를 만들었다 고 가정합니다.

Sr. 아니.	방법 및 설명
1	Socket.send() send (data) 메서드는 연결을 사용하여 데이터를 전송합니다.
2	Socket.close() close () 메서드는 기존 연결을 종료하는 데 사용됩니다.

WebSocket 예

WebSocket은 클라이언트와 서버 사이의 표준 양방향 TCP 소켓입니다. 소켓은 HTTP 연결로 시작하고 HTTP 핸드 셰이크 후에 TCP 소켓으로 "업그레이드"합니다. 핸드 셰이크 후 양쪽 모두 데이터를 보낼 수 있습니다.

클라이언트 측 HTML 및 JavaScript 코드

이 튜토리얼을 작성하는 현재 WebSocket () 인터페이스를 지원하는 웹 브라우저는 거의 없습니다. 최신 버전의 Chrome, Mozilla, Opera 및 Safari에서 다음 예제를 시도해 볼 수 있습니다.

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

pywebsocket 설치

위의 클라이언트 프로그램을 테스트하기 전에 WebSocket을 지원하는 서버가 필요합니다. Apache HTTP Server 용 웹 소켓 확장을 제공하는 것을 목표로하는 pywebsocket 에서 mod_pywebsocket-xxxtar.gz를 다운로드 하고 다음 단계에 따라 설치하십시오.

다운로드 한 파일의 압축을 풀고 압축을 풉니 다.
안으로 들어가 pywebsocket-x.x.x/src/ 예배 규칙서.
$ python setup.py 빌드
$ sudo python setup.py 설치
그런 다음 문서 읽기-
- $ pydoc mod_pywebsocket

그러면 파이썬 환경에 설치됩니다.

서버 시작

다음으로 이동 pywebsocket-x.x.x/src/mod_pywebsocket 폴더를 열고 다음 명령을 실행하십시오-

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

그러면 9998 포트에서 수신 대기하는 서버가 시작되고 handlers echo_wsh.py가있는 -w 옵션으로 지정된 디렉토리.

이제 Chrome 브라우저를 사용하여 처음에 만든 html 파일을 엽니 다. 브라우저가 WebSocket ()을 지원하는 경우 브라우저가 WebSocket을 지원한다는 경고가 표시되고 마지막으로 "WebSocket 실행"을 클릭하면 서버 스크립트에서 보내는 Goodbye 메시지가 표시됩니다.