HTML5 통신 API 교차 도메인 임계값은 더 이상 높지 않으며 데이터 푸시는 더 이상 dream

HTML5 통신 API 교차 도메인 임계값은 더 이상 높지 않으며 데이터 푸시는 더 이상 dream_html5 튜토리얼 기술이 아닙니다.

WBOY

풀어 주다： 2016-05-16 15:49:40

원래의

1820명이 탐색했습니다.

머리말

HTML5에는 통신, 문서 간 메시지 전송 및 WEB 소켓 API와 관련된 두 가지 새로운 API가 추가되었습니다.

문서 간 메시지 전송 기능은 서로 다른 웹 문서 및 서로 다른 포트(교차 도메인 상황에서)에서 메시지를 전송할 수 있습니다.

웹 소켓 API를 사용하면 클라이언트와 서버가 소켓 포트를 통해 데이터를 전송할 수 있으므로 데이터 푸시 기술을 사용할 수 있습니다.

문서 간 메시징

과거에는 도메인 전반에 걸쳐 정보를 얻으려면 많은 노력이 필요했을 것입니다. 이제는 웹 페이지가 위치한 창 개체의 인스턴스만 얻으면 서로 통신할 수 있습니다.

우선, 다른 창에서 메시지를 받으려면 해당 창 개체를 모니터링해야 합니다.

window.addevntListener(<span style="COLOR: #800000">'</span><span style="COLOR: #800000">message</span><span style="COLOR: #800000">'</span>, function () {}, <span style="COLOR: #0000ff">false</span>)

로그인 후 복사

다른 창에 메시지를 보내려면 windows 개체의 postMessage 메서드를 사용하세요.

<span style="COLOR: #000000">otherWindow.postMessage(message, targetOrigin)第一个参数为发送文本，也可以是js对象（json）第二个参数为接收消息对象窗口的URL，可以使用通配符</span>

로그인 후 복사

간단한 예:

코드 복사

코드는 다음과 같습니다.

게시물 정보

</ title><br> <script src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/ javascript"> ;<br> $(document).ready(function () {<br> window.addEventListener('message', function (ev) {<br> //메시지 소스를 확인해야 합니다<br> $('#msg_box' ).html(ev.origin '보낸 메시지:' ev.data);<br> }, false);<br> <br> $('#send').click(function () {<br> var 프레임 = window.frames[0];<br> 프레임.postMessage($('#msg').val(), 'http://localhost:3317/html5 및 css3/06 통신 api/ 02.htm') ;<br> });<br> });<br> <br> </script><br> </head><br> <body><br> <input type="text" id="msg" /><br> <button id="send"><br> 메시지 보내기</button><br> <iframe src="02.htm" width= "400"></iframe><br> <div id="msg_box"><br> </div><br> </body><br> </html><br> </div> <br> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042510291116.jpg"></p> <p>위 내용을 바탕으로 하위 페이지에 높이 및 너비 버튼을 제공하여 iframe 높이 및 너비를 변경하는 방법을 상위 창에 알려줍니다. <br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode48'));"><u>코드 복사</u></span></div>코드는 다음과 같습니다.</div> <div class="msgborder" id="phpcode48"> <br>상위 레이어 코드<br> <!DOCTYPE html><br> < html xmlns="http://www .w3.org/1999/xhtml"><br> <head><br> <title>

코드 복사

코드는 다음과 같습니다.

하위 레이어 코드

<제목>

< ;script type="text/javascript">
$(document).ready(function () {
var url = '';
var source = '';
window.addEventListener ( 'message', function (ev) {
//여기서 소스 확인이 필요합니다
if (ev.origin) { }
$('#msg').html(ev.origin ' Send Message : 'ev.data);
url = ev.origin;
source = ev.source;
//ev.source.postMessage('여기는 다음과 같습니다:' this.location, ev.origin) ;
});

$('#send').click(function () {
source.postMessage($('#w_h').val(), url);
});
});

< ;/div>

< ;/body>

마지막으로 e:

의 스크린샷을 찍습니다.

더 유연하게 사용하려면 API를 더 강력하게 사용할 수 있습니다. 어쨌든 함수 이름 등을 전달할 수 있습니다.

웹 소켓 통신

웹 소켓은 웹 애플리케이션의 클라이언트와 서버 간에 HTML5가 제공하는 비HTTP 통신 메커니즘입니다

http로는 구현하기 쉽지 않은 서버로의 데이터 푸시 등 지능형 통신 기술을 구현해 많은 주목을 받았다.

웹 양말 API를 사용하면 서버와 클라이언트 간에 HTTP가 아닌 양방향 연결을 설정할 수 있습니다. 이 연결은 명시적으로 닫히지 않는 한 실시간이며 영구적입니다.

이는 서버가 클라이언트에 데이터를 전송하려고 할 때 연결을 다시 설정하지 않고 즉시 클라이언트의 브라우저에 데이터를 푸시할 수 있음을 의미합니다.

클라이언트가 열린 소켓을 갖고 서버와 연결을 설정하는 한, 서버는 더 이상 요청을 위해 클라이언트를 폴링하여 수동을 활성으로 전환할 필요가 없습니다.

웹 소켓 API

코드 복사

코드는 다음과 같습니다.

var webSocket = new WebSocket('ws://localhost:8005/socket');
URL은 ws 또는 wss(암호화됨)를 헤더로 사용해야 합니다. websocket 객체의 URL에 접근하여
통신을 다시 획득합니다. 연결이 설정된 후 websocket 객체의 send 메소드를 사용하고 json 데이터를 추가하여 모든 양식을 전송할 수 있습니다. 서버에 데이터 전송:

webSocket.send(msg);
onmessage 이벤트를 통해 서버에서 보낸 데이터를 받습니다:
webSocket.onmessage = function(e) {
　var data = e.data;
} ;
onopern 이벤트를 통해 소켓 열기 이벤트 수신:
webSocket.onopen = function (e) { };
onclose를 통해 소켓 닫기 이벤트 수신:
webSocket.onclose = function (e) {};
webSocket.close() 메서드를 통해 소켓 연결을 닫습니다.

readyState 속성을 통해 websocket 객체 상태를 가져옵니다.
CONNECTION 0 Connecting
OPEN 1 Connected
CLOSING 2 Closing
CLOSE 2 Closed

추신: 서버 블록과 관련된 소켓 구성 방법을 모르기 때문에 당분간 테스트할 수 없습니다. 이 문제는 2차 학습 중에 해결될 것입니다.

전체 코드는 여전히 매우 간단합니다.

코드 복사

코드는 다음과 같습니다.

// 소켓 인스턴스 생성
var 소켓 = new WebSocket('ws://localhost:8080')

//소켓 열기
socket.onopen = function(event) {

//초기화 메시지 보내기
소켓.send('나는 클라이언트이고 듣고 있습니다!')

// 메시지 듣기
소켓.onmessage = function(event) {
console.log('클라이언트가 메시지를 받았습니다.',event)

// 소켓 종료 모니터링
소켓.onclose = function(event) {
console.log('클라이언트에 소켓이 닫혔다는 알림', 이벤트)
// 소켓 닫기....
//socket.close()
};