Projek web menggunakan Node.js untuk melaksanakan fungsi pemesejan segera

Dengan perkembangan pesat Internet, fungsi pemesejan segera menjadi semakin biasa. Sama ada rangkaian sosial, e-dagang, permainan dalam talian, dll., fungsi pemesejan segera perlu dilaksanakan untuk meningkatkan pengalaman dan kecekapan pengguna. Sebagai persekitaran berjalan JavaScript yang cekap sesuai untuk permintaan serentak, Node.js menyediakan sokongan yang baik untuk membina aplikasi web dengan cepat dengan fungsi pemesejan segera.

Artikel ini akan memperkenalkan secara terperinci cara menggunakan Node.js untuk melaksanakan fungsi pemesejan segera berasaskan web. Projek ini adalah berdasarkan protokol WebSocket dan tidak menggunakan pengundian tradisional atau teknologi tinjauan panjang. Kelebihan teknologi WebSocket ialah ia boleh merealisasikan komunikasi dua hala masa nyata antara pelayan dan pelanggan, dan ia juga mempunyai sokongan yang baik untuk permintaan merentas domain.

1. Pemilihan Teknologi

Kami akan menggunakan teknologi berikut untuk membangunkan fungsi pemesejan segera ini:

• Node.js: Kami akan menggunakan Node.js sebagai persekitaran berjalan di sebelah pelayan.
• Express: Kami akan menggunakan rangka kerja Express untuk membangunkan aplikasi web.
• Socket.IO: Socket.IO ialah enjin komunikasi masa nyata merentas platform berdasarkan WebSocket dan tinjauan pendapat Ia serasi dengan penyemak imbas dan peranti mudah alih yang berbeza.
• MongoDB: Kami akan menggunakan MongoDB sebagai storan data.
• Bootstrap: Kami akan menggunakan rangka kerja Bootstrap untuk membina antara muka pengguna.

2. Bina rangka kerja projek

Mula-mula buat folder projek, masukkan direktori, dan kemudian laksanakan arahan berikut:

npm init
npm install express socket.io mongodb --save

Arahan di atas akan mencipta projek Node.js baharu, dan kemudian pasang perpustakaan bergantung yang diperlukan .

Langkah pertama ialah mencipta fail JavaScript baharu dalam direktori akar projek. Dalam kes ini, kami menamakan pelayan fail.js. Kemudian salin kod di bawah ke dalam fail server.js.

const express = require('express');
const app = express();
const http = require('http').Server(app);

// TODO：编写代码来启动Socket.IO服务

app.use(express.static('public'));

http.listen(3000, () => {
  console.log('listening on *:3000');
});

Kod di atas memperkenalkan rangka kerja Express, mencipta objek pelayan HTTP dan mendengar port 3000. Ini melibatkan pemulaan dan permulaan Socket.IO, yang akan dibincangkan kemudian. Pada masa yang sama, express.static() digunakan untuk menetapkan akses kepada folder statik program.

3. Konfigurasikan MongoDB

Jalankan arahan berikut untuk memasang MongoDB:

npm install mongodb --save

Buat fail JS baharu bernama mongo.js dalam direktori akar projek dan tambah kod berikut untuk menyediakan dan menjalankan MongoDB.

const MongoClient = require('mongodb').MongoClient;

// Connection URL
const url = 'mongodb://localhost:27017';
// Database Name
const dbName = 'chatDB';
// Use connect method to connect to the server
MongoClient.connect(url, function (err, client) {
  console.log('Connected successfully to mongodb server');

  const db = client.db(dbName);
  client.close();
});

Dalam fail ini, kami menggunakan objek MongoClient yang disediakan secara rasmi oleh MongoDB untuk menyambung ke pelayan MongoDB. MongoClient menyambung ke contoh mongod menggunakan URL dan ia menjalankan operasi dengan dbName sebagai parameter. Selepas menjalankan mongo.js, jika anda melihat mesej yang serupa dengan "Berjaya disambungkan ke pelayan MongoDB", anda telah berjaya menyambung ke MongoDB.

4. Mulakan perkhidmatan Socket.IO

Untuk memulakan perkhidmatan Socket.IO, kami akan menambah kod berikut pada fail server.js sebentar tadi:

const express = require('express');
const app = express();
const http = require('http').Server(app);

const io = require('socket.io')(http);
io.on('connection', function (socket) {
  console.log('a user connected');
  socket.on('disconnect', function () {
    console.log('user disconnected');
  });
});

app.use(express.static('public'));

http.listen(3000, () => {
  console.log('listening on *:3000');
});

Kod di atas mengimport dan mencipta contoh daripada modul socket.io, dan kemudian Acara sambungan ditetapkan. Acara sambungan dicetuskan apabila pelanggan menyambung ke pelayan Socket.IO. Kami telah menambahkan beberapa output pengelogan pada acara sambungan supaya kami boleh mengetahui pada konsol pelayan berapa ramai pengguna yang disambungkan ke pelayan Socket.IO kami.

5. Buat Pelanggan

Sekarang kita akan mula mencipta pelanggan. Dalam folder awam, cipta fail bernama index.html dan tambah kod berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Node.js Chat App</title>
  </head>
  <body>
    <h1>Welcome to the Chat Room!</h1>
    <div id="messages"></div>
    <form id="chat-form" action="#">
      <input id="message" type="text" placeholder="Type message" />
      <button type="submit">Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/client.js"></script>
  </body>
</html>

Dalam kod di atas, kami telah mencipta antara muka pengguna yang mudah untuk menghantar dan menerima mesej segera. Antara muka pengguna terutamanya terdiri daripada tiga bahagian:

• A
  elemen yang digunakan untuk memaparkan mesej sembang.
• Borang yang boleh digunakan oleh pengguna untuk menghantar mesej.
• Dua Satu digunakan untuk memuatkan perpustakaan klien socket.io dan satu lagi digunakan untuk memuatkan skrip klien.
6. Melaksanakan skrip sebelah klien

Buat fail JS baharu bernama client.js dalam folder awam, dan kemudian tambah kod berikut:

const socket = io();
const messageList = document.getElementById('messages');
const messageForm = document.getElementById('chat-form');
const messageInput = document.getElementById('message');

messageForm.addEventListener('submit', function (e) {
  e.preventDefault();
  socket.emit('chat message', messageInput.value);
  messageInput.value = '';
});

socket.on('chat message', function (msg) {
  const item = document.createElement('li');
  item.textContent = msg;
  messageList.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

Kod di atas ialah skrip sebelah pelanggan yang ringkas, menggunakan komunikasi Handles antara antara muka pengguna dan Socket.IO. Tanggungjawab utama kod klien adalah untuk menghantar mesej ke pelayan dan memaparkan mesej yang diterima pada antara muka pengguna. Kami menggunakan kaedah emit() Socket.IO untuk menghantar mesej kepada pelayan, dan menggunakan kaedah on() untuk menerima mesej yang dihantar daripada pelayan.

7. Menguji Apl

Sekarang kami mempunyai semua fail sedia, kami boleh memulakan pelayan web dan mengujinya dalam penyemak imbas. Di terminal, pergi ke direktori akar projek dan masukkan arahan berikut:

node server.js

Masukkan http://localhost:3000/ dalam pelayar anda untuk membuka aplikasi. Masukkan beberapa mesej sembang ke dalam antara muka pengguna dan kami dapat melihatnya ditambahkan pada senarai mesej sembang.

8. Kesimpulan

Node.js dan Socket.IO ialah pilihan yang sangat baik untuk membangunkan aplikasi web yang melaksanakan pemesejan segera. Dalam artikel ini, kami memperkenalkan cara untuk mencipta aplikasi sembang berasaskan web yang menggunakan Node.js sebagai persekitaran masa jalan, Express sebagai rangka kerja web, Socket.IO sebagai enjin komunikasi masa nyata dan MongoDB sebagai storan data. Ini adalah contoh yang sangat mudah, tetapi ia menunjukkan kepada kita cara teknologi ini boleh digunakan untuk melaksanakan keupayaan pemesejan segera.