WebSocket 크로스 도메인 문제 해결에 대한 자세한 설명

WebSocket 프로토콜은 HTML5의 새로운 프로토콜입니다. 브라우저와 서버 간의 전이중 통신을 실현하고 도메인 간 통신을 허용합니다. 이는 서버 푸시 기술을 잘 구현한 것입니다. 우리는 webSocket 인터페이스를 매우 잘 캡슐화하고 더 간단하고 유연한 인터페이스를 제공하며 webSocket을 지원하지 않는 브라우저에 대한 이전 버전과의 호환성도 제공하는 Socket.io를 사용합니다.

내 프로젝트에서 JavaScript 교차 도메인 문제가 발생했습니다. 상위 페이지와 하위 페이지가 통신해야 하는데, 상위 페이지와 하위 페이지가 교차 도메인입니다. 어떻게 해야 합니까?

프로젝트에서는 상위 페이지와 하위 페이지 간의 통신이 지점 간 통신인지 확인해야 합니다. 즉, 서버 측에서 상위 페이지와 하위 페이지 간에 WebSocket 통신을 설정해야 합니다. 즉, 상위 페이지에서 보낸 메시지입니다. 페이지는 하위 페이지에서만 수신되고 하위 페이지의 메시지는 상위 페이지에서만 수신됩니다. 우리는 다음 작업을 엄격하게 보장했습니다.

먼저 WebSocket 링크를 설정하는 URL에 타임스탬프가 추가되어 통신 세션이 고유한지 확인합니다.

두 번째는 서버 측의 상위 페이지와 하위 페이지 간의 일대일 WebSocket 대응을 보장하는 것입니다. 상위 페이지와 하위 페이지의 WebSocket이 열리면 서버에 메시지를 보내 Sensions 간의 해당 관계를 등록하고 설정합니다. 그러면 상위 페이지와 하위 페이지는 양 당사자가 제한하는 통신 프로토콜을 통해 통신할 수 있습니다.

여기에 데모를 작성합니다.

 var p = document.getElementsByTagName('p ')[0];var io = io.connect('http://127.0.0.1:3001 ');io.on('data ',function(data){alert( '2S 이후 데이터 변경');p.innerHTML = data});

서버 측

 var io = require('socket.io ')(server);io.on('connection',function(client){client.emit('data ', 'hello WebSocket from 3001. ');});

오늘은 이것이 전부입니다. 동시에 WebSocket에 너무 많은 시간을 소비하고 싶지 않다면 GoEasy Aurora와 유사한 타사 WebSocket을 사용해 볼 수 있습니다.

여기서는 GoEasy를 추천합니다. www.goeasy.io는 간단하고 사용하기 쉽고 무료이며 사용해 볼 수 있습니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.