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