Shulou(Shulou.com)06/03 Report--

This article mainly introduces the examples of the use of WebSocket API in HTML5, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

What is WebSocket API?

WebSocket API is the next generation client-server asynchronous communication method. This communication replaces a single TCP socket, uses ws or wss protocols, and can be used for any client and server program. WebSocket is currently standardized by the W3C. WebSocket is already supported by browsers such as Firefox 4, Chrome 4, Opera 10.70, and Safari 5.

The greatest thing about WebSocket API is that the server and client can push information to each other at any time within a given time frame. WebSocket is not limited to Ajax (or XHR) communication, because Ajax technology requires clients to initiate requests, and WebSocket servers and clients can push information to each other; XHR is limited by domains, while WebSocket allows cross-domain communication.

The clever thing about Ajax technology is that there is no way to design it to use. WebSocket is created for the specified destination and is used to push messages in both directions.

II. The usage of WebSocket API

Focus only on client-side API, because each server-side language has its own API. The following code snippet opens a connection, creates an event listener for the connection, disconnects, sends a message back to the server, and closes the connection.

/ / create an Socket instance var socket = new WebSocket ('ws://localhost:8080'); / / Open Socket socket.onopen = function (event) {/ / send an initialization message socket.send (' I am the client and I\'m listeningrequests'); / / listen for message socket.onmessage = function (event) {console.log ('Client received a message',event);} / / turn off monitoring Socket socket.onclose = function (event) {console.log ('Client notified socket has closed',event);}; / / close Socket.... / / socket.close ()}

WebSocket is a protocol that HTML5 began to provide for full-duplex communication over a single TCP connection.

In WebSocket API, the browser and the server only need to shake hands, and then a fast channel is formed between the browser and the server. The data can be transmitted directly between the two.

The browser sends a request to the server to establish a WebSocket connection through JavaScript. After the connection is established, the client and the server can exchange data directly through the TCP connection.

When you get the Web Socket connection, you can send data to the server through the send () method and receive the data returned by the server through the onmessage event.

The following api is used to create a WebSocket object.

Var socket = new WebSocket (url, [protocol])

The first parameter in the above code, url, specifies the URL of the link. The second parameter, protocol, is optional and specifies an acceptable subprotocol.

WebSocket attribute

The following are the properties of the WebSocket object. Suppose we created the socket object using the above code:

The Socket.readyState read-only attribute readyState represents the connection status and can have the following values:

1. 0-indicates that the connection has not been established.

2. 1-indicates that the link has been established and is ready for traffic.

3. 2-indicates that the connection is being closed.

4. 3-indicates that the connection is closed or cannot be opened.

The Socket.bufferedAmount read-only butteredAmount has been send () placed in a queue waiting for transmission, but the number of bytes of UTF-8 text that have not been sent out.

WebSocket event

The following are events related to the WebSocket object. Suppose we used the socket we created:

Event: open message error close

Event handler: Socket.onopen Socket.onmessage Socket.onerror Socket.onclose

Description: connection establishment triggers when the client accepts server-side data, triggers communication when an error occurs, triggers when the connection is closed.

WebSocket method

Here are the methods related to the WebSocket object. Suppose we used the above code to create a Socket object:

Method: Socket.send () Socket.close ()

Description: use the connection to send data to close the connection

Thank you for reading this article carefully. I hope the article "examples of the usage of WebSocket API in HTML5" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.