📱Ứng dụng trò chuyện đa nền tảng với Nodejs Express và WebSockets: Kết nối người dùng trên mọi thiết bị - Part 1💬
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 || 2023;
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:2023 để 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é.
Mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.
Donate mình một ly cafe hoặc 1 cây bút bi để mình có thêm động lực cho ra nhiều bài viết hay và chất lượng hơn trong tương lai nhé. À mà nếu bạn có bất kỳ câu hỏi nào thì đừng ngại comment hoặc liên hệ mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm ơn.
Momo: NGUYỄN ANH TUẤN - 0374226770
TPBank: NGUYỄN ANH TUẤN - 0374226770 (hoặc 01681423001)
All rights reserved
