집 > 기사 > 웹 프론트엔드 > WebSocket 크로스 도메인 문제 해결에 대한 자세한 설명

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

青灯夜游앞으로: 2018-10-09 16:21:523113검색

이 글은 WebSocket 크로스 도메인 문제를 해결하는 방법을 자세히 설명하는 관련 정보를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

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

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

프로젝트에서 상위-하위 페이지 통신이 지점 간인지 확인하려면 서버 측에서 상위-하위 페이지 간에 WebSocket 통신을 설정해야 합니다. 즉, 상위 페이지에서 보낸 메시지는 다음과 같습니다. 하위 페이지에서만 수신되고 하위 페이지의 메시지는 상위 페이지에서만 수신됩니다.

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

});

Server side

var io = require(‘socket.io’)(server);

io.on(‘connection’,function(client){

client.emit(‘data’,’hello WebSocket from 3001.’);

});

오늘은 여기까지입니다. 동시에 WebSocket에 너무 많은 시간을 소비하고 싶지 않다면, GoEasy Aurora 등과 유사한 타사 WebSocket을 사용해 볼 수 있습니다.

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 Html5 비디오 튜토리얼을 방문하세요!

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

관련 기사