Nodejs melaksanakan perkongsian permainan kecil untuk berbilang orang untuk menggerakkan tetikus dalam talian pada masa yang sama_node.js

Baru-baru ini, disebabkan keperluan projek, saya telah mengkaji pelaksanaan websocket nodejs, socket.io, yang merupakan rangka kerja yang digunakan secara meluas untuk websocket dalam aplikasi latar belakang nodejs.

Persediaan

1. Pasang socket.io, gunakan arahan npm install socket.io
2. Untuk sistem windows, persekitaran kompilasi vc diperlukan, kerana apabila memasang socket.io, kod vc akan dikompilasi

Prinsip asas permainan

1. Pelayan memantau sambungan pelanggan
2. Apabila sambungan klien berjaya, ikat halaman untuk menggerakkan acara tetikus dan proses acara untuk menghantar koordinat semasa ke pelayan
3. Pelayan menyimpan objek koordinat global dan menggunakan nombor unik pelanggan sebagai nilai kunci
4. Apabila sambungan baharu datang, siarkan koordinat kepada pelanggan lain
5. Apabila pelanggan memutuskan sambungan, pelayan memadam maklumat koordinatnya dan menyiarkannya kepada pelanggan lain

Mula laksanakan kod pelayan

Apabila scoket.io mewujudkan pemantauan pelayan, ia perlu bergantung pada sambungan http untuk mengendalikan protokol naik taraf, jadi ia juga memerlukan modul http Kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

var http = memerlukan('http'),
io = memerlukan('socket.io');

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

var ws = io.listen(app);

Kemudian tentukan objek koordinat global

Salin kod Kod adalah seperti berikut:

var kedudukan = {};

Mula memantau sambungan pelanggan dan menambah fungsi siaran (sebenarnya, anda boleh menggunakan kaedah penyiaran io.sockets.broadcast.emit yang disertakan dengan socket.io Kod teras adalah seperti berikut:

).

Salin kod Kod adalah seperti berikut:

ws.on('sambungan', fungsi(klien){
// Fungsi penyiaran
var broadcast = function(msg, cl){
untuk(var k dalam ws.sockets.sockets){
Jika(ws.sockets.sockets.hasOwnProperty(k)){
Jika(ws.sockets.sockets[k] && ws.sockets.sockets[k].id != cl.id){
Ws.sockets.sockets [k] .emit ('posity.change', msg);                 }
            }
}
};
console.log(' // Selepas pelanggan berjaya menyambung, maklumat koordinat pelanggan lain akan dihantar
Client.emit('position.change', positions);
// Terima mesej yang dihantar oleh pelanggan
Client.on('position.change', function(msg){
                                        // Pada masa ini mesej pelanggan hanyalah mesej koordinat
        jawatan[client.id] = msg;
               // Siarkan mesej kepada semua pelanggan lain
siaran ({
            jenis: 'kedudukan',
Jawatan: msg,
              id: client.id
          }, pelanggan);
});
// Terima mesej sambungan penutup klien
Client.on('close', function(){
console.log('close!');
//Padam pelanggan dan maklumkan pelanggan lain
                                                                                                                                                                                                                                                                                                            padamkan siaran [client.id];
               // Siarkan mesej kepada semua pelanggan lain
siaran ({
            jenis: 'putuskan sambungan',
              id: client.id
          }, pelanggan);
});
// Putuskan sambungan
Client.on('disconnect', function(){
console.log('putuskan sambungan!');
//Padam pelanggan dan maklumkan pelanggan lain
                                                                                                                                                                                                                                                                                                            padamkan siaran [client.id];
               // Siarkan mesej kepada semua pelanggan lain
siaran ({
            jenis: 'putuskan sambungan',
              id: client.id
          }, pelanggan);
})
// Tentukan pengendalian pengecualian klien
Client.on('error', function(err){
console.log('error->', err);
})
});

Menganalisis kod di atas, perkara utama ialah

1. Pelanggan baharu berjaya menyambung dan menghantar maklumat koordinat pelanggan lain

2. Apabila pelanggan mengemas kini maklumat koordinat, ia memberitahu pelanggan lain

3. Pelanggan memutuskan sambungan dan memberitahu pelanggan lain
4. Jenis mesej siaran dibahagikan kepada mengubah suai koordinat dan mengalih keluar koordinat

Tulis halaman html pelanggan

Memandangkan socket.io ialah rangka kerja tersuai, pelanggan perlu merujuk socket.io.js ini boleh didapati dalam modul socket.io secara amnya node_modulessocket.ionode_modulessocket.io-clientdist. dan Mampatkan dua versi, dan anda boleh menggunakan versi gabungan semasa pembangunan

Kod lengkap adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

ws.on('connect', function(){
console.log(ws);
​​​​ // Mula mengikat acara mousemove
          document.onmousemove = function(ev){
Jika(ws.socket.transport.isOpen){
WS.emit ('Position.change', {x: Ev.clientx, y: Ev.clienty});             }
}
})

ws.on('position.change', function(data){

// Mulakan pelanggan lain yang berada dalam talian pada masa yang sama
          jika(!dahulu){
              pertama = benar;
// Mesej pertama adalah untuk menerima koordinat semua pelanggan lain
untuk(var i dalam data){
                   bergerak(i, data[i]);
            }
         }lain{
                                           // Jika tidak, ia akan menjadi satu lagi mesej pemutusan sambungan atau mesej kemas kini koordinat lain
If('position' == data.type){
                   pindah (data.id, data.position);
               } lain{
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   dialih keluar (data.id);             }
}
})

ws.on('error', function(){

console.log('error:', ws);

          ws.disconnect();
})

Pergerakan fungsi(id, pos){

         var ele = document.querySelector('#cursor_' id);
Jika(!ele){
// Jika ia tidak wujud, buat
             ele = document.createElement('img');
              ele.id = 'kursor_' id;
              ele.src = 'img/cursor.png';
              ele.style.position = 'mutlak';
                document.body.appendChild(ele);
}

ele.style.left = pos.x 'px';

          ele.style.top = pos.y 'px';

}

fungsi alih keluar(id){

         var ele = document.querySelector('#cursor_' id);

          ele.parentNode.removeChild(ele);
}