패키지 웹 소켓 (수립 링크, 활성 닫기)

I. 서론

　　온라인 채팅 기능에서 수행되는 최근의 프로젝트는, 우리는 때 대화 소켓에 대한 링크를 만들려고합니다. 채팅은 한 부분뿐만 아니라 그것의 부족 때문에 일부 글로벌 메시지 알림 수신, 따라서 링크 소켓을 설정해야합니다으로. 소켓 패키지의 생각하는 프로젝트에 하나의 소켓을 사용하여, 당신은 프로젝트에서 호출 할 수 있습니다.

socke.io의 직접 사용하는 것입니다 중고 웹 소켓 전에 하나,하지만,이를 계속하지 왜이 반 이해, 조금 기억도 빈약하다 잊어 버렸습니다. 구체적으로 소개하고 주요 부분을 이해하는 도움을 쓰기 쓰지 설명한다.

二, HTML5 웹 소켓

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

2.1하는 웹 소켓 인스턴스를 생성

　　새로운 인스턴스 웹 소켓을 만들 수있는 생성자로 웹 소켓 객체입니다.

VAR 소켓 = 새로운 웹 소켓 (URL을 [프로토콜]);

　　코드 위 웹 소켓은 제 1 파라미터가 URL은 URL 연결을 지정하는 상기 객체를 생성하는 데 사용된다. 두번째 매개 변수는 선택 프로토콜은, 하위 프로토콜 허용 특정된다. 일반적으로, 특정 요구 사항이 없습니다, 당신은 단지 URL을 쓸 수 있습니다.

2.2 웹 소켓 속성

    例如：var ws = new WebSocket('ws://1xx.xxx.xxx.xxx:8080/ws'); 또한 wensocket 속성 인 다음과 같이 생성 된 소켓 객체를 출력합니다.

　　binaryType : 송신 데이터는 물방울 형태에서, "얼룩"의 경우의 송신 데이터의 종류 Arraybuffer가 "블로 브"// 리턴 웹 소켓 형 이진 데이터 송신 연결은 "ArrayBuffer"을 
　　bufferedAmount : 0 / / 반환이 송신 () 메소드는 큐에 아직 네트워크에서의 데이터의 바이트 수로 전송되었는지 읽기 전용 속성. 
　　: 확장 "" 
　　으로 onClose : ƒ이 () // 연결이 닫힐 때 트리거 
　　트리거 ƒ () // 통신 오류 : (가)의 OnError 
　　의 onMessage : 때 ƒ (예) // 서버 클라이언트가 트리거 데이터를 수신, 전자 데이터 오브젝트를 수락 
　　으로 onOpen : 연결이 설정 될 때 트리거 ƒ () // 
　　프로토콜을 : ""// 반환 선택한 하위 계약에 대한 서버의 이름, 그것은 개체를 만드는 웹 소켓, 매개 변수입니다 protocols지정된 문자열. 
　　readyState가 : . 1 // 현재 링크 상태에서 WebSocket의 반환 값 
　　URL : "WS : //1xx.xxx.xxx.xxx : 8080 / WS"

모든 목록이 설명하는 속성 : https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

 2.3 웹 소켓 readyState의 속성

　　readyState가 현재 링크 상태 웹 소켓 네 종류의 총을 반환합니다. 특정 프로젝트의 필요에 따라 해당 요구 사항을 작성,이 상태를 활용합니다.

CONNECTING : 0을,이 연결되어있는 것을 의미한다. 
OPEN : 1의 값은 성공적인 연결을 나타냅니다, 통신이 될 수 있습니다. 
CLOSING : 값 2, 그것은 연결이 닫혀 있음을 나타냅니다. 
CLOSED : 3의 값은, 연결이 종료되었음을 나타내는, 또는 연결이 실패 연다.

 2.4 웹 소켓 방식

우리는 다음과 같은 두 가지 방법은 자신의 프로젝트 요구에 따라, 어떤 소켓의 경우에 호출 할 수 있습니다, 위의 코드는 오브젝트 웹 소켓을 만들어 사용하자.

　　ws.send () : 데이터를 전송하는 데 사용, 당신은 같은 Blob 오브젝트로서 다양한 유형의 데이터를 보낼 보낼 수 ArrayBuffer 객체를, 기본 또는 복잡한 데이터 유형;

ws.send ( '메시지' );
 //이 필요로하는 대상을 전송 포맷 변환, 마찬가지로 데이터 수신 
ws.send (JSON.stringify (데이터));

　　ws.close () : 연결을 종료, 사용자가 연결을 종료하기 위해이 방법을 전송하는 이니셔티브를 취할 수 있습니다.

셋째, 패키지 웹 소켓

　　당신은 소켓을 설정하는 페이지 필요성이 JS 파일의 도입, 당신은 프로젝트에 여러 개의 소켓 연결을 만들 수 있습니다, 프로젝트에 socket.js 파일을 정의 할 수 있습니다.

VAR 웹 소켓 = 널 (null) ;
 var에 globalCallback = 널 (null) ; // 받은 외부 데이터를 정의 콜백 함수 

// 초기화 웹 소켓 
기능 initWebSocket (URL) {
   IF ( "는 웹 소켓" 의 창) { 
    웹 소켓 = 새로운 새로운 의 웹 소켓 (URL); //이 소켓 만들기 객체 
    을 console.log (웹 소켓) 
  } 다른 { 
    경고 ( "브라우저가 지원하지 않는 웹 소켓을!" ); 
  } 
  // 개방 
  webSocket.onopen = 함수 () { 
    webSocketOpen (); 
  }; 
  // 받는 사람
  = webSocket.onmessage의 함수 (E) { 
    webSocketOnMessage (E); 
  }; 
  // 근접 
  webSocket.onclose = 함수 () { 
    webSocketClose (); 
  }; 
  // 연결 오류가 발생 콜백 방법 
  webSocket.onerror = 함수 () { 
    콘솔 .LOG ( "는 웹 소켓 연결 오류가 발생했습니다" ); 
  } 
} 

// 트리거 소켓 연결 설정 
기능 webSocketOpen () {
   IF (E === "로그인" ) { 
    데이터 CONST = { 
      형식 : "연결" , 
      토큰 다음 sessionStorage .getItem ("토큰") || "" 
    }; 
    sendSock (데이터, 기능 () {}); 
  } 
  을 console.log ( "는 웹 소켓 연결에 성공" ); 
} 

// 클라이언트가 데이터 서버를 수신 할 때 트리거, 전자 허용되는 데이터 객체 
함수 webSocketOnMessage (E) { 
  CONST 데이터 = JSON.parse (e.data) // 그들의 요구에 수신 된 데이터의 형식에 따라 
  , globalCallback (데이터) // 외주에 의해 정의 된 데이터에 전달 된 수신 데이터는 기능은 필수적이다 . 
  / * 이 함수에서 당신은 프로젝트 요구 사항에 따라 다른 일을 계속해서 쓸 수 있습니다. 수신 된 데이터는 다음 로그인 페이지로 이동, 연결을 종료 할 필요가 사용자 로그인이 실패 여부를 결정하는 경우 예를 들어, 내가 프로젝트에 필요합니다. * / 
} 

// 송신 데이터 
기능 webSocketSend (데이터) { 
  webSocket.send합니다 (JSON.stringify (데이터)) // 이곳에 필요한 데이터 포맷 변환에 따라
} 

// 가까운 소켓 
기능 webSocketClose () {
   //은 내가 내가 소켓을 해제하는 한 알 필요가 있으므로, 소켓의 수를 설정하기 때문에, 그것은 어떤 판단을했다. 
  IF는 ( 
    webSocket.readyState . ===는 1 && 
    webSocket.url === "WS : //1xx.xx.xx.xxx : 8088 / WS" 
  ) { 
    webSocket.close (); // 이 전에, 핵심 문장 내가 쓰기에 잊고, 실제 폐쇄 소켓이 없었다 
    ( "대화 연결이 닫혔습니다"CONSOLE.LOG ); 
  } 
} 


// 다른 장소에 데이터를 보내는 데 사용되는 소켓 함수 호출을 필요로 데이터 수신의 
기능 sendSock (agentData을, 콜백) { 
  globalCallback = 콜백; // 이 콜백 함수는 데이터가 호출 될 때, 다른 곳에서 정의 된 소켓 받는다 이 중요하다 . 
  //다음은 주로 소켓 연결의 계정이 중단 될 수 있습니다에 결정된다, 또는 다른 요인이 항목은 메시지를 재전송 할 수있다. 
  스위치 (webSocket.readyState) {
     // 연결 : 0, 수단이 연결되어 있습니다. 
    케이스 webSocket.CONNECTING : 
      의 setTimeout ( 함수 () { 
        webSocketSend (agentData 콜백) 
      }, 1,000 )
       BREAK ]
     // (가) OPEN 1의 값은 성공적인 연결을 나타내고, 상기 통신 될 수있다. 
    케이스 webSocket.OPEN : 
      webSocketSend (agentData) 
      BREAK ;
     // 폐쇄 : 2 값은, 연결이 종료되는 것을 나타낸다. 
    케이스 webSocket.CLOSING : 
      의 setTimeout ( 함수 () {  
        webSocketSend (agentData 콜백);
      }, 1,000 );
       BREAK ;
     // 닫힌 3의 값은, 연결이 종료되었음을 나타내는, 또는 연결이 실패 연다. 
    케이스 webSocket.CLOSED :
       // 뭔가 할 
      BREAK를 ,
     기본 :
       // 은이 결코이 일이 
      BREAK를 ; 
  } 
} 

//이 소켓 기능을 초기화, 전송 (수신) 기능 데이터 연결 수출의 폐쇄 기능 중 
수출 기본적 { 
  initWebSocket, 
  webSocketClose, 
  sendSock 
};

넷째,이 문서 socketJs의 사용 (주로 소켓 VUE 프로젝트에 캡슐화)

　　내가 소켓을 사용하기보다는 더 많은 페이지를 필요로 프로젝트에 참여하고 있기 때문에, 그래서 그것을이 뷰의 각 인스턴스에 대해 사용할 수 있습니다 그래서, 프로토 타입에 정의되어이 문서에 main.js. 시간에 개별적으로 각 페이지를 소개합니다.

　　코드 main.js 1 부

SocketAPI 가져 오기에서 "./tool/socket" ; // 파일이 패키지 socket.js 찾을 수

 
Vue.prototype.socketApi = SocketAPI을, 이 모든 인스턴스 $ SocketAPI 뷰에서 사용할 수 있도록 //이 프로토 타입에 걸어.

　　(2), VUE 페이지

<템플릿> 
   <DIV>이 페이지 패키지에서 소켓 </ DIV> 
</ 템플릿> 

<스크립트> 
  내보내기 기본 { 
    이름 : "메시지" , 
    데이터 () { 
      반환 { 
        wsUrl : "WS : //172.16.10.140 : 8088 / WS가 " // 소켓 접속 어드레스 정의 
        wsType를"연결 " 
      } 
    } 
    방법 { 
      // 데이터 콜백을 수신하기위한 방법을 함수 복귀 소켓 
      getConfigResult (RES)을 { 
       CONSOLE.LOG (RES); // 복귀 서버 데이터 
      } 
      websocketSend (데이터) { 
        // 데이터가 전송되는 데이터이며,이 페이지로부터 데이터를 수신하기위한 콜백 함수 this.getConfigResult 소켓을 반환. 
        //그것은 필수입니다! 나는 어떻게에 데이터를 다시 얻으려면, 몽골이 작성하지 않은 시작합니다. 
        이 본 .socketApi.sendSock (데이터, 이 본 .getConfigResult); 
      } 
    } 
    beforeRouteLeave (행에서 다음) { 
      // 페이지 활성 근접 소켓 떠날 때 
      이 본 .socketApi.webSocketClose () 
      다음 (); 
    } , 
    
    작성 () { 
      // 소켓 연결 설정 
      은이 .socketApi.initWebSocket ( 다음은이 .wsUrl);
       // 데이터 좋은 데이터 형식의 토론과 후면 
      CONST 데이터 = { 
        유형 : 다음은이 .wsType, 
        MSG : "말"을 , 
      } 
      이 본 .websocketSend (데이터); 
    } 
  };
</ script> 

<스타일 LANG = "SCS들"스코프> 
</ 스타일>

다섯째, 문제가 발생

하나는, 아직 상태가 연결 : 웹 소켓은 '웹 소켓'에 '보내기'를 실행하지 못했습니다

 

　　처음 엔에서 바로 소켓을 초기화하고, 과거에 메시지를 보낼 수 없습니다. 웹 소켓 인스턴스화 (나는 그 설립의 성공을 생각), 그들이 바로 데이터를 전송이 오류를보고 그래서 한 후, "연결합니다."라고 이 데이터를 전송하기 전에 필요하므로, 연결 또는 연결에 성공, 나도 몰라 무엇 결국 "웹 소켓 연결에 성공"사실, 나는이었다 성공적으로 연결 후 내 콜백 함수에 인쇄 된 단어의 설립의 성공을보고 생각 사용 socket.readyState 먼저 현재 접속 상태를 판정한다.

함수 sendSock (agentData, 콜백) { 
  globalCallback = 콜백; // 이 콜백 함수는 데이터가 호출 될 때, 이는 다른 곳에서 정의 중요 소켓 받는다. 
  
// 여기서 첫번째 소켓 연결 상태 판정 

  스위치 (webSocket.readyState) {
     // 을 연결하는 0 수단이 접속된다. 
    케이스 webSocket.CONNECTING : 
      의 setTimeout ( 함수 () { 
        webSocketSend (agentData 콜백) 
      }, 1,000 )
       BREAK ]
     // (가) OPEN 1의 값은 성공적인 연결을 나타내고, 상기 통신 될 수있다. 
    케이스 webSocket.OPEN : 
      webSocketSend (agentData) 
      BREAK ;
     // 폐쇄 : 2 값은, 연결이 종료되는 것을 나타낸다.
    케이스 webSocket.CLOSING : 
      의 setTimeout ( 함수 () { 
        webSocketSend (agentData 콜백) 
      }, 1,000 )
       BREAK ;
     // 닫힌 3의 값은, 연결이 종료되었음을 나타내는, 또는 연결이 실패 연다. 
    케이스 webSocket.CLOSED :
       // 뭔가 할 
      BREAK를 ,
     기본 :
       // 은이 결코이 일이 
      BREAK를 ; 
  } 
}

2 데이터 접속의 생성에 상기 제 1 전송 조건의 후단, 현재의 접속 상태를 판정하기위한

소켓 연결 설정이 다른 목적을 필요로하기 때문에이 프로젝트에서, 백 엔드, 그래서 그것을 연결이 설정 메시지를주고, 대화의 시작을 결정하기 위해 입력 메시지가 전송되었습니다 그래서 후에 소켓을 설정하고 데이터를 전송하기로 결정 상태. 소켓이 확립되어 있지 않다 궁금 해서요, 내가 한 방법 당신에게 메시지를 할, 내가 뭘 시간을 보내?

이 솔루션은 메시지가 과거에 전송되는 기능을 열 수 있습니다.

기능 webSocketOpen은 () {
 // 당신이 과거 데이터의 정의에 전달할 필요, 그것은 과거에 데이터를 전송, 데이터와 백엔드 프로토콜 데이터 유형에 대한 
    데이터를 =에서 const { 
      유형 : "연결" , 
      토큰 : sessionStorage.getItem ( " 토큰 ") || '' 
    } 
    sendSock (데이터, 함수 () {}) // 데이터 송신 함수를 호출 
  CONSOLE.LOG를 ("웹 소켓 연결이 성공 " ) 
}

 

여섯 개 다른 장소로 간주되지

1, 소켓 연결이 다양한 요인으로 인해 중단되기 때문에, 누군가가 "연결 유지"가 쓴 있도록 : 원칙이 살아 유지 -> 심장 박동, 수시로 합의 기간의 프론트 엔드가 백 엔드에 좋은 메시지를 보낼 수, 백 - 엔드 수신 계약의 프론트 엔드에 좋은 메시지를 반환 한 후, 경우에 팁을받지 얼마나 오래 통화 재 연결 방법 다시 연결합니다. 참조 : https://www.jianshu.com/p/a4eacaf8de17

2, 도입의 socket.io 사용에, https://www.cnblogs.com/dreamsqin/p/12018866.html