Node. js allows multiple people to move their mouse online at the same time. _ node. js

This article mainly introduces the node. js game sharing that allows multiple users to move their mouse online at the same time. This article provides the server and client code and running methods. For more information, see the recent project requirements, so I studied the websocket Implementation of nodejs, socket. io, which is a widely used framework of nodejs background applications websocket.

Preparations

1. install socket. io and run the npm install socket. io command.
2. For windows systems, the vc compiling environment is required, because the vc code will be compiled during socket. io installation.

Basic game principles

1. The server listens to the Client Connection
2. When the client connection is successful, bind the page to move the mouse event, and process the event and send the current coordinates to the server.
3. The server saves a global coordinate object and uses the unique client number as the key value.
4. When new connections are available, broadcast coordinates to other clients.
5. When the client is disconnected, the server deletes its coordinate information and broadcasts it to other clients.

Start implementing server code

Scoket. io depends on an http connection for server listening. Therefore, an http module is also required. The Code is as follows:

The Code is as follows:

Var http = require ('http '),
Io = require ('socket. io ');

Var app = http. createServer (). listen (9091 );

Var ws = io. listen (app );

Then define a global coordinate object

The Code is as follows:

Var postions = {};

Listen to the connection of the client and add a broadcast function (in fact, the broadcast method io. sockets. broadcast. emit can be used with socket. io). The core code is as follows:

The Code is as follows:

Ws. on ('connection', function (client ){
// Broadcast Function
Var broadcast = function (msg, cl ){
For (var k in ws. sockets. sockets ){
If (ws. sockets. sockets. hasOwnProperty (k )){
If (ws. sockets. sockets [k] & ws. sockets. sockets [k]. id! = Cl. id ){
Ws. sockets. sockets [k]. emit ('position. change', msg );
}
}
}
};
Console. log ('\ 033 [92m has a new connection: \ 033 [39m', postions );
// After the client connection is successful, the coordinates of other clients are sent.
Client. emit ('position. change', postions );
// Receive messages sent from the client
Client. on ('position. change', function (msg ){
// Currently, only coordinate messages are sent to the client.
Postions [client. id] = msg;
// Broadcast messages to all other clients
Broadcast ({
Type: 'position ',
Postion: msg,
Id: client. id
}, Client );
});
// Receives the connection message from the client.
Client. on ('close', function (){
Console. log ('close! ');
// Delete the client and notify other clients
Delete postions [client. id];
// Broadcast messages to all other clients
Broadcast ({
Type: 'disconnect ',
Id: client. id
}, Client );
});
// Disconnect
Client. on ('disconnect', function (){
Console. log ('disconnect! ');
// Delete the client and notify other clients
Delete postions [client. id];
// Broadcast messages to all other clients
Broadcast ({
Type: 'disconnect ',
Id: client. id
}, Client );
})
// Define client Exception Handling
Client. on ('error', function (err ){
Console. log ('error-> ', err );
})
});

The key to analyzing the above Code is

1. The new client is successfully connected and the coordinates of other clients are sent.
2. When the client updates the coordinate information, it notifies other clients
3. Disconnect the client and notify other clients
4. The types of broadcast messages include modifying coordinates and removing coordinates.

Compile the client html page

Because of socket. io is a custom framework, so the client must reference socket. io. js. This js can be used from socket. in the io module, the path is generally node_modules \ socket. io \ node_modules \ socket. io-client \ dist, which has two versions of merging and compression. You can use the merged version during development.

The complete code is as follows:

The Code is as follows:

Example of concurrent online interaction between multiple users using socket. io