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)