Cara Membina Aplikasi Sembang Masa Nyata Menggunakan Socket.io-tutorial js-php.cn

Cara Membina Aplikasi Sembang Masa Nyata Menggunakan Socket.io

Linda Hamilton

Lepaskan： 2024-11-26 20:40:10

asal

861 orang telah melayarinya

How to Build a Real-Time Chat Application Using Socket.io

Dalam tutorial ini, saya akan membimbing anda melalui proses membina aplikasi sembang masa nyata menggunakan Socket.io dengan Node.js dan Express. Ini ialah panduan mesra pemula yang akan memberi anda pemahaman praktikal tentang cara komunikasi masa nyata berfungsi dalam aplikasi web. Saya akan menunjukkan kepada anda cara untuk menyediakan pelayan, mencipta antara muka hadapan dan mewujudkan komunikasi antara klien dan pelayan menggunakan Socket.io.

Apa yang Anda Akan Pelajari

Apakah itu Socket.io dan cara ia berfungsi
Menyediakan pelayan Node.js asas
Mengintegrasikan Socket.io untuk komunikasi masa nyata
Membina bahagian hadapan dengan HTML dan JavaScript
Menghantar dan menerima mesej dalam masa nyata

Prasyarat

Sebelum saya mula, pastikan anda telah memasang yang berikut:

Node.js: Anda boleh memuat turunnya dari sini.
npm (Pengurus Pakej Node): Ini disertakan bersama Node.js, jadi jika anda telah memasang Node.js, anda sudah mempunyai npm.
Anda juga harus mempunyai pemahaman asas tentang JavaScript, HTML dan CSS.

Langkah 1: Sediakan Projek Anda

Mari mulakan dengan menyediakan projek baharu.

Buat direktori baharu untuk projek anda dan navigasi ke dalamnya:

mkdir sembang masa nyata
cd sembang masa nyata

Mulakan projek Node.js baharu:

npm init -y

Pasang kebergantungan yang diperlukan: Saya memerlukan Express untuk pelayan dan Socket.io untuk komunikasi masa nyata.

npm pasang soket ekspres.io

Langkah 2: Sediakan Bahagian Belakang (Node.js & Express)

Saya akan mencipta fail baharu bernama server.js. Fail ini akan mengandungi kod hujung belakang.

Buat server.js dan tambah kod berikut untuk menyediakan pelayan Express asas dengan Socket.io:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

// Set up the app
const app = express();
const server = http.createServer(app);
const io = socketIo(server);  // Initialize Socket.io

// Serve static files (for front-end)
app.use(express.static('public'));

// Listen for incoming socket connections
io.on('connection', (socket) => {
    console.log('A user connected');

    // Listen for messages from clients
    socket.on('chat message', (msg) => {
        // Emit the message to all connected clients
        io.emit('chat message', msg);
    });

    // Handle disconnection
    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});

// Start the server
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Salin selepas log masuk

Penjelasan:

Saya menggunakan Express untuk menyampaikan fail statik (bahagian hadapan).
Socket.io dimulakan dan mendengar sambungan masuk.
Apabila pengguna menghantar mesej melalui 'mesej sembang', mesej itu disiarkan kepada semua pelanggan yang disambungkan menggunakan io.emit().
Apabila pengguna memutuskan sambungan, pelayan merekodkan mesej.

Langkah 3: Sediakan Frontend (HTML & JavaScript)

Sekarang, saya akan mencipta bahagian hadapan yang mudah di mana pengguna boleh menghantar dan menerima mesej.

Buat folder bernama awam dalam direktori projek anda. Ini akan menyimpan fail bahagian hadapan anda.
Di dalam folder awam, saya akan mencipta fail index.html. Ini akan menjadi antara muka sembang.

<!DOCTYPE html>
<html lang="en">
<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sembang Masa Nyata</title>
    <gaya>
        badan { font-family: Arial, sans-serif; }
        ul { list-style-type: none; padding: 0; }
        li { padding: 8px; jidar: 5px 0; warna latar belakang: #f1f1f1; }
        input[type="text"] { width: 300px; padding: 10px; jidar: 10px 0; }
        butang { padding: 10px; }
    </style>
</head>
<badan>
    <h1>Aplikasi Sembang Masa Nyata</h1>
    <ul>



<p><strong>Penjelasan:</strong></p>

Salin selepas log masuk

Antara muka sembang termasuk medan input untuk menaip mesej dan butang untuk menghantarnya.
Saya menggunakan perpustakaan klien Socket.io untuk mewujudkan sambungan dengan pelayan.
Apabila mesej dihantar, ia dipancarkan melalui acara mesej sembang.
Mesej masuk dipaparkan dalam

Langkah 4: Jalankan Aplikasi

Sekarang semuanya telah disediakan, mari jalankan aplikasinya.

Mulakan pelayan:

pelayan nod.js

Buka penyemak imbas anda dan navigasi ke http://localhost:3000. Anda sepatutnya melihat antara muka sembang anda.
Buka URL yang sama dalam berbilang tab atau penyemak imbas yang berbeza untuk menguji komunikasi masa nyata. Apabila anda menghantar mesej dalam satu tab, ia sepatutnya muncul dalam semua tab lain dalam masa nyata.

Langkah 5: Kesimpulan

Tahniah! Anda telah berjaya membina aplikasi sembang masa nyata menggunakan Socket.io. Aplikasi ini membolehkan pengguna berkomunikasi antara satu sama lain dalam masa nyata, yang merupakan ciri yang berkuasa untuk banyak aplikasi web moden. Kini anda boleh membina ini dengan menambahkan lebih banyak ciri, seperti pengesahan pengguna, mesej peribadi atau bilik sembang.

Apa Seterusnya?

Tambahkan pengesahan pengguna untuk membolehkan pengguna log masuk sebelum bersembang.
Simpan mesej sembang dalam pangkalan data seperti MongoDB untuk kegigihan.
Tingkatkan UI dengan rangka kerja CSS seperti Bootstrap atau Tailwind CSS.

Jangan ragu untuk mengubah suai projek untuk memenuhi keperluan anda dan terokai ciri Socket.io lain seperti bilik dan ruang nama!

Selamat pengekodan!

Atas ialah kandungan terperinci Cara Membina Aplikasi Sembang Masa Nyata Menggunakan Socket.io. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!