Hi, I'm Tuan, a Full-stack Web Developer from Tokyo 😊. Follow my blog to not miss out on useful and interesting articles in the future.
1. Giới thiệu về WebSockets và ứng dụng trò chuyện đa nền tảng
1.1. WebSockets là gì?
WebSockets là một giao thức truyền thông hai chiều giữa máy khách và máy chủ trên một kết nối TCP duy trì liên tục. WebSockets cho phép trao đổi dữ liệu giữa máy khách và máy chủ một cách nhanh chóng và hiệu quả, hỗ trợ tính năng trò chuyện thời gian thực trong ứng dụng của bạn.
1.2. Ưu điểm của ứng dụng trò chuyện đa nền tảng
Một ứng dụng trò chuyện đa nền tảng cho phép người dùng truy cập và sử dụng dịch vụ trò chuyện trên nhiều thiết bị khác nhau, như điện thoại thông minh, máy tính bảng và máy tính để bàn. Điều này giúp người dùng luôn kết nối với bạn bè, gia đình và đồng nghiệp mọi lúc, mọi nơi.
2. Xây dựng ứng dụng trò chuyện đa nền tảng với Nodejs Express
2.1. Cài đặt môi trường phát triển
Để xây dựng ứng dụng trò chuyện, chúng ta cần cài đặt Node.js và Express. Node.js là một môi trường chạy mã JavaScript phía máy chủ, trong khi Express là một framework phổ biến dựa trên Node.js giúp xây dựng ứng dụng web nhanh chóng và dễ dàng.
2.1.1. Cài đặt Node.js
Truy cập trang chủ của Node.js tại https://nodejs.org/en/ để tải xuống và cài đặt phiên bản phù hợp cho hệ điều hành của bạn.
2.1.2. Cài đặt Express
Sau khi cài đặt Node.js, chúng ta cần cài đặt Express thông qua npm (Node Package Manager). Mở terminal hoặc Command Prompt và chạy lệnh sau:
npm install -g express
2.2. Khởi tạo dự án và cài đặt thư viện
Trước tiên, hãy tạo một thư mục mới cho dự án của bạn và chạy lệnh sau để khởi tạo dự án Node.js:
mkdir chat-app
cd chat-app
npm init -y
Sau đó, cài đặt các thư viện cần thiết cho dự án:
npm install express socket.io
2.3. Tạo máy chủ Express và thiết lập WebSockets
2.3.1. Tạo máy chủ Express
Tạo một tập tin mới có tên là index.js trong thư mục dự án và thêm mã sau:
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
app.use(express.static('public'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
const PORT = process.env.PORT || 3000;
http.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
2.3.2. Thiết lập WebSockets
Thêm mã sau vào tập tin index.js để thiết lập WebSockets và xử lý sự kiện kết nối:
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('disconnect', () => {
console.log('A user disconnected');
});
socket.on('chat message', (message) => {
io.emit('chat message', message);
});
});
2.4. Tạo giao diện người dùng
Trong thư mục dự án, tạo một thư mục mới có tên là public và thêm vào đó các tập tin index.html, styles.css và script.js.
2.4.1. Tập tin index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="chat-container">
<div id="messages"></div>
<form id="chat-form">
<input type="text" id="message-input" placeholder="Type your message...">
<button type="submit">Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="script.js"></script>
</body>
</html>
2.4.2. Tập tin styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#chat-container {
width: 80%;
max-width: 600px;
border: 1px solid #ccc;
padding: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 16px;
}
#messages {
flex-grow: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.message {
padding: 8px;
background-color: #f1f1f1;
border-radius: 4px;
word-break: break-word;
}
#chat-form {
display: flex;
gap: 8px;
}
#message-input {
flex-grow: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 16px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
2.4.3. Tập tin script.js
const socket = io();
const messages = document.getElementById('messages');
const chatForm = document.getElementById('chat-form');
const messageInput = document.getElementById('message-input');
chatForm.addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value;
socket.emit('chat message', message);
messageInput.value = '';
});
socket.on('chat message', (message) => {
const newMessage = document.createElement('div');
newMessage.classList.add('message');
newMessage.textContent = message;
messages.appendChild(newMessage);
messages.scrollTop = messages.scrollHeight;
});
2.5. Chạy ứng dụng trò chuyện đa nền tảng
Để chạy ứng dụng, hãy mở terminal hoặc Command Prompt, chuyển đến thư mục dự án và chạy lệnh sau:
node index.js
Mở trình duyệt và truy cập địa chỉ http://localhost:3000 để sử dụng ứng dụng trò chuyện.
3. Kết luận
Trong bài viết này, chúng ta đã tìm hiểu cách sử dụng WebSockets để tạo ứng dụng trò chuyện đa nền tảng với Node.js và Express. Ứng dụng này cho phép người dùng trò chuyện trực tuyến trong thời gian thực trên nhiều thiết bị khác nhau. Bạn có thể mở rộng ứng dụng này bằng cách thêm tính năng đăng nhập, quản lý nhóm trò chuyện, gửi hình ảnh, video và nhiều hơn nữa.
Đây chỉ là Version 1.0 - Phiên bản siêu đơn giản bài tiếp theo mình sẽ nâng cấp nó trở nên pro hơn hãy đón đọc nhé.
And Finally
As always, I hope you enjoyed this article and got something new. Thank you and see you in the next articles!
If you liked this article, please give me a like and subscribe to support me. Thank you. 😊