Getting started with socket.io in node.js_javascript class library

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. These methods will be discussed in this article. In this way, the server can send data to the server as quickly as possible. Client sends events (low latency communication).

Reverse Ajax technology mainly has two contents: one is that the server maintains the TCP connection until it has data to send to the client (can be implemented using loops and sleep), and the other is client js programming skills.

Websocket is a standard of HTML5 and is also an anti-ajax technology.

Socket.io implementation of 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 speaking, socket.io is a library based on nodejs, which packages multiple reverse ajax technologies and unifies the interface. At runtime, socket.io automatically selects the appropriate reverse ajax technology to interact with the socket.io server based on the browser's conditions. If technologies such as websocket are standards, then socket.io is an application.

Here’s how to install it (the author uses Linux Mint 16):

Install node.js:

Copy the code The code is as follows:

sudo apt-get install nodejs

Enter the command nodejs to enter shell mode.

Install npm:

Copy code The code is as follows:

sudo apt-get install npm

Install socket.io:

Copy the code The code is as follows:

sudo npm install socket.io

The installation package is stored in the ~/node_modules directory, and the client socket.io.js is stored in the ~/node_modules/socket.io/node_modules/socket.io-client/dist directory.

socket.io example

The following examples are from the official website and have been modified appropriately.

First create the server-side (server-side) code (file test.js):

Copy the code The code is as follows:

var io = require('socket.io').listen(8080);

io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event' , function (data) {
console.log(data);
});
});

The server test.js is bound to port 8080. When a client connects When the server test.js is running, the server test.js sends the news command to the client and transmits the data { hello: 'world' }; when the server test.js receives the my other event command, it will call the callback function function (data) { console.log(data);} to process the received data data.

The author built an nginx server, which uses port 80 and the web root directory is /usr/share/nginx/html. Copy socket.io.min.js under ~/node_modules/socket.io/node_modules/socket.io-client/dist to the web root directory, and create the file index.php in the web root directory (as a client) , the content is as follows:

Copy code The code is as follows:

< ;head>



<script><br> var socket = io.connect('http://localhost:8080');<br> socket.on('news', function (data) {<br> console.log(data);<br> console .log(data["hello"]);<br> socket.emit('my other event', { my: 'data' });<br> });<br></script>

In the above code, the socket is bound to port 8080, which is bound to the server side. 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 the code The code is as follows:

$ nodejs test.js

Run the client and observe: Open the browser, enter http://127.0.0.1 to access index.php, and open firebug to view the information.

The above picture is from firebug, which shows that after the client index.php connects to the server test.js, it receives the data {hello: "world"} from the server test.js. At the same time, you can also see that the URL used by index.php to access the server is not simply http://localhost:8080.

The above figure shows the processing process of server-side test.js.
The picture above is the http header sent by the client index.php to the server test.js for the first time.

The picture above is the http header sent by client index.php to server test.js for the second time. The websocket specification is used.
When the server test.js is turned off, the client index.php shows a lot of Aborted status (the red part).

Analysis is over.