With node combat websocket

First, WebSocket Overview

The WebSocket protocol is based on the TCP protocol, not the HTTP protocol.

As follows:

ws://127.0.0.1 or wss://127.0.0.1 is the websocket request.

Note: ws represents WebSocket protocol, WSS represents an encrypted WebSocket agreement.

The advantage of WebSocket is to allow the server and customer service to communicate with each other in real-time, and unlike Ajax, only by the customer service to initiate the request, and WebSocket is not subject to the same-origin policy restrictions, this is precisely the weakness of Ajax.

Well, after a preliminary understanding of WebSocket, we will explore the implementation of a demo together step-by-step.

Second, the Customer service side tour

Because it is based on WebSocket, that at the customer service side, first, you have to initiate a websocket request.

As follows:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/887360/201605/887360-20160516223901201-170091660. PNG "style=" border:0px; "/>

650) this.width=650; "id=" code_img_closed_f2602d5d-3c2c-4736-aa81-eddf1ec7c27e "class=" code_img_closed "src="/img/ Jia.gif "style=" border:0px;vertical-align:middle;padding-right:5px;/> Entirecode

Secondly, the callback function is used to listen to the corresponding event and deal with it. There are altogether four monitoring events:

　1. Onpen: triggered when the request succeeds

　　2. OnClose: triggered when the request is closed

　　3. onerror: triggered when an error occurs during a request or connection

　　4. onMessage: triggered when a message is sent by the receiving server

also, when a request is sent, the WebSocket instance that is created has a status value of readystate:

　　1. 0: The representative is not connected or is connected;

　2. 1: the representative connection succeeds;

　3. 2: The delegate is closing the connection;

　　4. 3: on behalf of the connection is closed.

We added these four listener events to the demo.

As follows:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/887360/201605/887360-20160516224136169-1284293936. PNG "style=" border:0px; "/>

650) this.width=650; "id=" code_img_closed_d4696294-7338-47b8-bf1c-84b6cef81f97 "class=" code_img_closed "src="/img/ Jia.gif "style=" border:0px;vertical-align:middle;padding-right:5px;/> Entirecode

In this listener event, you can add a trigger function as you wish.

As follows:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/887360/201605/887360-20160516230726513-822365628. PNG "style=" border:0px; "/>

650) this.width=650; "id=" code_img_closed_515a8ae3-7720-4af9-a7df-4d164497198f "class=" code_img_closed "src="/img/ Jia.gif "style=" border:0px;vertical-align:middle;padding-right:5px;/> entirecode

Third, node create server

Create a simple server with node to see the entire websocket process.

Because it is the WebSocket protocol, you need to introduce a WS module in node, assuming we are listening on a port number of 8080.

As follows:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/887360/201605/887360-20160516224402326-512948669. PNG "style=" border:0px; "/>

650) this.width=650; "id=" code_img_closed_267b5cc2-48e7-4e5b-b23a-9962b263994c "class=" code_img_closed "src="/img/ Jia.gif "style=" border:0px;vertical-align:middle;padding-right:5px;/> Entirecode

then we need to send a little something to the customer service after the connection is successful, such as ' Hello World ', as well as the event message when the insofar server sends the message.

As follows:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/887360/201605/ 887360-20160516224456044-828038264.png "style=" border:0px; "/>

650) this.width=650; "id=" Code_img_closed_20b85bc5-3c00-4130-a7a6-6bacd7e8b2d1 "class=" code_img_closed "src="/img/ Jia.gif "style=" border:0px;vertical-align:middle;padding-right:5px;/> Entirecode

Four, the operation

Prerequisite: because the WS module is introduced, the WS module needs to be introduced: NPM install WS

First, run node's simple server (I'll store it in D:websocket/server.js).

As follows:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/887360/201605/887360-20160516224604326-1159076939. PNG "style=" border:0px; "/>

Next, run the client side code and open the Chrome debugger:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/887360/201605/887360-20160516224643029-1206601840. PNG "style=" border:0px; "/>

Look at the node environment just now, the following:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/887360/201605/887360-20160516224732498-112613014. PNG "style=" border:0px; "/>

They can already communicate with each other.

Let's Open the Chrome debugger and look at the WebSocket request as follows:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/887360/201605/887360-20160516224821826-532149165. PNG "style=" border:0px; "/>

in Requestheaders , "Connection:upgrade" indicates that the browser notifies the server if it can upgrade to the WebSocket protocol. Origin is used to verify that the browser domain name is within the scope of the server license. The Sec-websocket-key is used for the Handshake Protocol Key, which is a base64 encoded 16-byte random string. The upgrade header information indicates that the communication protocol has been shifted from http/1.1 to the protocol specified by the item.

in Responseheaders , "Connection:upgrade" notifies the browser that the protocol needs to be changed. Sec-websocket-accept is the server that adds a "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" string after the Sec-websocket-key string provided by the browser, Then take the Sha-1 hash value. The browser validates this value to prove that the target server is actually responding to the WebSocket request.

With node combat websocket