HTML5 Advanced -14 Web Sockets (Overview, API, sample)

First, Web Socket overview

Introduction to WEB Sockets

-The web Socket is a non-HTTP communication mechanism provided by HTML5 between the client and server side in the Web application

-Web sockets enable intelligent communication technologies such as server-side data pushes that are not easily implemented with HTTP

Features of the Web Socket

-A Web Socket can establish a non-HTTP two-way connection between the server and the client

-This connection is real-time and permanent.

-server-side can push messages proactively

-server-side no longer needs to poll clients for requests

-server-to-client communication without re-establishing a connection

Second, the Web Socket API

Web Socket Object

-Call the constructor of the WebSocket object to establish a communication connection to the server

var webSocket = new WebSocket (ws://localhost:8005/socket);

-the URL string must begin with "WS" or "WSS" (when encrypting communication) text

-The client can retrieve the connection by websocket this URL string

Web Socket method

-Send data to the server using the Send () method of the WebSocket object

Websocket.send ("Data");

-The Send () method can only send text data

-Use a JSON object to convert any JavaScript object to be sent after it is called text data

-Close the socket via the WebSocket object Close () method to sever the communication connection

Websocket.close ();

Web Socket Event

-Receive the data from the server by getting the OnMessage event:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/4E/wKiom1b70QGRCuF6AAAm2r_jWic932.png "title=" Web.png "alt=" Wkiom1b70qgrcuf6aaam2r_jwic932.png "/>-Listen for the socket's Open event by getting the OnOpen event:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/4A/wKioL1b70cuhhVIXAAAp2rPQ09Y019.png "title=" Web.png "alt=" Wkiol1b70cuhhvixaaap2rpq09y019.png "/>

-Listen for the socket Shutdown event by getting onclose time

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/4A/wKioL1b70jSh-dJ0AAAroBFgCHk168.png "title=" Web.png "alt=" Wkiol1b70jsh-dj0aaarobfgchk168.png "/>

ReadyState Property

-Gets the state of the WebSocket object by reading the ReadyState property value

-The ReadyState property has the following property values:

-Connecting (a numeric value of 0), indicating that a connection is being

-OPEN (a numeric value of 1), indicating that a connection has been established

-CLOSING (a numeric value of 2), indicating that the connection is being closed

-CLOSED (a numeric value of 2), indicating that the connection has been closed

Third, Web Socket example

Web Socket Sample Overview

-Specify the socket application to use on the server side and specify the host and port of the socket application on the server side

-Write a Web Socket implementation that is used on the client to connect to the server side and receive

Web Socket Sample Code

-Web Socket Client page key code

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/4E/wKiom1b70wXwNM1XAAB8FWeqbgE360.png "title=" Web.png "alt=" Wkiom1b70wxwnm1xaab8fweqbge360.png "/>

-Web Socket client javascript key code, connect () method

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/4E/wKiom1b701nTzK0gAABSVpNMzuA786.png "title=" Web.png "alt=" Wkiom1b701ntzk0gaabsvpnmzua786.png "/>

-Web Socket Client JavaScript key code, send () method

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/4A/wKioL1b71E3BTaBFAAA6vwmcwwQ210.png "title=" Web.png "alt=" Wkiol1b71e3btabfaaa6vwmcwwq210.png "/>

-Web Socket Client JavaScript key code, disconnect () method

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/4A/wKioL1b71FywK9i2AAAZ7aQcMlI517.png "title=" Web.png "alt=" Wkiol1b71fywk9i2aaaz7aqcmli517.png "/>

Summary: This chapter covers the following HTML5 Web sockets (Overview, API, examples)

This article from the "Technical Exchange" blog, declined reprint!

HTML5 Advanced -14 Web Sockets (Overview, API, sample)