http protocol:
http protocol: Hypertext Transfer Protocol
http protocol function: transmission resource page ( HTML / CSS / JS / MP3 / MP4 / ..)
http work: request and response
must be a client to initiate a request, the server will there is a response, but a response to a request
issues:
Once scenarios are not suitable for use at http protocols, such as: the financial industry: [Warren: the trend], this time on the need webScoket.
webSocket agreement
webSoket H5 is a new feature, which enables bi-directional communication browser and the server, and it supports cross-domain access
webSocket role: to transfer data between network
webSocket work: broadcast and listen to
the browser and the server only needs to complete a handshake , directly between the two can create a persistent connection carried out, and two-way data transmission .
webSocket application scenarios: stock charts / chat room
webSocket achieve the client
to create an object webSocket
var = new new WS the WebSocket ( "WS: //127.0.0.1: 9001");
WS: Agreement Name
9001: webSocket server default port
- receiving data server webSocket
ws.onmessage = function (e) {e.data }
- send data to the server
ws.send (stringMsg);
- close the connection
ws.close ();
webSocket use and in line with the server.
example:
Set up a node server, configured websocket
1 // 02_ws_server.js
2 // Node.js ws server
3 @ 1: Download I ws ws module NPM
. 4 // 2: ws module incorporated
. 5 const the require ws = ( "ws" );
. 6 // 3: Create ws server port and designated 8888
. 7 var server = new new ws.Server ({port: 8888 });
. 8 the console.log ( "ws server begins listening port" );
. 9
10
. 11 @ 4: binding connection client connection event event (as long as the client is connected up, this event will trigger)
12 is server.on ( "connection", (Socket) => {
13 is the console.log ( "WS server reception connection" );
14 //5: the server continuously transmits the data to the client timer
15 var counter =. 1 ;
16 var Timer = the setInterval ( function () {
. 17 counter ++ ;
18 is socket.send ( "the I AM Server -" + counter); // data sent to the client, once every second hair
19 }, 1000 );
20 // 6: server receives client data
21 is socket.on ( "Message", (MSG) => {
22 is the console.log ( "server receives message "+ MSG);
23 is });
24 // . 7: If a client to disconnect request stops timer
25 socket.on (" Close ", () => {
26 is the console.log (" client-off open connections ... ");
27 clearInterval(timer);
28 })
29 });
Front-end code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> . 9 < body > 10 < Button ID = "btn1" the onclick = "handle1 Handle that ()" > receives the server data </ Button > < br > . 11 < Button ID = "btn1" the onclick = "handle2 ()" > send information to the server </ Button > < br > 12 is < Button ID = "btn1" the onclick = "handle3 ()" > close connection </ Button > < br > 13 <script> 14 // Create a variable to hold the object webSocket 15 var C = new new a WebSocket ( ' WS: // localhost: 8888 ' ) // create a connection 16 // create a connection back to the data receiving server . 17 function handle1 Handle that () { 18 is C. onMessage = function (E) { // receive data . 19 the console.log (e.data) // e.data, the data returned from the server 20 } 21 } 22 is 23 is 24 25 // create a connection, transmits data to the server 26 function handle2 () { 27 c.send ( ' I distal white ' ) // data transmitted to the server 28 29 } 30 31 is 32 // disconnect 33 is function handle3 () { 34 is c.close () 35 } 36 </ Script > 37 [ </ body > 38 is </ HTML >