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:
Proses pemrosesan acara adalah sebagai berikut:
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:
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
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!