Specifications of MessageEvent and SSE in HTML5

1.MessageEventInterface

The new communication method defined in the HTML5 specification, whether it is WebSocket or SSE, including implementation Video, Audio WebRTC communication is based on an interface defined in the HTML5 specification: MessageEvent. This is a message-based event. First, we can take a look at what are the traditional event types in JavaScript.

The traditional base classes of DOM events mainly include:

(1)UIEvents: generalized UI events, in which mouse events and keyboard events are inherited from UI events ;

(2)MouseEvents: Generalized mouse events, such as click events, mousemove events, etc., are all instances of the MouseEvents event type;

(3)MutationEvents: Generalized DOM changes Events;

(4)HTMLEvents: Generalized HTML events.

The newadded MessageEvent event in HTML5 is an event specially used for event transmission. In addition to the properties of Event, it also contains some unique properties of its own. The specific code of the interface will not be posted here. You can check page 880 of the HTML5 specification.

The new important attributes of MessageEvent include:

(1)data: The data sent by the server is stored here.

(2)lastEventId: The data sent by the server is stored here. The last eventIDString

In addition, it also includes origin, ports, source and other attributes. Let's learn how to use MessageEvent through the analysis of SSE implementation.

2. SSE and MessageEvent

The implementation of the SSE client uses the MessageEvent interface.

Each field in the server's list will be interpreted by the client according to a rule, and the id field corresponds to the lastEventId in the MessageEvent. After the data defined in the data field is interpreted, it will be sent to the data field of MessageEvent. See the following code:

var es = new EventSource("test.php");
es.addEventListener("message", function(e){
    console.log(e);
})

Here we Directly use the event object 's processing method to print out the structure of this event object in the Chrome console. You can see that the data field of this object is the data sent in test.php, its type is message, and its prototype inherits MessageEvent.

Also note that retry in the SSE server manifest is an internal property and cannot be obtained through JavaScript code.

3. EventSource interface

The EventSource interface we use in SSE is defined in the HTML5 specification and the code is visible Page 882 of the HTML5 specification.

As you can see from the interface, the first is the three built-in Event processing programs defined: onopen/onmessage/onclose. In addition, it also includes the status readyState of the three connections. CONNECTING indicates that the connection is being established. The possible situation is that the connection has not been established yet or the connection is interrupted and the client is retrying. Connect this process; OPEN indicates that the connection is open and can transmit data, CLOSED indicates that the connection is interrupted and the client does not try to reconnect. . Among the methods defined, we can see that only close() is used to close the connection.

The above is the detailed content of Specifications of MessageEvent and SSE in HTML5. For more information, please follow other related articles on the PHP Chinese website!