WebSocket 기술에 대한 간단한 설명

WebSocket은 H5에 추가된 통신 프로토콜로 이 프로토콜은 클라이언트와 서버 간의 데이터 상호작용을 더욱 간단하게 하고 서버가 클라이언트에게 주동적으로 데이터를 전송할 수 있도록 한다.WebSocket API에서 브라우저와 서버는 악수를 한 번만 하면 지속적인 연결을 만들고 양방향 데이터 전송을 할 수 있다.현재 모두들 aax 기술로 데이터 상호작용을 하고 있지만 aax 기술로 브라우저는 데이터를 한 번 얻을 때마다 http 요청을 보내서 서버에 데이터를 받아야 한다. 이런 전통적인 모델에서 분명히 많은 단점이 있다. 예를 들어 브라우저가 보내는 http 요청은 비교적 긴 요청 헤더를 포함할 수 있고 진정으로 효과적인 데이터는 일부분일 수 있기 때문에 대역폭 자원을 크게 낭비했다.브라우저가 자바스크립트를 통해 서버에 웹소켓 연결을 요청하면 클라이언트와 서버 측은 TCP 연결을 통해 직접 데이터를 교환할 수 있습니다. 이것도 많은 사람들이 즐겨 보는 것이라고 생각합니다.
다음은 연결의 URL을 지정하는 첫 번째 매개 변수인 URL을 만드는 WebSocket 대상입니다.두 번째 매개 변수 프로토콜은 선택할 수 있으며, 받아들일 수 있는 하위 프로토콜을 지정합니다

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

위 코드를 사용하여 Socket 대상을 만들면readyState라는 읽기 전용 속성을 볼 수 있습니다. 현재 연결 상태를 나타냅니다. 0 - 연결이 설정되지 않았음을 나타냅니다.1 - 연결이 설정되어 통신할 수 있음을 나타냅니다.2 - 연결이 닫히고 있음을 나타냅니다.3 - 연결이 닫혔거나 연결이 열리지 않음을 나타냅니다.
다음은 WebSocket 이벤트를 살펴보겠습니다.

open		 
message		 
error		 
close		 

연결을 사용하여 데이터를 보내려면 Socket을 호출해야 합니다.send() 메서드는 데이터를 보내고 연결을 닫으면 Socket입니다.close()
클라이언트와 서버 둘 사이의 연결을 구축하기 위해 클라이언트는 먼저 서버에 http 요청을 한다. 이 요청은 일반적인 http 요청이 아니라 추가 헤더 정보를 포함한다. 그 중에서'Upgrade: WebSocket'은 이것은 프로토콜 업그레이드를 신청하는 HTTP 요청이다. 이렇게 하면 둘 사이에 연결을 구축하고 인위적으로 끊어지지 않으면 계속 연결을 한다.
브라우저가 WebSocket을 지원하는지 테스트해 보십시오. 예:

 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!");
            }
         }

<div id="sse">
    <a href="javascript:WebSocketTest()">  WebSocket</a>
</div>