WebSocket Tutorial-with full examples

Concept





As a next-generation Web Standard, HTML5 has a number of compelling new features, such as canvas, local storage, multimedia programming interfaces, WebSocket, and so on. Today we'll take a look at the WebSocket, which is called "Web TCP."





The emergence of WebSocket is based on the real-time needs of Web applications. This kind of real-time web application everybody should be not unfamiliar, in the life all should use, for instance Sina Weibo's comment, DMS notice, Tencent's webqq and so on. Let's review the dilemma of real-time Web apps.





Before WebSocket, there are generally two ways to implement web real-time use: polling mechanism and streaming technology, where polling has different polling and a long poll called Comet.





Polling: This is the first implementation of a real-time WEB application program. The client makes a request to the server at certain intervals to keep the client-side synchronization in a frequently requested manner. The disadvantage of this synchronization scenario is that when the client initiates a request to the server at a fixed frequency, the server-side data may not be updated, which can result in a lot of unnecessary network traffic, so this is a very inefficient real-time solution.





Long polling: is to improve and improve the timing polling, in order to reduce the invalid network transmission. When there is no data update on the server side, the connection maintains a period of time until the data or state changes or the time expires, which reduces the interaction between invalid clients and servers. Of course, if the service-side data changes are very frequent, this mechanism and the timing polling compared to the lack of intrinsic performance improvement.





Flow: A request that a long connection is made to the server using a hidden window on the client's page. The server responds to this request and keeps updating the connection status to ensure that the client and server connections are not up to date. This mechanism enables the server-side information to be continuously pushed to the client. This mechanism has a little problem in the user experience, need to design different scenarios for different browsers to improve the user experience, at the same time, this mechanism in the concurrency is relatively large, server-side resources is a great test.





The above approach is not really real time technology, just using a technique to implement the simulation in real time. Each time the client interacts with the server, it is an HTTP request and response process, and each HTTP request and answer comes with complete HTTP header information, which increases the amount of data per transmission. But the most painful of these ways is the developer, because both client and server implementations are complex, developers often need to construct two HTTP connections to simulate two-way communication between client and server, in order to simulate real-world effects, and a connection to handle data transfer from client to server. A connection is used to handle the data transfer from server to client, which inevitably increases the complexity of the programming implementation, increases the load on the server side, and restricts the extensibility of the application system.





Based on the above drawbacks, the realization of the Web real-time application technology appears, websocket through the browser provided by the API to really have a desktop system such as C/s architecture real-time communication capabilities. The principle is to use JavaScript to invoke the browser's API to issue a WEBSOCKET request to the server, after a handshake, and the server established TCP communication, because it is essentially a TCP connection, so the stability of data transmission and data transfer is small.





WebSocket Protocol





The WebSocket protocol is essentially a TCP based protocol. In order to establish a WebSocket connection, the client browser first initiates an HTTP request to the server, which, unlike the usual HTTP request, contains additional header information in which the additional header information "Upgrade:websocket" indicates that it is an application protocol escalation HTTP requests, server-side resolution of these additional header information and then generate response information returned to the client, the client and server-side of the WebSocket connection is established, the two sides can through this connection channel free transmission of information, And the connection will persist until either the client or the server side actively closes the connection.





Let's take a look at the WebSocket agreement in detail, as this agreement is still in the draft phase, the version changes relatively quickly, we choose the current DRAFT-IETF-HYBI-THEWEBSOCKETPROTOCOL-17 version to describe WebSocket agreement. Because this version is currently in some mainstream browsers such as Chrome, FireFox, Opera on the better support. Handshake protocol can be seen by description





What the client sends to the server:

The code is as follows	Copy Code
Get/chat http/1.1 Host:server.example.com Upgrade:websocket Connection:upgrade sec-websocket-key:dghlihnhbxbszsbub25jzq== Origin:http://example.com Sec-websocket-protocol:chat, Superchat Sec-websocket-version:13

Content from server to client:

code is as follows	copy code
http/1.1 switching Protocols     Upgrade:websocket     Connection:upgrade     sec-websocket-accept:s3pplmbitxaq9kygzzhzrbk+xoo=      Sec-websocket-protocol:chat

These requests are similar to the usual HTTP requests, but some of them are closely related to the WebSocket protocol. We need to give a brief description of these requests and responses, and "Upgrade:websocket" means that this is a special HTTP request for the purpose of upgrading the client and server-side communication protocols from the HTTP protocol to the WebSocket protocol. In which the client's Sec-websocket-key and server-side sec-websocket-accept is an important handshake authentication information, which will be implemented in the server-side posting explained.

believe that you should have a preliminary understanding of websocket, if you have any questions, to welcome the exchange.



Client

The handshake protocol described in the concept article, the client is provided by the browser API, so as long as the use of JavaScript to simply invoke it, and the server side is to achieve their own, The server side will be in the next blog post.

code is as follows

copy code

websocket JavaScript interface Definition: [Constructor (in Domstring URL, optional in Domst Ring protocol)] interface WebSocket { readonly attributes domstring URL; //Ready state Const unsigned Shor T connecting = 0; Const unsigned short OPEN = 1; Const unsigned short CLOSED = 2; ReadOnly attribute unsigned short readyState; ReadOnly attribute unsigned long bufferedamount; &NBSP //Networking Attribute function OnOpen attribute function onmessage; Attribute function Oncl Ose Boolean send (in domstring data); void Close (); }; WebSocket implements Eventtarget;

Simple understanding of interface methods and properties:

ReadyState indicates that there are four states of the connection:
Connecting (0): Indicates that no connection has been established;
OPEN (1): Connection has been established and can be communicated;
CLOSING (2): Closing the connection by closing the handshake;
CLOSED (3): The connection is turned off or cannot be opened;
The URL is the network address that represents the WebSocket server, which is usually "WS" or "WSS" (encrypted communication), send The method is to send data to the server side; The
Close method is to turn off the connection;
OnOpen the connection establishment, that is, the event that the handshake was triggered successfully;
OnMessage the event that was triggered when the server message was received;
OnError event triggered by the exception;
OnClose closes the event triggered by the connection;

JavaScript calls the browser interface instance as follows:

code is as follows

copy code

var WSServer = ' Ws://localhost:8888/demo '; Server address var websocket = new WebSocket (wsserver);//Create WebSocket Object websocket.send ("Hello");//Send message to Server alert ( Websocket.readystate)//view WebSocket Current state Websocket.onopen = function (evt) { //established connection }; Websocket.onclose = function (evt) { //closed connection }; Websocket.onmessage = function (evt) { //Receive Server message, use Evt.da TA extracts the }; Websocket.onerror = function (evt) { //Generate exception };

The client data for the

server-side

Handshake protocol has been done by the browser, and the server side needs our own implementation, and there are more open source implementations on the market, such as:

     kaazing WebSocket Gateway (a Java-implemented WebSocket Server);
    Mod_pywebsocket (a Python implementation WebSocket Server);
    Netty (the network framework for a Java implementation includes support for WebSocket);
    Node.js ( A server-side JavaScript framework provides support for WebSocket;
    websocket4net (A. NET Server-side implementation);

In fact, in the current. Net4 .5 in the framework has been implemented WebSocket, without the official implementation, we write a simple. The server side needs to shake, receive, and send according to the protocol.


handshake

First let's review the Handshake protocol:

Client sent to server:

The code is as follows	Copy Code
Get/chat http/1.1 Host:server.example.com Upgrade:websocket Connection:upgrade sec-websocket-key:dghlihnhbxbszsbub25jzq== Origin:http://example.com Sec-websocket-protocol:chat, Superchat Sec-websocket-version:13

Content from server to client:

The code is as follows	Copy Code
http/1.1 Switching protocols Upgrade:websocket Connection:upgrade sec-websocket-accept:s3pplmbitxaq9kygzzhzrbk+xoo= Sec-websocket-protocol:chat

The key is the server-side sec-websocket-accept, which is calculated based on Sec-websocket-key:

Takes out the Sec-websocket-key and joins a magic string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" into a new Key string;
The new key string SHA1 is encoded to generate an encrypted string composed of two-bit 16-digit numbers;
The encryption string for Base64 code to generate the final key, this key is Sec-websocket-key;

The instance code is as follows:

code is as follows

copy code

///< Summary> ///generation sec-websocket-accept ///</summary> ///<param name= "Handshaketext" > Client handshake Information </param> ///<returns>sec-websocket-accept</returns> private static string Getseckeyaccetp (byte[] Handshakebytes,int byteslength) { String handshaketext = Encoding.UTF8.GetString (handshakebytes, 0, byteslength); String key = String. Empty; Regex r = new Regex (@ Sec-websocket-key: (. *?) RN "); Match m = R.match (Handshaketext); if (m.groups.count!= 0) { key = Regex.Replace (M.value, @ "Sec-websocket-key: (. *?) RN "," $ "). Trim (); } byte[] encryptionstring = SHA1. Create (). ComputeHash (Encoding.ASCII.GetBytes (key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11")); return convert.tobase64string (encryptionstring); }

If the handshake succeeds, the client's OnOpen event will be triggered.


Resolve received client information

The client data parsing rules are received as follows:

1byte
Bit:frame-fin,x0 indicates that the message is followed by a frame;x1 representation of the last frame of the message.
3bit: Frame-rsv1, Frame-rsv2 and Frame-rsv3, respectively, are usually x0
The 4bit:frame-opcode,x0 representation is a continuation frame;x1 representing the literal frame;x2 representing the binary frame;x3-7 reserved to the uncontrolled frame;x8 indicating that the connection is closed; X9 represents Ping;xa ; xb-f reserved to control frame
2byte
1bit:mask,1 indicates that the frame contains a mask; 0, which means no mask
7bit, 7bit+2byte, 7bit+8byte:7bit integer value, if between 0-125, it is the load data length; If 126 indicates that the latter two byte unsigned 16-bit integer value, is the load length, 127 is 8 byte after the 64-bit unsigned integer value , is the load length
3-6byte: This assumes that the load length is between 0-125 and the mask is 1, then this 4 byte is the mask
7-end byte: Length is the length of the load taken out, including extended data and application data, usually without extended data, and if mask is 1, this data needs to be decoded, decoding rules for 1-4byte mask loops and data byte to be different or manipulated.

The parsing code is as follows, but does not handle multiple frames and packages that do not contain masks:

The code is as follows

Copy Code

<summary> Resolving Client Data Packets </summary> <param name= "Recbytes" > Server received Packets </param> <param name= "Recbytelength" > Valid data length </param> <returns></returns> private static string Analyticdata (byte[] recbytes, int recbytelength) { if (Recbytelength < 2) {return string. Empty; } BOOL fin = (Recbytes[0] & 0x80) = = 0x80; 1bit,1 represents the last frame if (!fin) { return string. empty;//more than one frame is temporarily not processed } BOOL Mask_flag = (Recbytes[1] & 0x80) = = 0x80; Whether to include a mask if (!mask_flag) { return string. empty;//that do not contain masks } int payload_len = recbytes[1] & 0x7F; Data length Byte[] masks = new Byte[4]; Byte[] Payload_data; if (Payload_len = = 126) { Array.copy (Recbytes, 4, masks, 0, 4); Payload_len = (UInt16) (recbytes[2] << 8 | recbytes[3]); Payload_data = new Byte[payload_len]; Array.copy (Recbytes, 8, payload_data, 0, Payload_len); }else if (Payload_len = = 127) { Array.copy (recbytes, masks, 0, 4); byte[] uint64bytes = new Byte[8]; for (int i = 0; i < 8; i++) { Uint64bytes[i] = recbytes[9-i]; } UInt64 len = Bitconverter.touint64 (uint64bytes, 0); Payload_data = new Byte[len]; for (UInt64 i = 0; i < len; i++) { Payload_data[i] = recbytes[i + 14]; } }else{ Array.copy (Recbytes, 2, masks, 0, 4); Payload_data = new Byte[payload_len]; Array.copy (Recbytes, 6, payload_data, 0, Payload_len); } for (var i = 0; i < Payload_len; i++) { Payload_data[i] = (byte) (payload_data[i] ^ masks[i% 4]); } Return Encoding.UTF8.GetString (Payload_data); }

send data to client


The data sent by the server begins with a 0x81, followed by the length of the content (if the length is 0-125, the length is 1 byte; if the length does not exceed 0xFFFF, then the latter 2 byte is the unsigned 16-bit integer representing the length; if more than 0xFFFF, The latter 8 byte is the length of the unsigned 64-bit integer, and finally the byte array of the content.

The code is as follows:

The code is as follows

Copy Code

<summary> Packaging Server Data </summary> <param name= "message" > Data </param> <returns> Data Package </returns> private static byte[] Packdata (String message) { byte[] contentbytes = null; byte[] temp = Encoding.UTF8.GetBytes (message); if (temp. Length < 126) { Contentbytes = new Byte[temp. Length + 2]; Contentbytes[0] = 0x81; CONTENTBYTES[1] = (byte) temp. Length; Array.copy (temp, 0, contentbytes, 2, temp.) Length); }else if (temp. Length < 0xFFFF) { Contentbytes = new Byte[temp. Length + 4]; Contentbytes[0] = 0x81; CONTENTBYTES[1] = 126; CONTENTBYTES[2] = (byte) (temp. Length & 0xFF); CONTENTBYTES[3] = (byte) (temp. Length >> 8 & 0xFF); Array.copy (temp, 0, contentbytes, 4, temp.) Length); }else{ Do not deal with long content temporarily } return contentbytes; }

Here is a brief introduction, the next section to do a complete example.



Said is the complete example, is not complete, here needs to be explained, this instance does not implement concurrency, also does not consider the algorithm and the resource management, the so-called complete is has the client and the server side, and can run up the demonstration. Direct food, about the theory please look at the previous three posts, TCP please look at the relevant knowledge.

Client code:

The code is as follows

Copy Code

<html> <head> <meta charset= "UTF-8" > <title>web Sockets test</title> <script src= "Jquery-min.js" type= "Text/javascript" ></script> <script type= "Text/javascript" > var ws; function toggleconnectionclicked () { try { WS = New WebSocket ("Ws://10.9.146.31:1818/chat");//Connect server Ws.onopen = function (event) {alert ("Already connected to the server RN current connection status:" +this.readystate); Ws.onmessage = function (event) {alert ("received data sent by server: RN" +event.data); Ws.onclose = function (event) {alert ("Already disconnected from server RN Current connection status:" +this.readystate); Ws.onerror = function (event) {alert ("WebSocket exception!) ");}; catch (ex) { alert (ex.message); } }; function SendData () { try{ Ws.send ("Beston"); }catch (ex) { alert (ex.message); } }; function Seestate () { alert (ws.readystate); } </script> </head> <body> <button id= ' toggleconnection ' type= ' button ' onclick= ' toggleconnectionclicked (); ' > Connection Server </button><br/><br/> <button id= ' toggleconnection ' type= ' button ' onclick= ' SendData (); ' > Send my Name: beston</button><br/><br/> <button id= ' toggleconnection ' type= ' button ' onclick= ' seestate (); ' > View status </button><br/><br/> </body> </html>

Server-side code:

The code is as follows

Copy Code

Using System; Using System.Net; Using System.Net.Sockets; Using System.Security.Cryptography; Using System.Text; Using System.Text.RegularExpressions; Namespace WebSocket { Class Program { static void Main (string[] args) { int port = 1818; byte[] buffer = new byte[1024]; IPEndPoint localEP = new IPEndPoint (Ipaddress.any, Port); Socket listener = new socket (localep.address.addressfamily,sockettype.stream, protocoltype.tcp); try{ Listener. Bind (LOCALEP); Listener. Listen (10); Console.WriteLine ("Waiting for client to connect ..."); Socket sc = listener. Accept ()//Accept a connection Console.WriteLine ("Accepted to the client:" +SC.) Remoteendpoint.tostring () + "connection ..."); Shake hands int length = SC. Receive (buffer);//Accept Client handshake information Sc. Send (Packhandshakedata (GETSECKEYACCETP (buffer,length))); Console.WriteLine ("Already sent the handshake agreement ..."); Accept Client Data Console.WriteLine ("Waiting for client data ..."); Length = SC. Receive (buffer);//Accept Client Information String clientmsg=analyticdata (buffer, length); Console.WriteLine ("Receive to client data:" + clientmsg); Send data string sendmsg = "Hello," + clientmsg; Console.WriteLine ("Send data:" "+sendmsg+" "to client ..."); Sc. Send (Packdata (sendmsg)); Console.WriteLine ("Demo over!"); } catch (Exception e) { Console.WriteLine (E.tostring ()); } } <summary> Packaging handshake Information </summary> <param name= "Seckeyaccept" >Sec-WebSocket-Accept</param> <returns> Data Package </returns> private static byte[] Packhandshakedata (string seckeyaccept) { var responsebuilder = new StringBuilder (); Responsebuilder.append ("http/1.1 switching Protocols" + Environment.NewLine); Responsebuilder.append ("Upgrade:websocket" + Environment.NewLine); Responsebuilder.append ("Connection:upgrade" + Environment.NewLine); Responsebuilder.append ("sec-websocket-accept:" + seckeyaccept + Environment.NewLine + Environment.NewLine); If the last line to replace the following two lines, is the THEWEBSOCKETPROTOCOL-17 agreement, but actually shook hands is not successful, is still not clear! Responsebuilder.append ("sec-websocket-accept:" + seckeyaccept + Environment.NewLine); Responsebuilder.append ("Sec-websocket-protocol:chat" + Environment.NewLine); Return Encoding.UTF8.GetBytes (Responsebuilder.tostring ()); } <summary> Generate Sec-websocket-accept </summary> <param name= "Handshaketext" > Client handshake Information </param> <returns>Sec-WebSocket-Accept</returns> private static string Getseckeyaccetp (byte[] handshakebytes,int byteslength) { String handshaketext = Encoding.UTF8.GetString (handshakebytes, 0, byteslength); String key = String. Empty; Regex r = new Regex (@ Sec-websocket-key: (. *?) RN "); Match m = R.match (Handshaketext); if (m.groups.count!= 0) { Key = Regex.Replace (M.value, @ "Sec-websocket-key: (. *?) RN "," $ "). Trim (); } byte[] encryptionstring = SHA1. Create (). ComputeHash (Encoding.ASCII.GetBytes (key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11")); Return convert.tobase64string (encryptionstring); } <summary> Resolving Client Data Packets </summary> <param name= "Recbytes" > Server received Packets </param> <param name= "Recbytelength" > Valid data length </param> <returns></returns> private static string Analyticdata (byte[] recbytes, int recbytelength) { if (Recbytelength < 2) {return string. Empty; } BOOL fin = (Recbytes[0] & 0x80) = = 0x80; 1bit,1 represents the last frame if (!fin) { return string. empty;//more than one frame is temporarily not processed } BOOL Mask_flag = (Recbytes[1] & 0x80) = = 0x80; Whether to include a mask if (!mask_flag) { return string. empty;//that do not contain masks } int payload_len = recbytes[1] & 0x7F; Data length Byte[] masks = new Byte[4]; Byte[] Payload_data; if (Payload_len = = 126) { Array.copy (Recbytes, 4, masks, 0, 4); Payload_len = (UInt16) (recbytes[2] << 8 | recbytes[3]); Payload_data = new Byte[payload_len]; Array.copy (Recbytes, 8, payload_data, 0, Payload_len); }else if (Payload_len = = 127) { Array.copy (recbytes, masks, 0, 4); byte[] uint64bytes = new Byte[8]; for (int i = 0; i < 8; i++) { Uint64bytes[i] = recbytes[9-i]; } UInt64 len = Bitconverter.touint64 (uint64bytes, 0); Payload_data = new Byte[len]; for (UInt64 i = 0; i < len; i++) { Payload_data[i] = recbytes[i + 14]; } }else{ Array.copy (Recbytes, 2, masks, 0, 4); Payload_data = new Byte[payload_len]; Array.copy (Recbytes, 6, payload_data, 0, Payload_len); } for (var i = 0; i < Payload_len; i++) { Payload_data[i] = (byte) (payload_data[i] ^ masks[i% 4]); } Return Encoding.UTF8.GetString (Payload_data); } <summary> Packaging Server Data </summary> <param name= "message" > Data </param> <returns> Data Package </returns> private static byte[] Packdata (String message) { byte[] contentbytes = null; byte[] temp = Encoding.UTF8.GetBytes (message); if (temp. Length < 126) { Contentbytes = new Byte[temp. Length + 2]; Contentbytes[0] = 0x81; CONTENTBYTES[1] = (byte) temp. Length; Array.copy (temp, 0, contentbytes, 2, temp.) Length); }else if (temp. Length < 0xFFFF) { Contentbytes = new Byte[temp. Length + 4]; Contentbytes[0] = 0x81; CONTENTBYTES[1] = 126; CONTENTBYTES[2] = (byte) (temp. Length & 0xFF); CONTENTBYTES[3] = (byte) (temp. Length >> 8 & 0xFF); Array.copy (temp, 0, contentbytes, 4, temp.) Length); }else{ Do not deal with long content temporarily } return contentbytes; } } }

Operation Effect:

Browsers to use:

Question: As in the example

The code is as follows

Copy Code

Responsebuilder.append ("sec-websocket-accept:" + seckeyaccept + Environment.NewLine + Environment.NewLine); If the last line to replace the following two lines, is the THEWEBSOCKETPROTOCOL-17 agreement, but actually shook hands is not successful, is still not clear! Responsebuilder.append ("sec-websocket-accept:" + seckeyaccept + Environment.NewLine); Responsebuilder.append ("Sec-websocket-protocol:chat" + Environment.NewLine);

What is this for? The brother who saw this blog wanted to be able to give me some doubts!







connecting keyboard features

What is the "Connect keyboard" feature

"Connect the keyboard" function is actually opened the web version of the micro-letter, using the keyboard can quickly input text chat.

Connection method is simple, Use the phone to open the micro-letter click on the right-hand corner magic Wand, will pop up three options, only choose to connect the keyboard on it, then use the browser to open wx.qq.com and then use the mobile phone to scan the web page of two-dimensional code can open the Web version of the micro-letter, and then you can directly use the computer keyboard to achieve fast chat. The items in the


Websocket-server are as follows:

Mobile: Mobile phone simulator, with the Mobile Communication Server UDP communication, responsible for prompting the opening of the page address, and input GUID (equivalent to two D code) and the page binding;
Mobileserver: Mobile Communication Server, responsible for receiving mobile information (such as micro-letter account information and two-dimensional code information), here to receive the GUID. and forwarding to the WebSocket Communication server;
Websocket:websocket Communication Server, communicating with the WebSocket of the mobile Communication server and the page;

Websocket-client the project meaning is as follows:

test.html: Tested Web pages (similar to wx.qq.com);
Jquery-1.8.0.min.js:jquery framework;


Implementation

The page test.html generates GUIDs and is stored in WebSocket, the phone simulator enters the GUID and passes it to the WebSocket server, retrieving the page socket information and communicating with the WebSocket server.


Considerations

If you test yourself please start the Mobile Communication Server and WebSocket Communication Server according to the above steps;
Replace All "10.9.146.31" strings with their own IP;