Home > Developer > JavaScript
Introduction to websocket and other Reverse ajax Technologies
In real-time web applications, a common method is reverse Ajax. Definition of reverse Ajax:
Reverse Ajax (Reverse Ajax) is essentially a concept that can send data from the server to the client. In a standard HTTP Ajax request, data is sent to the server. Reverse Ajax can simulate an Ajax request in some specific ways, which will be discussed in this article, the server can send events (low-latency communication) to the client as quickly as possible ).
The reverse Ajax technology has two main aspects: first, the server maintains a TCP connection until it has data sent to the client (loop and sleep can be used), and second, the client js programming skills.
Websocket is an html5 standard and also an anti-ajax technology.
Socket. io reverse AJAX technology example
Socket. io official introduction:
Socket. IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms. it's care-free realtime 100% in JavaScript. in order to provide realtime connectivity on every browser, Socket. IO selects the most capable transport at runtime, without it affecting the API. webSocket Adobe®Flash®Socket AJAX long polling AJAX multipart streaming Forever Iframe JSONP Polling
Simply put, socket. io is a node. js-based library that encapsulates multiple reverse ajax technologies and unifies interfaces. During running, socket. io automatically selects the appropriate reverse ajax technology based on the browser's situation to interact with the socket. io server. If websocket and other technologies are standardized, socket. io belongs to the application.
The following describes how to install it (the author uses Linux Mint 16 ):
Install node. js:
Copy codeThe Code is as follows: sudo apt-get install nodejs
Enter the command nodejs to enter the shell mode.
Install npm:
Copy codeThe Code is as follows: sudo apt-get install npm
Install socket. io:
Copy codeThe Code is as follows: sudo npm install socket. io
The installation package is stored in ~ /Node_modules directory, the client socket. io. js is stored in ~ /Node_modules/socket. io/node_modules/socket. io-client/dist directory.
Socket. io example
The following example is from the official website and is modified as appropriate.
First, create the server (server) code (file test. js ):
Copy codeThe Code is as follows:
Var io = require ('socket. io '). listen (8080 );
Io. sockets. on ('connection', function (socket ){
Socket. emit ('new', {hello: 'World '});
Socket. on ('My other event', function (data ){
Console. log (data );
});
});
Server test. js binds port 8080. When a client connects to the server test. in js, the server test. js sends the news command to the client and transmits the data {hello: 'World'}, while the server test. when js receives the my other event command, it will call the callback function (data) {console. log (data) ;}to process the received data.
I set up the nginx server, which uses port 80 and the web root directory is/usr/share/nginx/html. Change ~ /Node_modules/socket. io/node_modules/socket. socket under io-client/dist. io. min. copy js to the web root directory, and create the file index under the web root directory. php (as the client), the content is as follows:
Copy codeThe Code is as follows:
<Html>
<Head>
</Head>
<Script src = "socket. io. min. js"> </script>
<Body>
<Script>
Var socket = io. connect ('HTTP: // localhost: 8080 ');
Socket. on ('News', function (data ){
Console. log (data );
Console. log (data ["hello"]);
Socket. emit ('My other event', {my: 'data '});
});
</Script>
</Body>
</Html>
In the code above, the socket is bound to port 8080, that is, the server. Socket. on () specifies how to process the data corresponding to the received command when receiving the news command. socket. emit () sends the command and data to the server.
Run the server:
Copy codeThe Code is as follows: $ nodejs test. js
Run the client and observe: Open the browser, go to http: // 127.0.0.1 to access index. php, and open firebug to view information.
From firebug, it indicates that the client index. php connects to the server test. js and receives the data from the server test. js {hello: "world "}. At the same time, we can see that index. php's access to the server URL is not a simple http: // localhost: 8080.
Displays the processing process of test. js on the server.
This is the first http header sent by index. php from the client to test. js.
Is the http header sent by the client index. php 2nd to the server test. js. The websocket specification is used.
When the test. js server is turned off, the client index. php shows a lot of Aborted states (red part ).
The analysis is complete.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
