Baru -baru ini, karena kebutuhan proyek, saya telah mempelajari implementasi Websocket dari NodeJs, Socket.io, yang merupakan kerangka kerja yang banyak digunakan oleh aplikasi latar belakang Nodejs Websocket.
Persiapan
1. Pasang socket.io dan gunakan perintah NPM Instal Socket.io
2. Untuk sistem Windows, diperlukan lingkungan kompilasi VC, karena ketika socket.io diinstal, kode VC akan dikompilasi.
Prinsip dasar permainan
1. Server mendengarkan koneksi klien
2. Ketika koneksi klien berhasil, halaman pengikat memindahkan acara mouse, dan koordinat saat ini dikirim ke server.
3. Server menyimpan objek koordinat global dan menggunakan nomor unik klien sebagai nilai kunci.
4. Saat koneksi baru datang, siarkan koordinat ke klien lain
5. Ketika klien terputus, server menghapus informasi koordinatnya dan menyiarkannya ke klien lain.
Mulailah menerapkan kode server
Ketika scoket.io membuat pemantauan server, perlu mengandalkan koneksi HTTP untuk menangani protokol upgrade, sehingga juga membutuhkan modul HTTP, kode tersebut adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var http = membutuhkan ('http'),
io = membutuhkan ('socket.io');
var app = http.createServer (). Listen (9091);
var ws = io.listen (app);
Kemudian tentukan objek koordinat global
Salinan kode adalah sebagai berikut:
var post = {};
Mulailah mendengarkan koneksi klien dan tambahkan fungsi siaran baru (pada kenyataannya, Anda dapat menggunakan metode siaran io.sockets.broadcast.emit, yang dilengkapi dengan socket.io), dan kode inti adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
ws.on ('koneksi', fungsi (klien) {
// fungsi siaran
var siaran = fungsi (msg, cl) {
untuk (var k in ws.sockets.sockets) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && w.sockets.sockets [k] .id! = cl.id) {
ws.sockets.sockets [k] .emit ('position.change', msg);
}
}
}
};
console.log ('/033 [92m memiliki koneksi baru:/033 [39m', posting);
// Setelah koneksi klien berhasil, informasi koordinat dari klien lain akan dikirim
client.emit ('position.change', posting);
// Terima klien mengirim pesan
client.on ('position.change', function (msg) {
// Saat ini, pesan klien hanya pesan koordinat
Possi [klien.id] = msg;
// menyiarkan pesan ke semua klien lain
siaran({
Ketik: 'Posisi',
Posting: msg,
ID: Client.ID
}, klien);
});
// Terima pesan koneksi penutupan klien
client.on ('tutup', function () {
console.log ('tutup!');
// hapus klien dan beri tahu klien lain
Hapus Possi [Client.ID];
// menyiarkan pesan ke semua klien lain
siaran({
Jenis: 'Putuskan sambungan',
ID: Client.ID
}, klien);
});
// Putuskan sambungan
client.on ('Disconnect', function () {
console.log ('Disconnect!');
// hapus klien dan beri tahu klien lain
Hapus Possi [Client.ID];
// menyiarkan pesan ke semua klien lain
siaran({
Jenis: 'Putuskan sambungan',
ID: Client.ID
}, klien);
})
// Tentukan penanganan pengecualian klien
client.on ('error', function (err) {
console.log ('error->', err);
})
});
Titik kunci menganalisis kode di atas adalah
1. Klien baru terhubung dengan sukses, dan informasi koordinat klien lain dikirim.
2. Ketika klien memperbarui informasi koordinat, beri tahu klien lain.
3. Klien memutuskan dan memberi tahu klien lain
4. Jenis pesan siaran dibagi menjadi koordinat memodifikasi dan menghapus koordinat
Tulis Halaman HTML Klien
Karena Socket.io adalah kerangka kerja khusus, klien perlu merujuk ke socket.io.js. JS ini dapat ditemukan dari modul socket.io. Jalur umumnya node_modules/socket.io/node_modules/socket.io-client/dist. Ada dua versi penggabungan dan kompresi. Anda dapat menggunakan versi gabungan selama pengembangan.
Kode lengkapnya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title> socket.io contoh interaksi online simultan beberapa orang </iteme>
<meta charset = "UTF-8">
</head>
<body>
<type script = "Text/JavaScript" src = "socket.io.js"> </script>
<type skrip = "Teks/JavaScript">
var ws = io.connect ('http: // localhost: 9091/');
var isFirst;
ws.on ('connect', function () {
Console.log (WS);
// Mulai mengikat acara Mousemove
document.onmouseMove = function (ev) {
if (ws.socket.transport.isopen) {
w.emit ('position.change', {x: ev.clientx, y: ev.clienty});
}
}
})
ws.on ('position.change', function (data) {
// Mulailah online secara bersamaan
if (! isFirst) {
isFirst = true;
// Pesan pertama adalah menerima koordinat dari semua klien lainnya
untuk (var i di data) {
pindahkan (i, data [i]);
}
}kalau tidak{
// Jika tidak, itu adalah pesan yang terputus atau pesan yang diperbarui.
if ('position' == data.type) {
pindahkan (data.id, data.post);
}kalau tidak{
hapus (data.id);
}
}
})
ws.on ('error', function () {
console.log ('error:', ws);
ws.disconnect ();
})
function move (id, pos) {
var ele = document.queryselector ('#cursor_' + id);
if (! ele) {
// Jika tidak ada, itu akan dibuat
ele = document.createelement ('img');
ele.id = 'cursor_' + id;
ele.src = 'img/cursor.png';
ele.style.position = 'absolute';
Document.Body.AppendChild (ELE);
}
ele.style.left = pos.x + 'px';
ele.style.top = pos.y + 'px';
}
fungsi hapus (id) {
var ele = document.queryselector ('#cursor_' + id);
ele.parentnode.removechild (ele);
}
</script>
</body>
</html>
IMG/cursor.png pada halaman dapat ditemukan di sini, kursor.png, dan ada banyak ikon tikus lainnya di sini. Prinsip ujung depan relatif sederhana. Analisis sederhananya adalah sebagai berikut
1. Ketika koneksi berhasil, ikat acara MouseMove di halaman, dan kirim pesan koordinat baru.
2. Menerima pesan sesuai dengan jenis pesan, apakah perlu untuk memodifikasi pesan klien lain atau menghapus pesan klien lainnya?
3. Tentukan Menambahkan Ikon Kursor Klien Lain dan Menghapus Ikon Kursor
4. Proses pesan pengecualian klien dan tambahkan pemutusan untuk memungkinkan server menghapus informasi koordinat
Contoh menjalankan
1. Simpan kode server sebagai io_multigame.js
2. Simpan kode klien sebagai io_multigame.html
3. Jalankan Node Kode Server IO_MULTIGAME.JS
4. Buka beberapa halaman io_multigame.html untuk melihat efeknya
Meringkaskan
Tulisannya cukup santai dan referensi ke nodeJ yang menakjubkan. Ini buku yang bagus. Teman -teman yang ingin tahu nodej dapat membaca buku ini.