Analysis of HTML5 WebSocket and server push events, html5websocket
WebSockets
Web Sockets is a new-generation bidirectional communication technology used for Web applications. It runs on a single socket and is exposed to HTML5 compatible browsers through JavaScript interfaces.
Once the Web Socket connection on the Web server is obtained, you can call the send () method to send data from the browser to the server, and use the onmessage event handler to receive data from the server to the browser.
The following is an API for creating a new WebSocket object.
Copy the content to the clipboard using JavaScript CodeThe first parameter url is used to specify the URL to be connected. The second property-port is optional. If it is provided, a server must support successfully connected sub-protocols.
WebSocket attributes
The following describes the attributes of a WebSocket object. Suppose we have created the above Socket object:
| Attribute | Description |
|---|---|
| Socket. readyState | Read-only attributeReadyStateIndicates the connection status. Optional values:
|
| Socket. bufferedAmount | Read-only attributeBufferedAmountNumber of URF-8 text bytes that have been queued using the send () method. |
| Event | Event Handler | Description |
|---|---|---|
| Open | Socket. onopen | This event is triggered when a socket connection is established. |
| Message | Socket. onmessage | Triggered when the client receives data from the server. |
| Error | Socket. onerror | Triggered when a connection error occurs. |
| Close | Socket. onclose | Triggered when the connection is closed. |
| Method | Description |
|---|---|
| Socket. send () | The send (data) method uses a connection to transmit data. |
| Socket. close () | The close () method is used to terminate any existing connection. |
Server push event
Traditional Web applications generate events sent to Web servers. For example, clicking a link will request a new page from the server.
This time type from Web browser to Web Server can be called a customer event.
As HTML5 emerged, WHATWG Web Applications 1.0 introduced an event stream from the Web server to the Web browser, called server push event (SSE ). With SSE, You can continuously push DOM events to your browser.
This event stream method opens a persistent connection to the server, and sends data to the client when new messages are available, so that continuous polling is not required.
SSE Web Application
To use server push events in Web applications, we need to add a <eventsource> element to the document.
The <eventsource> element's src attribute should point to a URL that provides an HTTP persistent connection to send data streams containing events.
This URL points to a PHP, PERL, or any Python script that continuously sends event data. The following is a simple example of a Web application that expects to get the server time.
Copy XML/HTML Code to clipboardSSE server script
The server-side script should send the Content-type header to specify the text/event-stream type, as shown below:
The Code is as follows: print "Content-Type: text/event-stream \ n ";
After Content-type is set, the server script sends an Event: Tag followed by the Event name. In the following example, a Server-Time ending with a linefeed is sent as the event name.
The Code is as follows: print "Event: server-time \ n ";
The last step is to use Data: Label to send event Data, followed by an integer string value ending with a line break, as shown below:
The Code is as follows: $ time = localtime ();
Print "Data: $ time \ n ";
The following is a complete ticker. cgi written in perl:
The Code is as follows:
#! /Usr/bin/perl
Print "Content-Type: text/event-stream \ n ";
While (true ){
Print "Event: server-time \ n ";
$ Time = localtime ();
Print "Data: $ time \ n ";
Sleep (5 );
Handle server push events
Let's modify our Web application to process the server push time. The following is the final example:
Before testing server push events, we recommend that you make sure your Web browser supports this concept.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
