Bina aplikasi web chatroom node.js yang berkuasa: nod, mongoDB dan soket

Takeaways Key

Tutorial menyediakan panduan langkah demi langkah untuk membina aplikasi web sembang masa nyata menggunakan Node.js, MongoDB, dan Socket.io. Ruang sembang akan digunakan sepenuhnya di awan.
Tutorial menerangkan cara menggunakan Socket.io untuk membuat aplikasi komunikasi berasaskan acara bidirectional masa nyata. Ia memudahkan proses menggunakan websocket dengan ketara.
Tutorial menunjukkan cara log pengguna menyertai dan meninggalkan ruang sembang dan bagaimana menyiarkan mesej yang diterima di saluran sembang ke semua sambungan lain di soket.
Tutorial menunjukkan cara menyimpan mesej sembang ke pangkalan data MongoDB dan bagaimana untuk memancarkan 10 mesej terakhir yang diterima untuk memberikan konteks kepada setiap pengguna baru yang menyertai ruang sembang.
Tutorial disimpulkan dengan sistem sembang yang mampu menyiarkan mesej yang diterima melalui WebSockets kepada semua pelanggan yang berkaitan. Sistem ini menyimpan mesej ke pangkalan data dan mengambil 10 mesej terakhir untuk setiap pengguna baru.

Artikel ini adalah sebahagian daripada siri Web Dev Tech dari Microsoft. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Siri Tutorial Node.js ini akan membantu anda membina aplikasi web sembang masa nyata yang dikerahkan sepenuhnya di awan. Dalam siri ini, anda akan belajar bagaimana untuk menyiapkan node.js pada mesin Windows anda (atau hanya mempelajari konsep jika anda berada Azure, cara menggunakan socket.io untuk menambah lapisan masa nyata, dan bagaimana untuk menggunakannya bersama-sama.

Tutorial akan menggunakan pilihan Visual Studio dan alat Node.js untuk pemalam Visual Studio sebagai persekitaran pembangunan. Saya telah menyediakan pautan ke muat turun percuma kedua -dua alat. Ini adalah pemula untuk artikel peringkat pertengahan -Anda dijangka mengetahui HTML5 dan JavaScript.

Bahagian 1 - Pengenalan kepada Node.js

bahagian 2 - selamat datang untuk menyatakan dengan node.js dan azure

Bahagian 3 - Membina backend dengan node.js, mongo dan socket.io

Bahagian 4 - Membangun UI Chatroom dengan Bootstrap

Bahagian 5 - Menghubungkan ruang sembang dengan WebSockets

Bahagian 6 - Akhir dan debug Remote Node.js Apps

Bahagian 3 - Membina backend ruang sembang dengan node.js, socket.io dan mongo

Selamat datang ke Bahagian 3 Siri Tutorial Node.js Hands-on: Bina aplikasi web chatroom-berkuasa node.js. Dalam ansuran ini, saya akan menunjukkan kepada anda cara menggunakan aplikasi Node.js berasaskan ekspres sedia ada untuk membuat backend ruang sembang dengan sokongan WebSocket.

Apa itu WebSockets? Apa itu Socket.io?

WebSocket adalah protokol yang direka untuk membolehkan aplikasi web membuat saluran penuh-dupleks melalui TCP (iaitu mempunyai komunikasi bi-arah) antara pelayar web dan pelayan web. Ia serasi sepenuhnya dengan HTTP dan menggunakan nombor port TCP 80. WebSocket telah membolehkan aplikasi web menjadi masa nyata dan menyokong interaksi lanjutan antara klien dan pelayan. Ia disokong oleh beberapa pelayar termasuk Internet Explorer, Google Chrome, Firefox, Safari dan Opera.

socket.io adalah modul JavaScript dan modul Node.js yang membolehkan anda membuat aplikasi komunikasi berasaskan acara bidirectional secara real-time dengan mudah dan cepat. Ia memudahkan proses menggunakan websocket dengan ketara. Kami akan menggunakan socket.io v1.0 untuk membuat aplikasi ruang sembang kami.

menambah soket.io ke pakej.json

Package.json adalah fail yang memegang pelbagai metadata yang berkaitan dengan projek, termasuk kebergantungannya. NPM boleh menggunakan fail ini untuk memuat turun modul yang diperlukan oleh projek. Lihatlah penjelasan interaktif Package.json ini dan apa yang boleh mengandungi.

Mari tambahkan soket.io ke projek sebagai kebergantungan. Terdapat dua cara untuk melakukannya.

1. Jika anda telah mengikuti siri tutorial dan mempunyai projek dalam persediaan Visual Studio, klik kanan pada bahagian NPM projek dan pilih "Pasang pakej NPM baru ..."

Setelah tetingkap telah dibuka, cari "socket.io", pilih hasil teratas dan periksa kotak semak "Tambah ke Package.json". Klik butang "Pasang Pakej". Ini akan memasang socket.io ke dalam projek anda dan menambahkannya ke fail pakej.json.

pakej.json

<span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>

1. Jika anda berada di OS X atau Linux, anda boleh mencapai tindakan yang sama seperti di atas dengan menjalankan arahan berikut dalam akar folder projek anda.

<span>npm install --save socket.io</span>

menambah soket.io ke app.js

Langkah seterusnya ialah menambah soket.io ke app.js. Anda boleh mencapai ini dengan menggantikan kod berikut ...

http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

... dengan:

<span>var serve = http.createServer(app);
</span><span>var io = require('socket.io')(serve);
</span>
serve<span>.listen(app.get('port'), function() {
</span>    <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

Ini akan menangkap pelayan HTTP dalam pembolehubah yang dipanggil servis dan lulus pelayan HTTP supaya modul socket.io dapat melampirkannya. Blok kod terakhir mengambil pemboleh ubah servis dan melaksanakan fungsi mendengar yang memulakan pelayan HTTP.

Logging pengguna menyertai dan meninggalkan

Sebaik -baiknya, kami mahu log pengguna menyertai ruang sembang. Kod berikut mencapai bahawa dengan mengaitkan fungsi panggil balik untuk dilaksanakan pada setiap acara sambungan tunggal melalui WebSocket ke pelayan HTTP kami. Dalam fungsi panggil balik, kami memanggil Console.log untuk log yang disambungkan pengguna. Kami boleh menambah kod ini selepas kami memanggil servis.Listen.

<span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>

Untuk melakukan perkara yang sama apabila pengguna memutuskan sambungan, kita perlu menyambungkan acara putus untuk setiap soket. Tambahkan kod berikut di dalam selepas log konsol blok kod sebelumnya.

<span>npm install --save socket.io</span>

Akhirnya, kod akan kelihatan seperti ini:

http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

menyiarkan mesej yang diterima di saluran sembang

socket.io memberi kami fungsi yang dipanggil emit untuk menghantar acara.

Sebarang mesej yang diterima di saluran sembang akan disiarkan ke semua sambungan lain di soket ini dengan memanggil emit dengan bendera siaran dalam panggilan balik.

<span>var serve = http.createServer(app);
</span><span>var io = require('socket.io')(serve);
</span>
serve<span>.listen(app.get('port'), function() {
</span>    <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

Akhirnya, kod akan kelihatan seperti ini:

io<span>.on('connection', function (socket) {
</span>    <span>console.log('a user connected');
</span><span>});</span>

menyimpan mesej ke pangkalan data NoSQL

Bilik sembang harus menyimpan mesej sembang ke kedai data yang mudah. Biasanya, terdapat dua cara untuk menyimpan ke pangkalan data dalam nod; Anda boleh menggunakan pemacu khusus pangkalan data atau anda boleh menggunakan ORM. Dalam tutorial ini, saya akan menunjukkan kepada anda bagaimana untuk menyimpan mesej ke MongoDB. Sudah tentu, anda boleh menggunakan pangkalan data lain yang anda suka, termasuk pangkalan data SQL seperti PostgreSQL atau MySQL.

Anda harus pastikan anda mempunyai mongoDB untuk disambungkan. Anda boleh menggunakan perkhidmatan pihak ketiga untuk menjadi tuan rumah MongoDB anda seperti Mongohq atau Mongolab. Lihatlah tutorial ini untuk melihat bagaimana anda boleh membuat mongoDB menggunakan tambahan Mongolab di Azure. Anda boleh berhenti membaca apabila anda sampai ke bahagian "Buat App", pastikan anda menyimpan mongolab_uri di suatu tempat yang anda boleh mengakses dengan mudah kemudian.

Sebaik sahaja anda telah membuat mongoDB dan anda mempunyai mongolab_uri untuk pangkalan data - di bawah maklumat sambungan yang anda telah disalin ke papan klip anda - anda akan memastikan bahawa URI tersedia untuk permohonan itu. Ia bukan amalan terbaik untuk menambah maklumat sensitif seperti URI ini ke dalam kod anda atau ke dalam fail konfigurasi dalam alat pengurusan kod sumber anda. Anda boleh menambah nilai ke senarai Strings Connection dalam menu konfigurasi aplikasi Web Azure anda (seperti dalam tutorial yang anda gunakan) atau anda boleh menambahkannya ke senarai tetapan aplikasi (dengan nama CustomConnstr_mongolab_uri). Di mesin tempatan anda, anda boleh menambahkannya ke pembolehubah persekitaran dengan nama CustomConnstr_mongolab_uri dan nilai URI.

Langkah seterusnya ialah menambah sokongan untuk MongoDB ke projek kami. Anda boleh melakukannya dengan menambahkan baris berikut ke objek Dependencies dalam Package.json. Pastikan untuk menyimpan perubahan anda pada fail.

socket<span>.on('disconnect', function () {
</span>        <span>console.log('user disconnected');
</span>    <span>});</span>

Klik kanan pada bahagian NPM projek dalam Solution Explorer untuk mendedahkan menu konteks klik kanan. Klik "Pasang Pakej Hilang" dari menu Kandungan untuk memasang pakej MongoDB supaya ia boleh digunakan sebagai modul.

kami mahu mengimport modul itu untuk dapat menggunakan objek klien MongoDB di app.js. Anda boleh menambah baris kod berikut selepas panggilan fungsi pertama (''), seperti pada baris 11.

<span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>

kami mahu menyambung ke pangkalan data menggunakan URI yang kami ada dalam pembolehubah persekitaran CustomConnstr_Mongolab_URI. Setelah disambungkan, kami ingin memasukkan mesej sembang yang diterima dalam sambungan soket.

<span>npm install --save socket.io</span>

Seperti yang anda lihat dalam kod di atas, kami menggunakan objek Process.env untuk mendapatkan nilai pembolehubah persekitaran. Kami masuk ke koleksi dalam pangkalan data dan kami memanggil fungsi sisipan dengan kandungan dalam objek.

Setiap mesej kini disimpan ke dalam pangkalan data MongoDB kami.

memancarkan 10 mesej terakhir yang diterima

Sudah tentu, kami tidak mahu pengguna kami berasa hilang apabila menyertai ruang sembang, jadi kami harus memastikan untuk menghantar 10 mesej terakhir yang diterima ke pelayan sehingga sekurang -kurangnya kami dapat memberi mereka beberapa konteks. Untuk melakukan itu, kita perlu menyambung MongoDB. Dalam kes ini, saya menahan diri daripada membungkus semua kod soket dengan satu sambungan ke pangkalan data supaya saya masih boleh mempunyai pelayan yang bekerja walaupun kehilangan sambungan pangkalan data.

kami juga ingin menyusun dan mengehadkan pertanyaan saya kepada 10 mesej terakhir, kami akan menggunakan mongoDB yang dihasilkan _id kerana ia mengandungi cap waktu (walaupun dalam situasi yang lebih berskala, anda ingin membuat timestamp khusus dalam mesej sembang ) dan kami akan memanggil fungsi had untuk mengehadkan hasilnya kepada hanya 10 mesej.

kami akan mengalir hasil dari MongoDB supaya saya dapat memancarkannya secepat mungkin ke ruang sembang ketika mereka tiba.

http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

Kod di atas melakukan tugas seperti yang dijelaskan dalam perenggan sebelumnya.

Menyebarkan ke Azure

anda boleh mengulangi ke Azure dengan mengikuti tutorial masa lalu (seperti Bahagian 2).

Kesimpulan

Kesimpulannya, kami mempunyai sistem sembang yang mampu menyiarkan mesej yang diterima melalui WebSockets kepada semua pelanggan yang bersambung. Sistem ini menyimpan mesej ke pangkalan data dan mengambil 10 mesej terakhir untuk memberi konteks kepada setiap pengguna baru yang menyertai ruang sembang.

Nantikan bahagian 4!

Bahagian 4 - Membina UI Chatroom dengan Bootstrap ada di sini. Anda boleh terus terkini mengenai artikel ini dan lain-lain dengan mengikuti akaun Twitter saya.

lebih banyak pembelajaran untuk nod pada azure

Untuk pembelajaran yang lebih mendalam mengenai nod, kursus saya boleh didapati di Microsoft Virtual Academy.

atau beberapa video yang lebih pendek pada subjek nod yang sama:

• siri enam bahagian: aplikasi bangunan dengan node.js

• bersiar -siar melalui nod (coding4fun)

Artikel ini adalah sebahagian daripada siri Web Dev Tech dari Microsoft. Kami teruja untuk berkongsi Projek Spartan dan enjin rendering baru dengan anda. Dapatkan Mesin Maya Percuma atau Ujian dari jauh pada peranti Mac, iOS, Android, atau Windows anda di Modern.ie .

Soalan Lazim (Soalan Lazim) Mengenai Membangun Aplikasi Web Sembang Sembang Node.js

Bagaimanakah saya dapat memastikan keselamatan aplikasi web ruang sembang saya yang dibina dengan node.js, mongoDB, dan socket.io?

Keselamatan adalah aspek penting dari mana -mana aplikasi web. Untuk aplikasi web ruang sembang yang dibina dengan Node.js, MongoDB, dan Socket.io, anda boleh melaksanakan beberapa langkah keselamatan. Pertama, gunakan HTTPS dan bukannya HTTP untuk memastikan semua komunikasi antara pelayan dan pelanggan anda disulitkan. Kedua, sahkan semua data masuk untuk mencegah serangan suntikan SQL. Ketiga, gunakan JWT (Token Web JSON) untuk pengesahan pengguna. Akhir sekali, kerap mengemas kini semua kebergantungan anda kepada versi terkini mereka untuk mengelakkan kelemahan keselamatan yang berpotensi. Sangat fleksibel dan boleh diintegrasikan dengan pelbagai pangkalan data. Walaupun MongoDB adalah pilihan yang popular kerana skalabiliti dan fleksibiliti, anda juga boleh menggunakan pangkalan data lain seperti MySQL, PostgreSQL, atau SQLite bergantung kepada keperluan khusus anda. Pilihan pangkalan data sebahagian besarnya bergantung pada keperluan data aplikasi anda dan ciri -ciri khusus pangkalan data. Aplikasi Web Chatroom Node.js, anda boleh menggunakan pengimbang beban untuk mengedarkan trafik masuk ke beberapa pelayan. Anda juga boleh menggunakan modul clustering dalam node.js untuk membuat proses kanak -kanak yang semua port pelayan saham. Di samping itu, pertimbangkan untuk menggunakan pangkalan data NoSQL seperti MongoDB, yang boleh dengan mudah skala mendatar untuk mengendalikan lebih banyak data.

Bolehkah saya menggunakan teknologi masa nyata yang lain dan bukannya socket.io untuk aplikasi web chatroom saya?

Ya, terdapat beberapa teknologi masa nyata lain yang boleh anda gunakan dan bukannya socket.io. Ini termasuk WebSockets, Server-Sent Events (SSE), dan perkhidmatan pihak ketiga seperti Pusher atau Firebase. Setiap teknologi ini mempunyai kekuatan dan kelemahan tersendiri, jadi pilihan bergantung pada keperluan khusus anda. adalah bahagian penting dalam proses pembangunan. Untuk aplikasi web ruang sembang Node.js, anda boleh menggunakan rangka kerja ujian seperti mocha atau jest untuk menulis ujian unit dan ujian integrasi. Anda juga boleh menggunakan alat seperti Postman atau Insomnia untuk ujian API. Di samping itu, pertimbangkan untuk menggunakan alat ujian end-to-end seperti cypress atau dalang untuk mensimulasikan interaksi pengguna dan memastikan aplikasi anda berfungsi seperti yang diharapkan. 🎜>

Terdapat beberapa platform yang membolehkan anda menggunakan aplikasi web Chatroom Node.js anda. Ini termasuk Heroku, AWS, Google Cloud, dan Azure. Setiap platform mempunyai proses penempatan sendiri, tetapi secara amnya, anda perlu membuat akaun, menubuhkan projek baru, dan ikuti arahan platform untuk menggunakan aplikasi anda.

Bolehkah saya menambah sokongan multimedia ke aplikasi web chatroom node.js saya? Ini boleh dilakukan dengan mengintegrasikan perkhidmatan pihak ketiga seperti Cloudinary atau AWS S3 untuk menyimpan dan mengambil fail multimedia. Anda juga boleh menggunakan socket.io untuk menghantar dan menerima data multimedia secara real-time.

Bagaimana saya boleh menambah pengesahan pengguna ke aplikasi web chatroom node.js saya?

Pengesahan pengguna adalah penting ciri untuk mana -mana aplikasi web chatroom. Untuk aplikasi Node.js, anda boleh menggunakan pasport.js, middleware yang popular untuk mengendalikan pengesahan pengguna. Ia menyokong pelbagai strategi pengesahan, termasuk nama pengguna dan kata laluan tempatan, OAuth, dan JWT. adalah teknologi backend dan boleh berfungsi dengan mana -mana rangka kerja atau perpustakaan. Walaupun tutorial menggunakan HTML dan CSS biasa, anda boleh menggunakan kerangka frontend seperti React, Sudut, atau Vue.js untuk membina antara muka pengguna yang lebih kompleks dan interaktif. Pengendalian ralat App?

adalah bahagian penting dari sebarang aplikasi web. Dalam node.js, anda boleh menggunakan middleware untuk mengendalikan kesilapan. Ini melibatkan mewujudkan fungsi khas yang mengambil empat hujah: ralat, permintaan, tindak balas, dan seterusnya. Anda kemudiannya boleh menggunakan fungsi ini untuk log ralat, menghantar respons ralat kepada pelanggan, atau bahkan mengalihkan pengguna ke halaman ralat.

Atas ialah kandungan terperinci Bina aplikasi web chatroom node.js yang berkuasa: nod, mongoDB dan soket. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!