Socket.io entry instance in node.js

2020-03-30 02:44:53
OfStack

About websocket and other reverse ajax technology

A common approach in real-time web applications is reverse Ajax. Definition of reverse Ajax:

Reverse Ajax is essentially the concept of being able to send data from the server to the client. In a standard HTTP Ajax request, where data is sent to the server side, reverse Ajax can simulate making an Ajax request in certain ways, which are covered in this article, so that the server can send events to the client side as quickly as possible (low latency communication).

There are two main aspects of reverse Ajax: one is that the server side holds the TCP connection until it has data to send to the client (which can be implemented using loops and sleep), and the other is client-side js programming skills.

Websocket is the specification of html5 and is also an anti-ajax technology.

Socket.io implements an example of reverse AJAX technology

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. Flash® Socket AJAX long polling AJAX multipart streaming Forever Iframe JSONP polling

Simply put, socket.io is a nodejs based library that wraps and unifies various reverse ajax technologies. At run time, socket.io automatically interacts with the socket.io server by selecting the appropriate reverse ajax technique for the browser. If technologies such as websocket are the norm, socket.io belongs to the application.

Here's how to install it (the author USES Linux Mint 16) :

Installation node. Js:

sudo apt-get install nodejs

Enter the command nodejs to enter shell mode.

Install the NPM:

sudo apt-get install npm

Install socket. IO:

sudo npm install socket.io

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

Socket. IO examples

The following example is from the official website and has been modified as appropriate.

First, set up the server side (server side) code (file test.js) :


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);
});
});

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

The author set up the nginx server, which USES port 80, the web root directory is /usr/share/nginx/ HTML. Copy socket.io/node_modules/socket.io /node_modules/socket.io-client/dist to the web root directory, and create a file in the web root directory index.php (as the client), 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 above code, socket is bound to port 8080, which is bound to the server side. Socket.on () specifies how the data corresponding to the received instruction should be processed when a news instruction is received, and socket.emit() sends the instruction and data to the server.

Run server:

$ nodejs test.js

Run the client and observe: open your browser, go to http://127.0.0.1, access index.php, and open firebug to see the information.

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/2014426101201281.jpg? The figure above is from firebug, indicating that the client index. PHP received the data {hello:"world"} from the server test.js after connecting to the server test.js. You can also see that index.php is not simply accessing the server at http://localhost:8080.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/2014426101251676.jpg? 201432610130 ">
The figure above shows the server-side test.js process.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/2014426101332753.jpg? The figure above is the first HTTP header sent by the client index. PHP to the server test.js.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/2014426101357381.jpg? 201432610147 ">

Above is the HTTP header sent by the client side index.php to the server side test.js for the second time. The websocket specification is used.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/2014426101418201.jpg? "> "client index. PHP has a lot of Aborted state (in red) when server test.js is turned off.

End of analysis.