Latest HTML BroadcastChannel API recommendation_html/css_WEB-ITnose

HTML BroadcastChannel API

Among current browsers, only Firefox38 can support the BroadcastChannel API (at the time of writing this article), and Firefox38 officially claims that it will not be available until May 2015. Release the official version. This new API will open up a new world of possibilities and resolve many of the limitations we have inherited from the postMessage API.

The BroadcastChannel API is part of the WHATWG living HTML standard and can be viewed in detail here.

What is BroadcastChannel API?

BroadcastChannel API allows all windows, iFrames, etc. under the same origin domain and user agent to interact. That is to say, if the user opens two tab windows of the same website, and if the website content changes, both windows will be notified of updates at the same time.

Still not sure? Take Facebook as an example. If you have opened a Facebook window, but you have not logged in yet, and you open another window to log in, then you can notify other windows/tabs to tell them A user has logged in and requested their corresponding page updates.

Essentially, the BroadcastChannel API allows us to build an application that can self-aware state changes without using sockets and timers, which is especially effective for a publish/subscribe system.

BroadcastChannel API in action

Creating a new BroadcastChannel

Creating a new BroadcastChannel API is a piece of cake. All you need to do is pass the channel name as a parameter to the BroadcastChannel constructor and save a reference to it in a variable.

let cast = new BroadcastChannel('mychannel');

Send a message notification

Sending a message is also a very simple thing, you only need to reference the variable assigned to the BroadcastChannel instance (in this example, it is the cast variable above) Then just call its postMessage method.

If you are familiar with other publish/subscribe based systems, it may be more reasonable if you call the postMessage member method an event emitter.

The beautiful thing about the postMessage method is that you can use it to send anything. You can send an object, a string, whatever you want. As long as the subscriber is aware of what event you're sending, enjoy it.

myObj = {someKey: 'Some value', anotherKey: 'Another value'};cast.postMessage(myObj);

Unlike some more niche publish/subscribe systems, "topics" have no native implementation support. This means that you do not have a channel to broadcast the "topic" to all listening subscribers.

However, you can still imitate this implementation by writing some creative code. You can use objects to have "topic" as one key of the object and the message content as another key "data". send.

Message listening

A more popular name for "receiver" may be "subscriber". A receiver will listen for events emitted by the BroadcastChannel channel reference variable we defined earlier for a particular channel.

cast.onmessage = function (e) {     console.log(e); // This should print out the contents of the object we sent above}

Close the connection

Assume that you care very much about the performance of Javascript and care about resource consumption (especially when using a mobile phone). Fortunately there is a built-in method in BroadcastChannel that allows you to close these connections.

cast.close(); // Close our connection and let the garbage collection free up the memory that was used

Browser support

As mentioned above, currently only Firefox version 38 will support the BroadcastChannel API. Assuming that other browsers will likely follow suit, this API is very useful after all. Then for us to write ordinary applications and game applications in this area, we will be like a duck in water (the emergence of tight browser support)

It should be noted that from a user's perspective, if you (currently) Basically, there is no good relevant technical support. However, there is a browser plug-in that allows you to use the BroadcastChannel API now. However, after all, no browser has actually implemented support for this feature yet, so we can only wait and see.

Original text: http://ilikekillnerds.com/2015/03/all-about-the-html-broadcastchannel-api/

Author: Tiandihui Zhuhai Branch
WeChat public Number: TechGoGoGo
Weibo: http://weibo.com/techgogogo
CSDN: