Use of WebSocket

First to introduce Webscoket, actually started I do not know what is, so searched for a bit:

WebSocket protocol is a new protocol for HTML5. It is the implementation of browser-to-server full-duplex communication (Full-duplex).

Many web sites are now polling (polling) for instant messaging. Polling is at a specific time interval (such as every 1 seconds), the browser sends an HTTP request to the server, and the server returns the latest data to the client's browser. This traditional HTTP request pattern has obvious drawbacks – the browser needs to constantly make requests to the server, but the header of the HTTP request is very long, and the data contained in it may be a small value, which consumes a lot of bandwidth.

And the most new technology to do polling effect is comet– using AJAX. However, although this technology can reach full-duplex communication, it still needs to make a request.

In the WebSocket API, browsers and servers only need to do a handshake, and then a fast channel is formed between the browser and the server. The data can be transmitted to each other directly between the two. In this WebSocket agreement, there are two major benefits to our instant service:

1. Header

The header to communicate with each other is very small-about 2 Bytes

2. Server Push

The server can proactively transmit data to the client

Do WebSocket is due to the project requirements, the interface is required to dynamically display real-time data, but it is not possible to send a second to the server, this is too unrealistic, so there is websocket. Although later can but encountered a lot of problems, check the information when also found that the version of IE to 10 support, really difficult not to dismantle AH ~ ~ ~

function Start () {//---2: here it is.

var wsimpl = window. websocket| | Window.  Mozwebsocket; This is supposed to be a good definition.

window.ws = new Wsimpl (' ws://192.168.11.11:8180/'); This is the server address.

Ws.binarytype = "Arraybuffer";

Ws.onmessage = function (evt) {//---6: This is what you use to receive data, and what you want to do with it is your own business.

var mess = Evt.data;

For data processing one is to see what data the server is transmitting, and second, to see what style of data you need

}

};

Ws.onopen = function () {//---3.1: Open the server and connect successfully

$.ajax ({//---4: I'm here for the first time I want the server to send the requested content

Type: ' POST ',

url:ctx+ '/do/xx/xx/xxx ',

Async:false,

data:{

xx:xx

},

DataType: ' Text ',

Success:function (data) {

Ws.send (data); -----5: After getting the Ajax content, you can send it to the server, which is the send

}

});

};

Ws.onclose = function () {//---3.2: This should be the server shutdown.

$.messager.alert (' Warning ', ' server has been shut down ~ ');

};

Ws.onerror = function () {//---3.3 connection problem, Close is also an error OH ~

$.messager.alert (' Error ', ' Error, please try again ~ ');

};

};

$ (function () {

Start (); ---1: Start

});

This article is from the "Curtain Green" blog, please be sure to keep this source http://lmq4930.blog.51cto.com/3208925/1576584

Use of WebSocket