Rumah  >  Artikel  >  hujung hadapan web  >  Contoh penggunaan Socket.IO dalam node.js_node.js

Contoh penggunaan Socket.IO dalam node.js_node.js

WBOY
WBOYasal
2016-05-16 16:32:001284semak imbas

1. Pengenalan

Pertama ialah tapak web rasmi Socket.IO: http://socket.io

Laman web rasmi sangat mudah, tiada dokumen API, hanya "Cara menggunakan" ringkas untuk rujukan. Kerana Socket.IO adalah semudah, mudah digunakan dan mudah digunakan seperti laman web rasmi.

Jadi apakah sebenarnya Socket.IO? Socket.IO ialah perpustakaan WebSocket yang merangkumi js sisi klien dan nodej sisi pelayan Matlamatnya adalah untuk membina aplikasi masa nyata yang boleh digunakan pada penyemak imbas dan peranti mudah alih yang berbeza. Ia secara automatik akan memilih kaedah terbaik mengikut pelayar daripada pelbagai kaedah seperti WebSocket, tinjauan panjang AJAX, penstriman Iframe, dan lain-lain untuk melaksanakan aplikasi rangkaian masa nyata Ia sangat mudah dan mesra pengguna, dan pelayar yang disokong adalah sebagai rendah seperti IE5.5 Ia sepatutnya dapat memenuhi kebanyakan keperluan.

2. Pemasangan dan penggunaan

2.1 Pemasangan

Pertama sekali, pemasangannya sangat mudah dalam persekitaran node.js, hanya satu ayat:

Salin kod Kod adalah seperti berikut:

npm pasang socket.io

2.2 Gabungkan ekspres untuk membina pelayan

express ialah rangka kerja aplikasi web Node.js kecil yang sering digunakan semasa membina pelayan HTTP, jadi saya akan menerangkannya terus menggunakan Socket.IO dan nyatakan sebagai contoh.

Salin kod Kod adalah seperti berikut:

var express = memerlukan('express')
, app = express()
, pelayan = memerlukan('http').createServer(app)
, io = memerlukan('socket.io').dengar(pelayan);
server.listen(3001);

Jika anda tidak menggunakan ekspres, sila rujuk socket.io/#how-to-use

3. Penggunaan asas

Ia terbahagi terutamanya kepada dua keping kod, bahagian pelayan dan bahagian klien, yang kedua-duanya sangat mudah.

Pelayan (app.js):

Salin kod Kod adalah seperti berikut:

//Teruskan kod di atas
app.get('/', function (req, res) {
res.sendfile(__dirname '/index.html');});

io.sockets.on('sambungan', fungsi (soket) {
socket.emit('berita', { hello: 'dunia' });
socket.on('acara lain', fungsi (data) {
console.log(data);
});
});

Pertama, fungsi io.sockets.on menerima rentetan "sambungan" sebagai acara untuk pelanggan memulakan sambungan Apabila sambungan berjaya, fungsi panggil balik dengan parameter soket dipanggil. Apabila kami menggunakan socket.IO, kami pada asasnya mengendalikan permintaan pengguna dalam fungsi panggil balik ini.

Fungsi soket yang paling kritikal ialah fungsi pemancar dan pada yang pertama menyerahkan (memancarkan) acara (nama acara diwakili oleh rentetan. Terdapat juga beberapa nama acara lalai. diikuti dengan objek. Mewakili kandungan yang dihantar ke soket; yang terakhir menerima acara (nama acara diwakili oleh rentetan), diikuti dengan fungsi panggil balik yang dipanggil apabila acara diterima, di mana data adalah data yang diterima.

Dalam contoh di atas, kami menghantar acara berita dan menerima acara acara lain, maka pelanggan harus mempunyai acara penerimaan dan penghantaran yang sepadan. Ya, kod pelanggan betul-betul bertentangan dengan kod pelayan dan sangat serupa.

Pelanggan (client.js)

Salin kod Kod adalah seperti berikut:



var soket = io.connect('http://localhost');
socket.on('berita', fungsi (data) {
console.log(data);
​​​​ socket.emit('peristiwa lain', { my: 'data' });
});

Terdapat dua perkara yang perlu diambil perhatian: laluan socket.io.js mesti ditulis dengan betul. Fail js ini sebenarnya diletakkan dalam folder node_modules pada bahagian pelayan Apabila fail ini diminta, ia akan diubah hala 'Jangan terkejut bahawa ia tidak wujud pada bahagian pelayan Mengapa fail ini masih berfungsi seperti biasa? Sudah tentu, anda boleh menyalin fail socket.io.js sebelah pelayan secara setempat dan menjadikannya fail js sebelah klien Dengan cara ini, anda tidak perlu meminta fail js daripada pelayan Node setiap kali, yang meningkatkan kestabilan . Perkara kedua ialah menggunakan soket var = io.connect('alamat tapak web atau ip'); untuk mendapatkan objek soket, dan kemudian anda boleh menggunakan soket untuk menghantar dan menerima acara. Mengenai pemprosesan acara, kod di atas menunjukkan bahawa selepas menerima acara "berita", ia mencetak data yang diterima dan menghantar acara "acara lain" ke pelayan.

Nota: Nama acara lalai terbina dalam seperti "putuskan sambungan" bermaksud sambungan pelanggan diputuskan, "mesej" bermaksud mesej diterima, dsb. Nama acara tersuai seharusnya tidak mempunyai nama yang sama dengan nama acara lalai yang dibina ke dalam Socket.IO untuk mengelakkan masalah yang tidak perlu.

4 API lain yang biasa digunakan

1). Siarkan kepada semua pelanggan: socket.broadcast.emit('broadcast message');

2). Masuk ke bilik (sangat mudah digunakan! Ia bersamaan dengan ruang nama dan boleh disiarkan ke bilik tertentu tanpa menjejaskan pelanggan di bilik lain atau tidak di dalam bilik): socket.join('nama bilik anda' );

3). Siarkan mesej ke bilik (pengirim tidak boleh menerima mesej): socket.broadcast.to('nama bilik anda').emit('broadcast room message');

4). Siarkan mesej ke bilik (termasuk pengirim boleh menerima mesej) (API ini milik io.sockets): io.sockets.in('nama bilik lain').emit('broadcast room messages ' );

5). Paksa penggunaan komunikasi WebSocket: (klien) socket.send('hi'), (server) gunakan socket.on('message', function(data){}) untuk menerima.

5. Bina bilik sembang menggunakan Socket.IO

Akhir sekali, kami mengakhiri artikel ini dengan contoh mudah. Membina bilik sembang dengan Socket.IO hanya memerlukan kira-kira 50 baris kod, dan kesan sembang masa nyata juga sangat baik. Kod kunci disiarkan di bawah:

Pelayan (socketChat.js)

Salin kod Kod adalah seperti berikut:

//Kamus sambungan pelanggan, apabila pelanggan menyambung ke pelayan,
//SocketId unik akan dijana Kamus menyimpan pemetaan socketId kepada maklumat pengguna (nama panggilan, dll.)
var connectionList = {};

exports.startChat = fungsi (io) {
​ io.sockets.on('sambungan', fungsi (soket) {
//Apabila pelanggan menyambung, simpan socketId dan nama pengguna
        var socketId = socket.id;
ConnectionList[socketId] = {
soket: soket
        };

//Pengguna memasuki acara bilik sembang dan menyiarkan nama penggunanya kepada pengguna dalam talian lain
​​​​ socket.on('join', function (data) {
                socket.broadcast.emit('broadcast_join', data);
connectionList[socketId].nama pengguna = data.nama pengguna;
});

//Pengguna meninggalkan acara bilik sembang, menyiarkan pemergiannya kepada pengguna dalam talian yang lain
​​​​ socket.on('putuskan sambungan', fungsi () {
Jika (connectionList[socketId].nama pengguna) {
                     soket.broadcast.emit('broadcast_quit', {
                            nama pengguna: connectionList[socketId].nama pengguna
                });
            }
                padamkan senarai sambungan[socketId];
});

//Acara ucapan pengguna, siarkan kandungan ucapannya kepada pengguna dalam talian lain
socket.on('katakan', fungsi (data) {
               socket.broadcast.emit('broadcast_say',{
                     nama pengguna: connectionList[socketId].nama pengguna,
                   teks: data.text
            });
});
})
};

Pelanggan(socketChatClient.js)

Salin kod Kod adalah seperti berikut:

var soket = io.connect('http://localhost');
//Selepas menyambung ke pelayan, segera serahkan acara "sertai" dan beritahu orang lain nama pengguna anda
socket.emit('serta', {
Nama pengguna: 'Nama pengguna hehe'
});

//Selepas menerima siaran menyertai bilik sembang, paparkan mesej
socket.on('broadcast_join', fungsi (data) {
console.log(data.username 'Menyertai bilik sembang');
});

//Selepas menerima siaran bilik sembang cuti, paparkan mesej
socket.on('broadcast_quit', function(data) {
console.log(data.username 'Meninggalkan bilik sembang');
});

//Selepas menerima mesej daripada orang lain, paparkan mesej itu
socket.on('broadcast_say', function(data) {
console.log(data.username 'katakan: ' data.text);
});

//Di sini kita andaikan terdapat kawasan teks kotak teks dan butang hantar.btn-hantar
//Gunakan jQuery untuk mengikat acara
$('.btn-send').klik(fungsi(e) {
//Dapatkan teks kotak teks
var text = $('textarea').val();
//Serahkan acara katakan, dan pelayan akan menyiarkannya selepas menerimanya
socket.emit('katakan', {
         nama pengguna: 'Nama pengguna hehe'
         teks: teks
});
});

Ini adalah DEMO bilik sembang yang mudah, anda boleh mengembangkannya mengikut keperluan anda. Socket.IO pada asasnya adalah pemprosesan penyerahan dan penerimaan pelbagai acara. Idea ini sangat mudah.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn