Shulou(Shulou.com)06/03 Report--

This article is to share with you about what HTML5 communication API refers to, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Preface

HTML5 adds two API related to communication, cross-document message transmission and WEB Sockets API

Cross-document message transmission function, can be in different web documents, different ports (cross-domain case) for message delivery.

Using web sockets api allows client and server to transfer data through the socket port, so that data push technology can be used.

Cross-document message transmission

In the past, it took a lot of work to get information across domains, but now we can communicate with each other as long as we get the instance of the window object where the web page is located.

First of all, if you want to receive messages from other windows, you need to listen to their window objects:

Window.addevntListener ('message', function () {}, false)

Use the postMessage method of the windows object to generate information to other windows:

The first parameter of otherWindow.postMessage (message, targetOrigin) is the sending text, or the second parameter of the js object (json) is the URL of the receiving message object window. You can use wildcards.

Simple example:

The code is as follows:

Post information

$(document) .ready (function () {

Window.addEventListener ('message', function (ev) {

/ / should check the source of the message

$('# msg_box') .html (ev.origin + 'send message:' + ev.data)

}, false)

$('# send') .click (function () {

Var frame = window.frames [0]

Frame.postMessage ($('# msg'). Val (), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm');

});

});

Send a message

Based on the above, we make a few modifications. We give the height and width button on the child page to tell the parent window how to change the height and width of iframe:

The code is as follows:

Parent layer code

$(document) .ready (function () {

Window.addEventListener ('message', function (ev) {

/ / should check the source of the message

$('# msg_box') .html (ev.origin + 'send message:' + ev.data)

Var wishh = ev.data

/ / format check not done

$('# f'). Css ('width', w_h.split (',') [0] + 'px')

$('# f'). Css ('height', w_h.split (',') [1] + 'px')

}, false)

Function p () {

Var frame = window.frames [0]

Frame.postMessage ($('# msg'). Val (), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm');

}

$('# send') .click (function () {

P ()

});

SetTimeout (p200)

});

Send a message

The code is as follows:

Sublayer code

$(document) .ready (function () {

Var url =''

Var source =''

Window.addEventListener ('message', function (ev) {

/ / Source verification is required here

If (ev.origin) {}

$('# msg') .html (ev.origin + 'send message:' + ev.data)

Url = ev.origin

Source = ev.source

/ / ev.source.postMessage ('here is:' + this.location, ev.origin)

});

$('# send') .click (function () {

Source.postMessage ($('# wresth') .val (), url)

});

});

Change the outer layer height

Finally, take a picture of our e:

More flexible use, the api can also be more powerful use, we can pass function names and so on, anyway, we can do a lot of things.

Web sockets communication

Web sockets is a non-HTTP communication mechanism provided by HTML5 between client and server in web applications.

He has realized the intelligent communication technology such as data push of the server which is not easy to implement by http, so he has received a lot of attention.

Using web sockes api, you can establish a non-HTTP two-way connection between the server and the client, which is real-time and permanent unless explicitly closed

This means that when the server wants to send data to the client, it can immediately push the data to the client browser without re-establishing the connection.

As long as the client has an open socket and establishes a connection with the server, the server can push the data to this socket, and the server no longer needs to poll client requests and turns passively into active.

Web sockets api

The code is as follows:

Var webSocket = new WebSocket ('ws://localhost:8005/socket')

Url must use ws or wss (encryption) as the header. After this url is set, it can be retrieved by accessing the url of the websocket object in the javascript script.

After the communication has established a connection, it can communicate in both directions, and any form of data can be transferred to the server by using the send method of the websocket object plus json data:

WebSocket.send (msg)

Receive the data sent by the server through the onmessage event:

WebSocket.onmessage = function (e) {

Var data = e.data

}

Listen for the socket open event through the onopern event:

WebSocket.onopen = function (e) {}

Listen for socket shutdown events through onclose:

WebSocket.onclose = function (e) {}

Close the socket connection with the webSocket.close () method

Get the state of the websocket object through the readyState property:

CONNECTION 0 is connecting

OPEN 1 is already connected

CLOSING 2 is shutting down

CLOSE 2 has been shut down

PS:, cannot be tested for the time being because I will not configure the socket correlation of the server block, and the problem will be solved for the second time.

The whole code is simple:

The code is as follows:

/ / create a Socket instance

Var socket = new WebSocket ('ws://localhost:8080')

/ / Open Socket

Socket.onopen = function (event) {

/ / send an initialization message

Socket.send ('I am the client and I\'m listeningkeeper')

/ / listen for messages

Socket.onmessage = function (event) {

Console.log ('Client received a message',event)

}

/ / listen to the shutdown of Socket

Socket.onclose = function (event) {

Console.log ('Client notified socket has closed',event)

}

/ / close Socket....

/ / socket.close ()

}

The above is what HTML5 communication API refers to, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.