WebSockets-연결 열기

클라이언트와 서버간에 연결이 설정되면 웹 소켓 인스턴스에서 열기 이벤트가 발생합니다. 클라이언트와 서버 간의 초기 핸드 셰이크라고합니다.

연결이 설정되면 발생하는 이벤트를 onopen. 웹 소켓 연결을 만드는 것은 정말 간단합니다. 당신이해야 할 일은WebSocket constructor 서버의 URL을 전달하십시오.

다음 코드는 웹 소켓 연결을 만드는 데 사용됩니다-

// Create a new WebSocket.
var socket = new WebSocket('ws://echo.websocket.org');

연결이 설정되면 웹 소켓 인스턴스에서 열기 이벤트가 발생합니다.

onopen 첫 번째 거래로 이어진 클라이언트와 서버 간의 초기 핸드 셰이크를 말하며 웹 애플리케이션이 데이터를 전송할 준비가되었습니다.

다음 코드 조각은 웹 소켓 프로토콜의 연결 열기를 설명합니다.

socket.onopen = function(event) {
   console.log(“Connection established”);
   // Display user friendly messages for the successful establishment of connection
   var.label = document.getElementById(“status”);
   label.innerHTML = ”Connection established”;
}

웹 소켓 연결이 설정되기를 기다리는 사용자에게 적절한 피드백을 제공하는 것이 좋습니다. 그러나 웹 소켓 연결은 비교적 빠릅니다.

설정된 웹 소켓 연결 데모는 주어진 URL에 문서화되어 있습니다. https://www.websocket.org/echo.html

연결 설정 및 사용자에 대한 응답의 스냅 샷은 다음과 같습니다.

개방 상태를 설정하면 연결이 종료 될 때까지 전이중 통신 및 메시지 전송이 허용됩니다.

예

클라이언트 -HTML5 파일을 빌드합니다.

<!DOCTYPE html>
<html>
   <meta charset = "utf-8" />
   <title>WebSocket Test</title>

   <script language = "javascript" type = "text/javascript">
      var wsUri = "ws://echo.websocket.org/";
      var output;
	
      function init() {
         output = document.getElementById("output");
         testWebSocket();
      }
	
      function testWebSocket() {
         websocket = new WebSocket(wsUri);
			
         websocket.onopen = function(evt) {
            onOpen(evt)
         };
      }
	
      function onOpen(evt) {
         writeToScreen("CONNECTED");
      }
	
      window.addEventListener("load", init, false);
   
   </script>

   <h2>WebSocket Test</h2>
   <div id = "output"></div>

</html>

출력은 다음과 같습니다.

위의 HTML5 및 JavaScript 파일은 웹 소켓의 두 가지 이벤트의 구현을 보여줍니다.

onLoad JavaScript 객체 생성 및 연결 초기화에 도움이됩니다.
onOpen 서버와의 연결을 설정하고 상태도 전송합니다.