Menggunakan socket.io untuk mewujudkan fungsi dorong pesan real-time

Pendahuluan Latar Belakang Proyek

Baru -baru ini, ada modul sosial dalam proyek yang telah saya tulis, dan perlu untuk menerapkan fungsi: ketika pengguna disukai, dikomentari, diikuti, dll. Terjadi, pesan perlu didorong oleh server kepada pengguna secara real time. Alamat proyek akhir adalah: https://github.com/noiron/socket-message-push. Di sini kami akan memperkenalkan ide implementasi dan beberapa kode.

Ada beberapa objek dalam proses proyek:

• Server backend diimplementasikan di java
• Pesan Push Server Dislementasikan dengan Node.js
• Klien yang dioperasikan pengguna

Proses pemrosesan acara adalah sebagai berikut:

• Ketika pengguna melakukan operasi yang sama, server backend akan memprosesnya dan mengirim pesan ke server push node.js.
• Setelah menerima pesan yang dikirim oleh backend, server Push Pesan Node.js memproses data dan menentukan pengguna mana yang harus mendorongnya
• Setelah klien pengguna menerima pesan yang didorong oleh server Node.js, dapat menampilkan pemberitahuan.
• Dalam proses di atas, bagaimana server backend Java diimplementasikan tidak berada dalam ruang lingkup artikel ini. Artikel ini terutama akan memperkenalkan cara menggunakan node.js untuk mengimplementasikan server push pesan ini.

Pertimbangkan bahwa Server Push Pesan harus merekam informasi pengguna online saat ini sehingga pesan dapat didorong ke pengguna tertentu. Oleh karena itu, ketika pengguna masuk, ia harus mengirim informasi penggunanya sendiri ke server Node.js. Untuk mencapai pesan waktu nyata dua arah ini, jelas bahwa WebSocket diimplementasikan. Karena kami menggunakan Node.js pada server Push Push, kami memiliki opsi yang sangat nyaman: Socket.io.

Pengantar socket.io

Socket.io adalah perpustakaan komunikasi dua arah real-time yang diimplementasikan dalam JavaScript. Akan mudah menggunakannya untuk mengimplementasikan fungsi kami.

socket.io berisi dua bagian:

• Server: Jalankan di Node.js Server
• Klien: Jalankan di browser

Anda dapat melihat contoh kode socket.io berikut, yang memberikan penggunaan dasar socket.io untuk mengeluarkan dan mendengarkan acara:

 io.on ('connection', function (socket) {socket.emit ('request', / * * /); // emit acara ke socket io.emit ('siaran', / * * /); // emit acara ke semua soket yang terhubung.

Ada hal lain yang perlu diperhatikan tentang Socket.io: Socke.io tidak sepenuhnya merupakan implementasi Websocket.

Catatan: Socket.io bukan implementasi WebSocket. Meskipun Socket.io memang menggunakan WebSocket sebagai transportasi bila memungkinkan, itu menambahkan beberapa metadata untuk setiap paket: jenis paket, namespace, dan ID ACK saat pengakuan pesan diperlukan.
Selanjutnya kita perlu menggunakan Express.js untuk membuat program sisi server dan memperkenalkan socket.io.

Konstruksi server node.js

Gunakan Express.js untuk membangun server dasar

Kami menggunakan Express.js untuk membangun server push node.js, dan pertama -tama gunakan contoh singkat untuk menelusuri fungsinya:

 // server.jsconst ekspresi = membutuhkan ('ekspres'); const app = express (); const path = membutuhkan ('path'); const http = membutuhkan ('http'). server (app); const port = 4001; app.use (express.static (path.join (__ dirname, 'public'))); app.get ('__ __ __ __ __ __ __ __ __ __ (__ __ + '/public/index.html'); --);app.get('/api', function (req, res) {res.sendfile (__ dirname + '/public/index.html') (function (') (function (') (function (') (function (') (function (') (function (') (function (') (function (') (function (') (function (') (function (') (function (') (function (') (function (') (req) {{'); {console.log (`mendengarkan di port: $ {port}`);});

Simpan kode di atas sebagai server.js, buat folder publik baru, dan letakkan file index.html di dalamnya. Jalankan perintah berikut:

node server.js

Anda sekarang dapat melihat efeknya di LocalHost: 4001.

Memperkenalkan socket.io

Sekarang ada server Express Dasar, Socket.io perlu ditambahkan ke sana selanjutnya.

 const io = membutuhkan ('socket.io') (http); io.on ('connection', function (socket) {console.log ('pengguna terhubung'); socket.broadcast.emit ('new_user', {});}

IO di sini mendengarkan acara koneksi. Setelah klien membuat koneksi dengan server, fungsi callback di sini akan dipanggil (kode di klien akan diperkenalkan di bagian berikutnya).

Soket parameter fungsi mewakili koneksi yang ditetapkan antara klien saat ini dan server. Anda dapat mencetak koneksi soket yang ditetapkan dalam program klien, seperti yang ditunjukkan pada gambar di bawah ini:

Atribut ID dapat digunakan untuk mengidentifikasi koneksi ini sehingga server dapat mengirim pesan ke pengguna tertentu.

 socket.broadcast.emit ('new_user', {});

Baris kode ini berarti bahwa soket akan menyiarkan pesan bernama New_User ke semua klien yang saat ini memiliki koneksi dengan server (tidak termasuk dirinya sendiri).

Proses pemrosesan pesan push backend

• Buat tabel pemetaan informasi pengguna dan ID soket di server node. Karena pengguna yang sama mungkin memiliki beberapa halaman dibuka, mungkin ada beberapa nilai untuk ID soketnya. Ketika pengguna membuat koneksi, tambahkan nilai ke dalamnya; Setelah pengguna terputus, hapus nilai yang sesuai.
• Ketika ada pesan yang perlu didorong di latar belakang Java, sebuah pesan diposting ke jalur server /API simpul, termasuk tokenID dan data lain yang digunakan untuk mengidentifikasi pengguna.
• Setelah server node menerima permintaan POST, ia memproses konten yang diminta. Temukan ID soket yang sesuai dengan pengguna berdasarkan tokenID, socket.io akan mendorong pesan ke pengguna berdasarkan ID.

Pemrosesan informasi pengguna

Untuk kenyamanan, hanya satu array yang digunakan untuk menyimpan informasi pengguna, yang dapat dimasukkan ke dalam database sesuai kebutuhan dalam pekerjaan aktual.

 global.users = []; // Catat tokenid, socketid dari pengguna yang masuk

Ketika pengguna masuk, klien akan mengirim acara user_login ke server. Setelah server menerimanya, itu akan melakukan hal berikut:

 socket.on ('user_login', function (info) {const {tokenid, userid, socketid} = info; addsocketid (pengguna, {tokenId, socketid, userid});});

addSocketId () akan menambahkan informasi pengguna ke array pengguna. Pengguna yang berbeda dapat membedakannya melalui tokenID. Setiap pengguna memiliki array soket, yang menyimpan beberapa soketid yang mungkin ada. Kode spesifik fungsi ini dapat ditemukan dalam file src/utils.js.

Demikian pula, ada juga fungsi deleteSocketId () yang digunakan untuk menghapus informasi pengguna, dan kode dapat dilihat pada file yang sama.

Setelah mendapatkan tokenID pengguna, Anda perlu menemukan socketid yang sesuai dan kemudian dorong pesan ke pengguna tertentu.

 // Kirim pesan hanya ke koneksi ini dengan id = socketid io.sockets.to (socketid) .eemit ('recequing_message', {entityType, data});

Gagasan server kira -kira seperti ini. Selanjutnya, mari kita perkenalkan cara memprosesnya sesuai dengan klien.

Klien

Inisialisasi Socket.io

Pertama, perkenalkan file sisi klien Socket.io di file HTML, misalnya, melalui CDN:

 <skrip src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"> </script>

Cara lain untuk memperkenalkan:

 <skrip src = "/socket.io/socket.io.js"></script>const io = membutuhkan ('socket.io-client'); // atau dengan sintaksis impor io dari 'socket.io-client';

Setelah memperkenalkan Socket.io, fungsi IO diperoleh, dan digunakan untuk membuat koneksi dengan server Push Pesan.

 // Misalkan alamat setelah Anda menggunakan server simpul adalah: https://www.example.com/ws// kemudian: ws_host = 'https: //www.example.com'const msgsocket = io (`$ {ws_host}`, {safe: true, path: `$ {ws_host}`, {Secure: True, PATH: `$

Jika mendengarkan secara lokal:

 const msgsocket = io ('http: // localhost: 4001');

Jika Anda menulisnya sebagai IO ('https://www.example.com/ws') di sini, kesalahan akan terjadi, dan/WS perlu ditulis ke dalam jalur.

Untuk dapat menggunakan variabel ini di file lain, msgsocket dapat digunakan sebagai variabel global:

 window.msgsocket = msgsocket;

Pengguna membuat koneksi

 // Saat pengguna masuk, kirim informasi pengguna ke server. Server akan membuat pemetaan soket dengan pengguna setelah menerima pesan. msgsocket.emit ('user_login', {userid, socketid: msgsocket.id, tokenID});

Memproses setelah menerima pesan yang didorong

 // Setelah koneksi WebSocket dibuat, dengarkan acara yang disebut recequent_message msgsocket.on ('receast_message', msg => {store.dispatch ({type: 'new_socket_msg', payload: msg});});

Ketika server WebSocket mendorong pesan ke klien, klien perlu mendengarkan acara Recequent_Message, dan parameter yang diterima berisi informasi yang tertunda.

Karena Redux digunakan untuk pemrosesan data, tindakan new_socket_msg dikirim ke sini, dan aliran pemrosesan redux rutin berikutnya disediakan.

Penggunaan proyek

Alamat Proyek di GitHub: https://github.com/noiron/socket-message-push

npm run dev

Anda dapat mengujinya di lingkungan pengembangan, dan sekarang Anda memiliki server push pesan yang berjalan di port 4001.

Tetapi tidak ada server backend di sini untuk mengirim pesan kepada kami, jadi kami akan menggunakan tukang pos untuk mensimulasikan pesan pengiriman.

Untuk menunjukkan fungsi program, file index.html ditempatkan di bawah folder klien proyek. Perhatikan bahwa file ini tidak dapat digunakan dalam proyek aktual, itu hanya digunakan untuk menampilkan efek push pesan.

Setelah menyalakan server, buka klien/index.html dan masukkan tokenID sesuai keinginan Anda sesuai dengan prompt.

Sekarang gunakan tukang pos untuk memposting pesan berikut ke LocalHost: 4001/API:

 {// Array token menunjukkan pengguna mana yang ingin Anda dorong pesan "token": ["1", "2"], "data": "Anda tidak akan lulus !!!"}

Pada titik ini, jika semuanya berjalan dengan baik, Anda harus dapat melihat pesan yang diterima di konsol klien.

Anda dapat membuka beberapa halaman klien, memasukkan tokenID yang berbeda, dan kemudian periksa apakah pesan tersebut dikirim ke pengguna yang benar.

Meringkaskan

Di atas adalah apa yang diperkenalkan editor kepada Anda untuk menggunakan socket.io untuk mewujudkan fungsi push pesan waktu-nyata. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!