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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.