Xây dựng ứng dụng thời gian thực với Next.js 13.4 Server Actions 1. Giới thiệu](#...

Xin chào! Nếu bạn giống tôi, có lẽ bạn đã thấy ngạc nhiên trước khả năng tương tác liền mạch của các ứng dụng web thời gian thực ngày nay—những chatbot phản hồi ngay lập tức, các thông báo trực tiếp bật lên mà không cần làm mới trang và các công cụ cộng tác cập nhật trong chớp mắt. Chức năng thời gian thực đã trở nên ít xa xỉ hơn và được kỳ vọng nhiều hơn trong thời đại kỹ thuật số. Bây giờ, nếu bạn đang theo dõi sự phát triển trong thế giới của Next.js, bạn có thể đã nắm bắt được các tính năng đáng chú ý của phiên bản 13.4, đặc biệt là yếu tố thay đổi cuộc chơi: hành động của máy chủ. Bạn có tò mò về cách điều này có thể xác định lại cách chúng ta tạo ra trải nghiệm thời gian thực không? Chà, tôi cũng vậy! Hãy cùng tôi đi sâu vào nghiên cứu điển hình này, nơi chúng ta sẽ bắt đầu hành trình xây dựng một ứng dụng thời gian thực, tận dụng sức mạnh và sự khéo léo của các hành động của máy chủ Cho dù bạn là nhà phát triển dày dạn kinh nghiệm hay chỉ mới mạo hiểm bước vào lĩnh vực ứng dụng thời gian thực, luôn có rất nhiều thông tin chi tiết đang chờ bạn. Next.js. Chúng ta hãy để bóng lăn, phải không? Mục lục Bối cảnh: Tìm hiểu các ứng dụng thời gian thực Có gì mới trong Next.js 13.4: Tổng quan về các hành động của máy chủ Thiết lập giai đoạn: Phạm vi dự án thời gian thực của chúng tôi Bắt đầu: Thiết lập ban đầu Xây dựng chương trình phụ trợ: Tận dụng các hành động của máy chủ Thiết kế giao diện người dùng: Trải nghiệm người dùng liền mạch Kiểm tra khả năng thời gian thực Cải tiến và tối ưu hóa Kết luận và triển vọng tương lai Tài nguyên và đọc thêm 1. Bối cảnh: Tìm hiểu các ứng dụng thời gian thực Trong bối cảnh kỹ thuật số có nhịp độ nhanh ngày nay, thuật ngữ "thời gian thực" thường xuất hiện trong nhiều ngữ cảnh khác nhau—từ trò chơi và tài chính đến truyền thông và mạng xã hội. Nhưng chính xác thì "thời gian thực" có nghĩa là gì trong thế giới ứng dụng web? L Hãy làm sáng tỏ điều này. Ứng dụng thời gian thực là gì? Các ứng dụng thời gian thực là các hệ thống hoặc chương trình phản hồi ngay lập tức với đầu vào của người dùng hoặc các sự kiện bên ngoài, cung cấp phản hồi tức thì mà không có độ trễ rõ ràng. Nói một cách đơn giản hơn, hãy nghĩ về chúng như những nền tảng trực tiếp, năng động phát triển theo "thời gian thực", phản ánh luồng thông tin liên tục trong hệ sinh thái kỹ thuật số hiện đại. Ví dụ thực tế Để đưa nó vào quan điểm, hãy xem xét một số ví dụ phổ biến: : Các nền tảng như và Telegram nơi tin nhắn được gửi, nhận và xem không chậm trễ. Ứng dụng nhắn tin tức thời WhatsApp : Hãy nghĩ đến Google Tài liệu, nơi nhiều người dùng có thể chỉnh sửa tài liệu đồng thời, quan sát các thay đổi của nhau trong thời gian thực. Công cụ cộng tác : Nền tảng hiển thị giá cổ phiếu cập nhật tức thời với những biến động của thị trường. Live Stock Tickers : Nơi người chơi tương tác với nhau và với môi trường mà không có độ trễ, đảm bảo trải nghiệm chơi trò chơi liền mạch. Trò chơi nhiều người chơi trực tuyến Sự liên quan của các ứng dụng thời gian thực Vậy, tại sao chức năng thời gian thực lại được săn đón như vậy? : Người dùng hiện đại mong đợi sự nhanh chóng. Cho dù đó là ứng dụng trò chuyện hay cập nhật thời tiết, bất kỳ độ trễ đáng chú ý nào cũng có thể làm giảm sự hài lòng của người dùng. Kỳ vọng của người dùng : Các tính năng thời gian thực cho phép trải nghiệm người dùng tương tác và phong phú hơn, thúc đẩy sự tham gia của người dùng. Tương tác nâng cao : Việc cung cấp các tính năng thời gian thực có thể tạo nên sự khác biệt cho các nền tảng trong một thị trường đông đúc, mang lại một điểm bán hàng độc đáo để thu hút và giữ chân người dùng. Lợi thế cạnh tranh Những thách thức phía trước Việc xây dựng các ứng dụng thời gian thực không phải là không có trở ngại: : Các ứng dụng thời gian thực thường cần xử lý nhiều kết nối đồng thời, yêu cầu cơ sở hạ tầng mạnh mẽ. Các vấn đề về khả năng mở rộng : Đảm bảo rằng dữ liệu thời gian thực vẫn nhất quán trên các giao diện người dùng khác nhau có thể là một thách thức, đặc biệt là với nhiều lần chỉnh sửa hoặc tương tác đồng thời. Tính toàn vẹn của dữ liệu : Một ứng dụng thời gian thực chỉ tốt bằng thành phần chậm nhất của nó. Đảm bảo sự chậm trễ tối thiểu đòi hỏi phải tối ưu hóa cẩn thận và sử dụng tài nguyên hiệu quả. Độ trễ Bây giờ chúng ta đã thiết lập giai đoạn với sự hiểu biết cơ bản về các ứng dụng thời gian thực, chúng ta sẽ tìm hiểu sâu về cách Next.js 13.4, với các hành động của máy chủ, nổi lên như một công cụ quan trọng cho các nhà phát triển mong muốn tạo ra những trải nghiệm sống động như vậy. 2. Có gì mới trong Next.js 13.4: Tổng quan về các hành động của máy chủ Trong bối cảnh phát triển web không ngừng phát triển, Next.js luôn dẫn đầu, giới thiệu các tính năng xác định lại cách chúng tôi tiếp cận các ứng dụng xây dựng. Phiên bản 13.4 cũng không ngoại lệ, đặc biệt với sự nhấn mạnh vào các hành động của máy chủ. Nhưng trước khi đi sâu, hãy làm rõ một số thuật ngữ: Sơ lược về Hành động trong hệ sinh thái React, mặc dù vẫn còn đang thử nghiệm, nhưng đã mang lại sự thay đổi mô hình bằng cách cho phép các nhà phát triển thực thi mã không đồng bộ để đáp ứng các tương tác của người dùng. Các hành động Thật thú vị, mặc dù chúng không dành riêng cho Next.js hoặc Server Components, nhưng việc sử dụng chúng thông qua Next.js có nghĩa là bạn đang ở trên kênh thử nghiệm React. React Đối với những người quen thuộc với các biểu mẫu HTML, bạn có thể nhớ lại việc chuyển các URL tới chỗ dựa . Giờ đây, với Hành động, bạn có thể chuyển trực tiếp một chức năng, làm cho các tương tác trở nên năng động và tích hợp hơn. action { /* async function logic here */ }}>Click me! Sự tích hợp của React với Actions cũng cung cấp các giải pháp tích hợp sẵn để cập nhật một cách lạc quan. Điều này nhấn mạnh rằng mặc dù các Hành động mang tính đột phá, nhưng các mẫu vẫn đang phát triển và các API mới hơn có thể được thêm vào để làm phong phú thêm các mẫu đó. Nắm bắt các hành động biểu mẫu thể hiện sự kết hợp khéo léo giữa các hành động của React với API tiêu chuẩn. Chúng cộng hưởng với thuộc tính nguyên thủy trong HTML, giúp các nhà phát triển có thể nâng cao trạng thái tải liên tục và các chức năng khác vượt trội. Các hành động biểu mẫu formaction Chức năng máy chủ & Hành động máy chủ về cơ bản là các chức năng hoạt động ở phía máy chủ nhưng có thể được gọi từ máy khách. Những điều này nâng khả năng kết xuất phía máy chủ của Next.js lên một cấp độ hoàn toàn mới. Chức năng máy chủ Chuyển sang , chúng có thể được hiểu là Chức năng máy chủ, nhưng những chức năng được kích hoạt cụ thể dưới dạng hành động. Sự tích hợp của chúng với các phần tử biểu mẫu, đặc biệt là thông qua chỗ dựa , đảm bảo rằng biểu mẫu vẫn tương tác ngay cả trước khi tải JavaScript phía máy khách. Điều này mang lại trải nghiệm người dùng mượt mà hơn, với việc hydrat hóa React không phải là điều kiện tiên quyết để gửi biểu mẫu. Hành động máy chủ action // A simple Server Action in Next.js 13.4 Hiểu về các đột biến của máy chủ Cuối cùng, chúng ta có , là một tập hợp con của Server Actions. Chúng đặc biệt hiệu quả khi bạn cần sửa đổi dữ liệu trên máy chủ và sau đó thực hiện các phản hồi cụ thể, chẳng hạn như , hoặc . Server Mutations redirect revalidatePath revalidateTag const serverMutationFunction = async () => { // Modify data logic here... // ... return { revalidatePath: '/updated-path' }; } Tóm lại, khung Hành động máy chủ của Next.js 13.4, được củng cố bởi các Hành động, Hành động biểu mẫu, Chức năng máy chủ và Đột biến máy chủ, là hiện thân của cách tiếp cận chuyển đổi đối với các ứng dụng web thời gian thực. Lưu ý: Khi chúng tôi tiếp tục nghiên cứu trường hợp của mình, bạn sẽ tận mắt chứng kiến sức mạnh mà các tính năng này mang lại. Vì vậy, hãy chuẩn bị cho hành trình thú vị phía trước! 3. Thiết lập giai đoạn: Phạm vi dự án thời gian thực của chúng tôi Trong bối cảnh xây dựng ứng dụng thời gian thực, Hành động máy chủ của Next.js 13.4 đóng một vai trò quan trọng. Các tính năng alpha này giúp dễ dàng quản lý các đột biến dữ liệu phía máy chủ, giảm JavaScript phía máy khách và nâng cao dần các biểu mẫu. Kích hoạt hành động máy chủ Trước tiên, bạn cần bật Tác vụ máy chủ trong dự án Next.js của mình. Chỉ cần thêm đoạn mã sau vào tệp của bạn: next.config.js module.exports = { experimental: { serverActions: true, }, } Sáng tạo và gọi Các Hành động Máy chủ có thể được xác định trong Thành phần Máy chủ sử dụng nó hoặc trong một tệp riêng biệt để có thể sử dụng lại giữa các Thành phần Máy khách và Máy chủ. Đây là cách bạn có thể tạo và gọi các Tác vụ Máy chủ: : Một Hành động Máy chủ có thể được xác định dễ dàng trong một Thành phần Máy chủ, như sau: Trong các Thành phần Máy chủ export default function ServerComponent() { async function myAction() { 'use server' // ... } } : Khi sử dụng Hành động máy chủ bên trong Thành phần máy khách, hãy tạo hành động trong một tệp riêng biệt rồi nhập hành động đó. Với Thành phần máy khách // app/actions.js 'use server' export async function myAction() { // ... } Nhập và sử dụng trong Thành phần máy khách: // app/client-component.js import { myAction } from './actions' export default function ClientComponent() { return ( Add to Cart ) } : Bạn có thể sử dụng các phương thức tùy chỉnh như để gọi các Tác vụ máy chủ bên ngoài biểu mẫu, nút hoặc đầu vào. Gọi tùy chỉnh startTransition // Example using startTransition 'use client' import { useTransition } from 'react' import { addItem } from '../actions' function ExampleClientComponent({ id }) { let [isPending, startTransition] = useTransition() return ( startTransition(() => addItem(id))}> Add To Cart ) } Tăng cường tiến bộ Next.js 13.4 cũng cung cấp tính năng Nâng cao lũy tiến, cho phép hoạt động mà không cần JavaScript. Hành động máy chủ có thể được chuyển trực tiếp đến , làm cho biểu mẫu tương tác ngay cả khi JavaScript bị tắt. // app/components/example-client-component.js 'use client' import { handleSubmit } from './actions.js' export default function ExampleClientComponent({ myAction }) { return ( {/* ... */} ) } Giới hạn kích thước Theo mặc định, nội dung yêu cầu tối đa được gửi tới Hành động máy chủ là 1 MB. Nếu cần, bạn có thể định cấu hình giới hạn này bằng tùy chọn : serverActionsBodySizeLimit module.exports = { experimental: { serverActions: true, serverActionsBodySizeLimit: '2mb', }, } 4. Bắt đầu: Thiết lập ban đầu Tạo dự án Next.js 13.4 mới Để bắt đầu xây dựng một ứng dụng thời gian thực bằng Next.js 13.4, bước đầu tiên là tạo một dự án mới. Bạn có thể sử dụng lệnh Next.js CLI tiêu chuẩn để khởi tạo dự án của mình: npx create-next-app@latest my-real-time-app Thay bằng tên mong muốn cho dự án của bạn. Lệnh này thiết lập một dự án Next.js mới với các cấu hình mặc định. my-real-time-app Các phụ thuộc và gói cần thiết cho chức năng thời gian thực Đối với chức năng thời gian thực, bạn có thể yêu cầu một số gói và phần phụ thuộc nhất định. Tùy thuộc vào các chi tiết cụ thể của ứng dụng của bạn, chúng có thể bao gồm từ thư viện WebSockets đến đăng ký GraphQL, v.v. Đảm bảo bạn đã xem xét các yêu cầu của dự án và thêm các thành phần phụ thuộc cần thiết. Tuy nhiên, với sự hỗ trợ của Next.js 13.4 dành cho Hành động máy chủ, đã có một thiết lập tích hợp hỗ trợ xử lý phía máy chủ, có thể hỗ trợ đạt được một số tính năng thời gian thực. Tổng quan ngắn gọn về cấu trúc dự án và thiết lập thư mục Bộ định tuyến ứng dụng Với việc giới thiệu Next.js 13.4, Bộ là một tính năng quan trọng cho phép các nhà phát triển sử dụng bố cục dùng chung, định tuyến lồng nhau, xử lý lỗi, v.v. Nó được thiết kế để hoạt động cùng với thư mục hiện có, nhưng nó được đặt trong một thư mục mới có tên . định tuyến ứng dụng pages app Để bắt đầu với Bộ định tuyến ứng dụng: Tạo một thư mục trong thư mục gốc của dự án của bạn. app Thêm các tuyến đường hoặc thành phần của bạn bên trong thư mục này. Theo mặc định, các thành phần bên trong thư mục là , cung cấp hiệu suất tối ưu và cho phép các nhà phát triển dễ dàng áp dụng chúng. app Thành phần máy chủ Đây là một cấu trúc ví dụ: my-real-time-app/ │ ├── app/ # Main directory for App Router components │ ├── _error.js # Custom error page │ ├── _layout.js # Shared layout for the app │ │ │ ├── dashboard/ # Nested route example │ │ ├── index.js # Dashboard main view │ │ └── settings.js # Dashboard settings view │ │ │ ├── index.js # Landing/Home page │ ├── profile.js # User profile page │ ├── login.js # Login page │ └── register.js # Registration page │ ├── public/ # Static assets go here (images, fonts, etc.) │ ├── images/ │ └── favicon.ico │ ├── styles/ # Global styles or variables │ └── global.css │ ├── package.json # Dependencies and scripts ├── next.config.js # Next.js configuration └── README.md # Project documentation Thành phần máy chủ so với Thành phần máy khách Suy nghĩ về cách các thành phần kết xuất là rất quan trọng. Trong các SPA truyền thống (Ứng dụng một trang), React hiển thị toàn bộ ứng dụng ở phía máy khách. Với Cấu phần máy chủ, phần lớn ứng dụng hiển thị trên máy chủ, mang lại lợi ích về hiệu suất. Đây là một hướng dẫn: : Lý tưởng cho các phần không tương tác trong ứng dụng của bạn. Các thành phần này được hiển thị trên máy chủ và được gửi tới máy khách dưới dạng HTML. Ưu điểm ở đây là cải thiện hiệu suất, giảm JavaScript phía máy khách và khả năng tìm nạp dữ liệu hoặc truy cập trực tiếp vào tài nguyên phụ trợ. Thành phần máy chủ : Được sử dụng cho các thành phần giao diện người dùng tương tác. Chúng được kết xuất trước trên máy chủ và sau đó được "ngậm nước" trên máy khách để thêm tính tương tác. Thành phần máy khách Để phân biệt giữa các thành phần này, Next.js đã giới thiệu chỉ thị . Lệnh này chỉ ra rằng một thành phần phải được coi là Thành phần máy khách. Nó phải được đặt ở đầu tệp thành phần, trước bất kỳ lần nhập nào. "use client" Ví dụ: nếu bạn có một bộ đếm tương tác, như trong mã được cung cấp, thì bạn sẽ sử dụng lệnh để cho biết rằng đó là một thành phần phía máy khách. "use client" khuyến nghị Khi bạn cấu trúc ứng dụng của mình, đây là một số hướng dẫn: Sử dụng theo mặc định (vì chúng nằm trong thư mục ). Cấu phần máy chủ app Chỉ chọn khi bạn có các trường hợp sử dụng cụ thể như thêm tính tương tác, sử dụng API chỉ dành cho trình duyệt hoặc tận dụng các hook React phụ thuộc vào trạng thái hoặc chức năng của trình duyệt. Thành phần ứng dụng khách Theo cấu trúc và thiết lập này, bạn sẽ tiếp tục xây dựng một ứng dụng thời gian thực hoạt động hiệu quả với Server Actions của Next.js 13.4. Lưu ý: 5. Xây dựng phần phụ trợ: Tận dụng các hành động của máy chủ Sức mạnh của Next.js 13.4 tỏa sáng khi tích hợp các chức năng phụ trợ thời gian thực vào dự án của chúng tôi. Hãy xem qua các bước với các ví dụ mã có liên quan cho . my-real-time-app Giới thiệu về cách các hành động của máy chủ sẽ được sử dụng trong dự án này Đối với , các hành động của máy chủ đóng vai trò là cầu nối chính giữa và , cho phép các giao dịch dữ liệu hiệu quả mà không cần API riêng biệt. my-real-time-app giao diện người dùng phụ trợ // my-real-time-app/app/actions/index.js export * from './auth-action'; export * from './chat-action'; Thiết lập hành động máy chủ để xử lý xác thực người dùng Trong , chúng tôi tận dụng các hành động của máy chủ để hợp lý hóa quy trình xác thực. my-real-time-app // my-real-time-app/app/actions/auth-action.js export const login = async (credentials) => { // Logic for authenticating user with credentials // Return user details or error message }; export const logout = async (userId) => { // Logic for logging out the user // Return success or error message }; export const register = async (userInfo) => { // Logic for registering a new user // Store user in database and return success or error message }; Tạo hành động máy chủ để gửi và nhận tin nhắn thời gian thực Đối với chức năng trò chuyện: // my-real-time-app/app/actions/chat-action.js export const sendMessage = async (messageDetails) => { // Logic to send a new message // Store message in database and inform other users via WebSocket or similar }; export const receiveMessage = async () => { // Logic to receive a message in real-time // Return the message details }; export const getRecentMessages = async (userId) => { // Logic to fetch recent messages for the user // Retrieve messages from the database }; Tích hợp cơ sở dữ liệu (ví dụ: MongoDB) để duy trì thông báo Sử dụng MongoDB làm kho lưu trữ dữ liệu chính của chúng tôi: // Initialize MongoDB connection const { MongoClient } = require('mongodb'); const client = new MongoClient(process.env.MONGODB_URI); await client.connect(); // Now, use this connection in server actions to interact with the database. Trong các hành động trò chuyện của chúng tôi: // my-real-time-app/app/actions/chat-action.js export const sendMessage = async (messageDetails) => { const messagesCollection = client.db('chatDB').collection('messages'); await messagesCollection.insertOne(messageDetails); // Inform other users via WebSocket or similar }; Đảm bảo liên lạc an toàn và nhanh chóng thông qua các hành động của máy chủ Để bảo mật: // Middleware for validating request data const validateRequest = (req) => { // Validation logic here return isValid; }; export const sendMessage = async (messageDetails) => { if (!validateRequest(messageDetails)) { throw new Error("Invalid request data"); } // Remaining logic... }; 6. Thiết kế giao diện người dùng: Trải nghiệm người dùng liền mạch Trong phần này, chúng ta sẽ xây dựng giao diện trò chuyện trực quan và phản hồi nhanh cho . Việc tích hợp các thành phần máy chủ của Next.js 13.4 sẽ cho phép cập nhật theo thời gian thực để mang lại trải nghiệm mượt mà cho người dùng. my-real-time-app Kiến trúc giao diện trò chuyện chính Đầu tiên, hãy tạo giao diện trò chuyện chính: // my-real-time-app/app/chat-interface.js import { useEffect, useState } from 'react'; import { getRecentMessages } from './actions/chat-action'; export default function ChatInterface() { const [messages, setMessages] = useState([]); useEffect(() => { async function loadMessages() { const recentMessages = await getRecentMessages(); setMessages(recentMessages); } loadMessages(); }, []); return ( {messages.map(msg => ( {msg.content}

))} ); } Thành phần này tìm nạp các tin nhắn gần đây khi tải và hiển thị chúng trong hộp trò chuyện. Kết nối giao diện người dùng với các hành động của máy chủ để cập nhật theo thời gian thực Bây giờ, chúng ta sẽ thiết lập cập nhật theo thời gian thực bằng một ví dụ cơ bản về WebSockets: // my-real-time-app/app/chat-interface.js const [socket, setSocket] = useState(null); useEffect(() => { const ws = new WebSocket("ws://your-backend-url/ws"); ws.onmessage = (event) => { const newMessage = JSON.parse(event.data); setMessages(prevMessages => [...prevMessages, newMessage]); }; setSocket(ws); return () => { ws.close(); }; }, []); Móc này thiết lập kết nối WebSocket và cập nhật danh sách thư khi nhận được thư mới. Triển khai thông báo cho tin nhắn mới Để có trải nghiệm người dùng tốt hơn, hãy thông báo cho người dùng về tin nhắn mới: // my-real-time-app/app/chat-interface.js useEffect(() => { if (messages.length && "Notification" in window && Notification.permission === "granted") { const lastMessage = messages[messages.length - 1]; new Notification(`New message from ${lastMessage.sender}: ${lastMessage.content}`); } }, [messages]); Hiệu ứng này sẽ gửi thông báo cho trình duyệt mỗi khi danh sách tin nhắn được cập nhật với một tin nhắn mới. Các kỹ thuật để đảm bảo tương tác người dùng trơn tru và không bị lag Để đảm bảo trải nghiệm trôi chảy: Lazy-load các thành phần nặng: const HeavyComponent = React.lazy(() => import('./HeavyComponent')); function Chat() { return ( Loading... }> ); } Sử dụng của Next.js để phân tách logic: React Server Components Hãy nhớ từ tài liệu trước đó, Thành phần máy chủ có thể được sử dụng cho các phần không tương tác, trong khi Thành phần máy khách có thể xử lý các phần tương tác, giảm lượng JavaScript được gửi đến máy khách. Chẳng hạn, trong cuộc trò chuyện của chúng tôi, lịch sử tin nhắn có thể là Thành phần máy chủ, trong khi trường nhập và nút gửi, yêu cầu tương tác phía máy khách, có thể là Thành phần máy khách. 7. Kiểm tra khả năng thời gian thực Với các thành phần cốt lõi của ứng dụng thời gian thực của chúng tôi, điều cần thiết là đảm bảo rằng chúng hoạt động như mong đợi và có hiệu suất, khả năng mở rộng và mạnh mẽ. Phần này làm sáng tỏ các phương pháp thử nghiệm khác nhau phù hợp với các hệ thống thời gian thực như . my-real-time-app Các công cụ và chiến lược để thử nghiệm các chức năng thời gian thực Thử nghiệm từ đầu đến cuối với Cypress Đối với các ứng dụng thời gian thực, các bài kiểm tra đầu cuối là rất quan trọng. Hãy thiết lập một ví dụ với Cypress: // cypress/integration/chat.spec.js describe('Chat functionality', () => { it('should send and receive messages in real-time', () => { cy.visit('/chat'); cy.get('[data-cy=messageInput]').type('Hello, World!'); cy.get('[data-cy=sendButton]').click(); cy.contains('Hello, World!').should('exist'); }); }); Kiểm tra tải trọng với pháo binh Điều này sẽ giúp hiểu cách hệ thống hoạt động dưới một số lượng lớn người dùng hoặc tin nhắn: # artillery-config.yml config: target: 'http://my-real-time-app.com' phases: - duration: 300 arrivalRate: 20 scenarios: - flow: - emit: channel: 'chat' payload: message: 'Hello, World!' $ artillery run artillery-config.yml Giải quyết các tắc nghẽn tiềm ẩn và các vấn đề về hiệu suất Hồ sơ hiệu suất máy chủ Node.js cung cấp các công cụ dựng sẵn để định hình và cờ có thể được sử dụng với máy chủ phát triển Next.js để kích hoạt trình kiểm tra Node.js. Bằng cách sử dụng Công cụ dành cho nhà phát triển của Chrome, người ta có thể hiểu rõ hơn về các tắc nghẽn hiệu suất. --inspect Phân tích hiệu suất phía khách hàng Đối với phía máy khách, các công cụ như tab trong Chrome DevTools có thể giúp xác định các tắc nghẽn kết xuất. Đặc biệt với các bản cập nhật theo thời gian thực, hãy đảm bảo rằng các kết xuất không cần thiết sẽ không xảy ra. Performance Đảm bảo khả năng mở rộng và độ bền của ứng dụng thời gian thực Quản lý trạng thái với SWR hoặc React Query Các ứng dụng thời gian thực thường liên quan đến việc giữ trạng thái của máy khách đồng bộ với máy chủ. Các thư viện như SWR hoặc React Query giúp việc này trở nên dễ dàng hơn bằng cách cung cấp các tính năng như tự động tìm nạp lại, lưu vào bộ đệm và đồng bộ hóa thời gian thực. Ví dụ với SWR: // my-real-time-app/app/chat-interface.js import useSWR from 'swr'; function ChatInterface() { const { data: messages } = useSWR('/api/messages', fetcher); // ... rest of the component } Chia tỷ lệ ngang Đối với khả năng mở rộng phụ trợ, đặc biệt là với WebSockets, hãy cân nhắc sử dụng một giải pháp như Redis để quản lý trạng thái trên nhiều phiên bản máy chủ của bạn. Bằng cách này, nếu một phiên bản máy chủ nhận được tin nhắn, nó có thể truyền tin nhắn đó tới các máy khách được kết nối với các phiên bản máy chủ khác. Tối ưu hóa cơ sở dữ liệu Đảm bảo rằng các truy vấn cơ sở dữ liệu của bạn, đặc biệt là những truy vấn chạy thường xuyên trong các ứng dụng thời gian thực, được tối ưu hóa. Lập chỉ mục các cột cần thiết và xem xét sử dụng các giải pháp bộ nhớ đệm cơ sở dữ liệu cho dữ liệu được truy cập thường xuyên. Thử nghiệm các ứng dụng thời gian thực yêu cầu kết hợp các kỹ thuật kiểm thử phần mềm tiêu chuẩn và một số kỹ thuật được thiết kế riêng cho các thách thức và đặc điểm của hệ thống thời gian thực. Đảm bảo chế độ thử nghiệm nghiêm ngặt cho , chúng tôi có thể đảm bảo trải nghiệm người dùng mượt mà và phản hồi nhanh, bất kể quy mô lưu lượng người dùng hoặc luồng dữ liệu. Lưu ý: my-real-time-app 10. Cải tiến và Tối ưu hóa Với kiến trúc nền tảng của ứng dụng thời gian thực của chúng tôi đã sẵn sàng, giờ đây, sự chú ý của chúng tôi chuyển sang tinh chỉnh các tính năng và hiệu suất của nó. Dưới đây là một số chiến lược để nâng cao trải nghiệm người dùng và tối ưu hóa : my-real-time-app Mẹo nâng cao trải nghiệm người dùng Triển khai xác nhận đã đọc Cung cấp phản hồi trực quan cho người dùng khi người nhận đã đọc tin nhắn của họ. Điều này nâng cao tính chất tương tác của các cuộc trò chuyện thời gian thực. // my-real-time-app/app/components/Message.js function Message({ content, status }) { return ( {content}

{status === 'read' && ✓ Read } ); } Hiển thị trạng thái trực tuyến Hiển thị chỉ báo bên cạnh tên hoặc hình đại diện của người dùng khi họ trực tuyến. // my-real-time-app/app/components/UserStatus.js function UserStatus({ isOnline }) { return ( {isOnline ? : } ); } Tối ưu hóa các hành động của máy chủ để giảm độ trễ Batch phía máy chủ Cập nhật hàng loạt phía máy chủ nếu khả thi để giảm số lượng thư được gửi tới máy khách. Nén tin nhắn WebSocket Đối với các ứng dụng có tần suất cập nhật cao, hãy xem xét việc nén thông báo WebSocket để giảm dữ liệu được truyền và tăng tốc độ. // Example: Setting up compression with a WebSocket server const WebSocket = require('ws'); const wss = new WebSocket.Server({ perMessageDeflate: { zlibDeflateOptions: { // Add compression options here } } }); Ra mắt các bản cập nhật thường xuyên Nếu bạn nhận thấy các bản cập nhật liên tục nhanh chóng từ khách hàng, hãy xem xét gỡ lỗi những bản cập nhật này để hợp nhất chúng thành các bản cập nhật ít hơn, có ý nghĩa hơn. Đảm bảo tính toàn vẹn dữ liệu và khả năng chịu lỗi tìm nguồn cung ứng sự kiện Đối với các phần quan trọng trong ứng dụng của bạn, nơi tính toàn vẹn của dữ liệu là tối quan trọng, hãy cân nhắc áp dụng mẫu tìm nguồn cung ứng sự kiện. Điều này đảm bảo mọi thay đổi đối với trạng thái ứng dụng được ghi lại dưới dạng một sự kiện, cho phép khôi phục và phát lại các sự kiện một cách đáng tin cậy. Thực hiện Thử lại logic Đảm bảo rằng nếu thư không gửi được hoặc cập nhật không được thực hiện do sự cố mạng, sẽ có cơ chế thử lại. // Example: Simple retry logic with fetch let retries = 3; function fetchData(url) { fetch(url) .then(response => response.json()) .catch(error => { if (retries > 0) { retries--; fetchData(url); } else { console.error('Failed to fetch data after 3 retries'); } }); } Kế hoạch sao lưu và phục hồi Thường xuyên sao lưu dữ liệu và đảm bảo bạn có kế hoạch và quy trình rõ ràng để khôi phục dữ liệu trong trường hợp hỏng hóc. Sử dụng sao chép cơ sở dữ liệu hoặc cơ sở dữ liệu phân tán như Cassandra để có khả năng chịu lỗi. Thành công liên tục của không chỉ phụ thuộc vào các chức năng cốt lõi của nó mà còn phụ thuộc vào các cải tiến tinh tế và tối ưu hóa liên tục để đảm bảo trải nghiệm người dùng mượt mà. Bằng cách kết hợp các chiến lược được liệt kê ở trên, chúng tôi sẵn sàng cung cấp cho người dùng trải nghiệm trò chuyện vượt trội, đáng tin cậy và thú vị. Lưu ý: my-real-time-app 11. Kết luận và triển vọng tương lai Tóm tắt hành trình xây dựng ứng dụng thời gian thực Hành trình của chúng tôi với đã đưa chúng tôi từ thiết lập ban đầu với Next.js 13.4, thông qua xây dựng phụ trợ với các hành động của máy chủ, thiết kế trải nghiệm giao diện người dùng liền mạch và đảm bảo các khả năng thời gian thực đã được thử nghiệm và tối ưu hóa. Chúng tôi đã đào sâu vào các sắc thái của các thành phần máy chủ và máy khách, đảm bảo sự cân bằng hiệu quả giữa kết xuất phía máy chủ và tương tác phía máy khách. my-real-time-app Tác động và tầm quan trọng của các hành động máy chủ của Next.js 13.4 trong dự án Việc giới thiệu các hành động máy chủ trong Next.js 13.4 đã cách mạng hóa cách tiếp cận của chúng tôi đối với các ứng dụng thời gian thực. Nó cho phép chúng tôi xây dựng một ứng dụng trò chuyện có tính tương tác cao, tận dụng thế mạnh của cả kết xuất máy chủ và máy khách. Điều này không chỉ tối ưu hóa hiệu suất mà còn tạo điều kiện thuận lợi cho các tương tác người dùng liền mạch mà không ảnh hưởng đến tính bảo mật hoặc hiệu quả. Các cải tiến và tính năng trong tương lai có thể được thêm vào ứng dụng Mặc dù đã đi được một chặng đường dài nhưng tiềm năng cho những cải tiến trong tương lai vẫn còn rất lớn: my-real-time-app : Giới thiệu khả năng trò chuyện video thời gian thực. Tích hợp trò chuyện video : Cho phép người dùng tạo, tham gia hoặc rời khỏi cuộc trò chuyện nhóm. Trò chuyện nhóm : Tăng cường bảo mật bằng cách mã hóa tin nhắn để chỉ người gửi và người nhận mới có thể giải mã chúng. Mã hóa đầu cuối : Cung cấp cho người dùng tùy chọn cá nhân hóa hồ sơ của họ bằng hình đại diện, thông báo trạng thái và chủ đề. Hồ sơ người dùng có thể tùy chỉnh : Triển khai các chatbot do AI điều khiển để phản hồi tự động. Chatbots 12. Tài nguyên và Đọc thêm Khi bạn bắt đầu hành trình của mình với các ứng dụng thời gian thực và tìm hiểu sâu hơn về các chức năng cũng như điểm phức tạp của Next.js, đây là danh sách các tài nguyên được tuyển chọn có thể hướng dẫn, truyền cảm hứng và giáo dục thêm cho bạn: Tài liệu chính thức : Hướng dẫn toàn diện về mọi thứ mới và cải tiến trong phiên bản này. . Tài liệu chính thức của Next.js Đọc ở đây : Tìm hiểu sâu về hoạt động, phương pháp hay nhất và tiềm năng của hành động máy chủ, ngay từ nguồn. . Hành động máy chủ trong Next.js Đọc thêm : Hiểu các khả năng của Bộ định tuyến ứng dụng, đặc biệt là liên quan đến các Thành phần máy chủ React. . Bộ định tuyến ứng dụng Khám phá tại đây : Hướng dẫn cơ bản về cách sử dụng tốt nhất các thành phần máy chủ để tối ưu hóa hiệu suất và tính linh hoạt. . Các thành phần máy chủ phản ứng Học ở đây Kết thúc Trước hết, đã đồng hành cùng tôi qua mê cung phức tạp này của thế giới Nếu bạn đã làm được điều này cho đến nay, xin chúc mừng! Nếu bạn đọc lướt qua một số phần, tôi không trách bạn – đã có lúc tôi muốn bỏ qua việc viết chúng! xin chân thành cảm ơn bạn Next.js. Xây dựng các ứng dụng thời gian thực, theo nhiều cách, là một chuyến tàu lượn đầy cảm xúc. Một số ngày, tôi cảm thấy mình là một thiên tài viết mã, trong khi những ngày khác, tôi đặt câu hỏi về mọi lựa chọn trong cuộc sống đã đưa tôi trở thành một nhà phát triển. Bạn đã bao giờ dành hàng giờ để gỡ lỗi một vấn đề, chỉ để nhận ra rằng bạn đã bỏ lỡ một dấu chấm phẩy chưa? Hoặc khi bạn vô tình xóa một phần thiết yếu trong mã của mình và ước cuộc sống có Ctrl + Z? Ôi, niềm vui của lập trình! Nhưng vấn đề là ở đây: giữa tất cả những cái nhìn bằng lòng bàn tay và thỉnh thoảng bị giật tóc, có một điều kỳ diệu không thể diễn tả được khi nhìn thấy tác phẩm của bạn trở nên sống động, trong thời gian thực. Đó là niềm vui nho nhỏ khi mã của bạn chạy không có lỗi, sự hài lòng khi người dùng yêu thích ứng dụng của bạn và niềm tự hào khi biết bạn đã tạo ra thứ gì đó từ đầu. Đối với mọi nhà phát triển vừa chớm nở đang đọc điều này: thất bại, thất vọng và 'tại sao điều này không hoạt động!?' khoảnh khắc là một phần và bưu kiện của cuộc hành trình của chúng tôi. Chúng không phải là dấu hiệu cho thấy bạn đang thất bại, mà là những bước đệm để trở nên tốt hơn. Vì vậy, lần tới khi mã của bạn từ chối hợp tác, hãy hít một hơi thật sâu, lấy một ít cà phê (hoặc trà, tôi không phán xét, bản thân tôi là một người hâm mộ ) và hãy nhớ rằng bạn không đơn độc trong việc này. matecocido Tiếp tục vượt qua ranh giới, tiếp tục học hỏi và nhớ rằng mọi dòng mã, dù hoạt động hay bị lỗi, đều thêm một chương vào câu chuyện nhà phát triển của bạn. Và nếu bạn cần một tiếng cười hoặc một bờ vai để khóc (dĩ nhiên là gần như vậy), hãy biết rằng tôi đã ở đó, làm điều đó và đã cảm thấy thất vọng đến mức phải ném máy tính xách tay của mình ra ngoài cửa sổ! Đây là để có nhiều cuộc phiêu lưu viết mã hơn và ít lỗi do dấu chấm phẩy gây ra hơn! Chúc mừng và viết mã vui vẻ!