Sembang masa nyata dengan nestjs dan socket.io

Siaran ini meneroka membina sistem sembang masa nyata menggunakan NestJS dan Socket.io. Saya menyemak semula projek bahagian hadapan mikro sebelumnya (Membina sistem sebagai lego dengan bahagian hadapan tindak balas dan mikro) yang tidak mempunyai bahagian belakang yang teguh. Kali ini, saya menambah bahagian belakang NestJS untuk mengendalikan fungsi sembang masa nyata merentas berbilang halaman muka hadapan mikro.

⚠️ Blog ini akan berkembang dengan ketara tahun ini dengan siaran dan video yang lebih kerap! Langgan untuk kekal dikemas kini!

Matlamat Projek ?

Matlamatnya adalah untuk mencipta sistem yang mudah untuk menghantar dan menerima mesej antara pengguna yang disambungkan ke sembang, meminimumkan kerumitan yang tidak perlu.

Projek belakang: https://www.php.cn/link/037a15f03246f075193b2a295ba4c466

Projek hadapan: https://www.php.cn/link/ee0f827fe45c91c956bacfd78d91d47b

Proses Pembangunan

Halaman belakang telah dimulakan menggunakan NestJS CLI:

nest generate module chat

Fail chat-gateway.ts kemudian dibuat (lihat: https://www.php.cn/link/037a15f03246f075193b2a295ba4c466/blob/master/src/chat/chat-gateway.ts).

Fungsi sembang termasuk:

• Pemberitahuan sambungan pengguna
• Pemberitahuan pemotongan sambungan pengguna
• Penyiaran mesej

ChatGateway menggunakan @WebSocketGateway penghias, berfungsi sebagai pembekal (ditambahkan pada chat.module). CORS telah didayakan, dan port telah disesuaikan (walaupun tidak begitu diperlukan). Gerbang melaksanakan antara muka untuk handleConnection dan handleDisconnect.

handleConnection dan handleDisconnect Kaedah

Seperti yang diperincikan dalam dokumentasi rasmi NestJS (https://www.php.cn/link/9edfa99c15e2845965b91b38e2b1311c), handleConnection menerima contoh soket pelanggan. Ia mengeluarkan acara user-joined, memberitahu semua pelanggan yang disambungkan tentang pengguna baharu. handleDisconnect sama menggunakan contoh WebSocketServer untuk memancarkan acara user-left.

Pengendalian Mesej (handleNewMessage)

Kaedah @SubscribeMessage dihiasi handleNewMessage mengendalikan mesej masuk. Ia menyiarkan mesej yang diterima kepada semua pelanggan yang berkaitan.

Pelaksanaan Depan

Halaman hadapan (terperinci dalam catatan blog bahagian hadapan mikro yang dinyatakan sebelum ini) menggunakan satu komponen sembang yang memerlukan pengubahsuaian. Perubahan telah dibuat kepada (https://www.php.cn/link/ee0f827fe45c91c956bacfd78d91d47b/blob/master/apps/chat/src/components/Chat/index.tsx):

• Sepadukan socket.io-client perpustakaan.
• Tetapkan sambungan ke port hujung belakang.
• Tambahkan pendengar acara untuk user-joined, user-left, message dan newMessage.
• Pelarasan kecil untuk mengalih keluar logik "balas bot" sebelumnya.

Logik komponen agak mudah.

Kesimpulan

Projek ini memfokuskan pada fungsi teras, melaksanakan modul sembang secara langsung tanpa abstraksi yang meluas. Siaran akan datang akan meneroka ciri tambahan menggunakan NestJS dan Socket.io.

Atas ialah kandungan terperinci Sembang masa nyata dengan nestjs dan socket.io. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!