Tạo ứng dụng chat đơn giản sử dụng Socket.IO trong Node.js
Hướng dẫn chi tiết cách tạo một ứng dụng chat đơn giản sử dụng Socket.IO trong Node.js, cho phép người dùng gửi và nhận tin nhắn theo thời gian thực.
Bài viết này sẽ hướng dẫn bạn cách tạo một ứng dụng chat đơn giản sử dụng Socket.IO. Bạn sẽ tìm hiểu cách thiết lập server Node.js, tạo giao diện người dùng bằng HTML, và sử dụng Socket.IO để xử lý các kết nối và tin nhắn trong thời gian thực.
Mã Node.js:
server.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
function sendMessage() {
const msg = document.getElementById('message').value;
socket.emit('chat message', msg);
document.getElementById('message').value = '';
return false; // Ngăn chặn reload trang
}
socket.on('chat message', function(msg) {
const item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form onsubmit="return sendMessage();">
<input id="message" autocomplete="off" /><button>Gửi</button>
</form>
</body>
</html>
Giải thích chi tiết từng dòng code:
server.js
-
import modules: Nhập các mô-đun cần thiết (
express,http,socket.io). - create server: Tạo server và kết nối Socket.IO.
-
setup routes: Cài đặt route cho ứng dụng, trả về file
index.htmlkhi truy cập vào trang chính. -
handle connections: Khi một người dùng kết nối, in ra thông báo và lắng nghe sự kiện
chat messageđể gửi tin nhắn đến tất cả người dùng. - start server: Khởi động server trên cổng 3000.
index.html
- load socket.io: Nhúng thư viện Socket.IO từ server.
-
send message function: Hàm
sendMessageđể gửi tin nhắn khi người dùng nhấn nút gửi. - receive messages: Khi nhận được tin nhắn từ server, tạo một phần tử li mới và thêm vào danh sách.
Yêu cầu hệ thống:
- Node.js phiên bản 12.x hoặc cao hơn
- NPM (Node Package Manager)
Cách cài đặt các thư viện để chạy được đoạn mã Node.js trên:
- Tạo một thư mục mới và chuyển vào đó.
- Chạy lệnh sau để khởi tạo dự án Node.js:
npm init -y - Cài đặt các thư viện cần thiết:
npm install express socket.io
Lời khuyên:
- Thực hành nhiều với Socket.IO để hiểu rõ hơn về cách hoạt động của real-time communication.
- Bạn có thể mở rộng ứng dụng bằng cách thêm tính năng như thông báo khi người dùng kết nối hoặc ngắt kết nối, và lưu lịch sử trò chuyện.