Thiết kế web
Viết code 1 ứng dụng web chát với Node JS
Th6
Bước 1: Tạo một thư mục dự án mới
Tạo một thư mục mới cho dự án của bạn và chuyển vào thư mục đó.
mkdir chat-app
cd chat-app
Bước 2: Khởi tạo dự án Node.js
Sử dụng npm để khởi tạo một dự án Node.js mới.
npm init -y
Bước 3: Cài đặt các gói cần thiết
Cài đặt Express và Socket.io.
npm install express socket.io
Bước 4: Tạo tệp tin server.js
Tạo một tệp tin server.js để cấu hình server.
// server.js
const express = require(‘express’);
const http = require(‘http’);
const socketIo = require(‘socket.io’);
const path = require(‘path’);
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
// Serve static files
app.use(express.static(path.join(__dirname, ‘public’)));
io.on(‘connection’, (socket) => {
console.log(‘A user connected’);
// Handle chat message event
socket.on(‘chat message’, (msg) => {
io.emit(‘chat message’, msg);
});
// Handle disconnect event
socket.on(‘disconnect’, () => {
console.log(‘User disconnected’);
});
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
Bước 5: Tạo thư mục public và các tệp tin giao diện
Tạo thư mục public để chứa các tệp tin tĩnh như HTML, CSS và JavaScript.
mkdir public
Bước 6: Tạo tệp tin index.html
Tạo tệp tin index.html trong thư mục public.
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<style>
body { font: 14px sans-serif; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 8px; margin-bottom: 10px; background: #f4f4f4; }
#form { display: flex; }
#input { flex: 1; padding: 10px; }
#send { padding: 10px; }
</style>
</head>
<body>
<ul id=”messages”></ul>
<form id=”form”>
<input id=”input” autocomplete=”off” />
<button id=”send”>Send</button>
</form>
<script src=”/socket.io/socket.io.js”></script>
<script>
const socket = io();
const form = document.getElementById(‘form’);
const input = document.getElementById(‘input’);
const messages = document.getElementById(‘messages’);
form.addEventListener(‘submit’, (e) => {
e.preventDefault();
if (input.value) {
socket.emit(‘chat message’, input.value);
input.value = ”;
}
});
socket.on(‘chat message’, (msg) => {
const item = document.createElement(‘li’);
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>
Bước 7: Chạy ứng dụng
Chạy ứng dụng bằng lệnh sau:
bash
node server.js
Mở trình duyệt và truy cập vào http://localhost:3000. Bạn sẽ thấy giao diện chat và có thể bắt đầu gửi tin nhắn.
Lời kết
Chúng ta đã xây dựng một ứng dụng chat đơn giản bằng Node.js và Socket.io. Ứng dụng này có thể được mở rộng thêm nhiều tính năng như xác thực người dùng, lưu trữ tin nhắn, và hỗ trợ nhiều phòng chat.