Hướng dẫn real time chat app with react, nodejs mongodb and socket io - ứng dụng trò chuyện thời gian thực với phản ứng, nodejs mongodb và socket io

Trò chuyện

Ngày 05 tháng 9 năm 2022 1 phút đọc1 min read

Nội dung chính Show

• Features/Components
• Cài đặt
• Bạn cũng có thể thích...
• Ứng dụng trò chuyện thời gian thực sử dụng Firebase, React, TailWindcss, MongoDB, Node/Express và Socket.io
• Ứng dụng nhắn tin được xây dựng trên React và Redux với socket.io để trò chuyện thời gian thực
• React + Node.js + MongoDB Trò chuyện thời gian thực
• Đăng ký ví dụ React.js
• Trong phần này, bạn sẽ tạo, định cấu hình ứng dụng React và NodeJS Server
• Tạo một dự án React mới
• Cấu trúc và thư mục dự án
• Phản ứng định tuyến
• Tạo cấu trúc thư mục ứng dụng và dự án NodeJS mới
• Tạo máy chủ NodeJS
• Tạo tệp cấu hình:
• Kết nối với cơ sở dữ liệu (MongoDB):
• Sự kết luận
• Làm cách nào để tạo một ứng dụng trò chuyện thời gian thực với NodeJS Socket.io và MongoDB?
• Làm cách nào để tạo một ứng dụng trò chuyện thời gian thực với React?
• Bạn có thể sử dụng socket.io với React không?
• Tôi có thể kết nối React JS với MongoDB không?

Features/Components

• Sử dụng React JS cho UI
• Phụ trợ sử dụng nodejs
• Xác thực bằng JWT
• MongoDB cho cơ sở dữ liệu
• Socket.io cho giao tiếp thời gian thực
• CSS - Các thành phần theo kiểu
• Phản ứng nhanh nhẹn

Cài đặt

Khi bạn đã tải xuống hoặc nhân bản kho lưu trữ này, hãy chạy npm install bên trong thư mục. Thay đổi URL MongoDB.

GitHub

Xem GitHub

Bài trước

Một mẫu danh mục đầu tư phản ứng sử dụng css css tiếp theo.

Bài tiếp theo

Memegenerator được thực hiện bằng React JS

Trong phần này, bạn sẽ tạo, định cấu hình ứng dụng React và NodeJS Server

Bài đăng này đã được xuất bản đầu tiên trên codershood.info.

Vâng, bạn đã nghe nó, hôm nay chúng tôi sẽ triển khai một ứng dụng trò chuyện riêng tư thời gian thực bằng cách sử dụng React (mới nhất) và NodeJs.
Now one might ask why on God’s green earth another chat application?
Well, In my defense I would like to say,

Đây không chỉ là một ứng dụng trò chuyện nhóm khác. Nó là một ứng dụng trò chuyện nơi bạn sẽ học được nhiều hơn là chỉ phát sóng sự kiện ổ cắm. Và tôi đảm bảo với bạn, ngay cả khi bạn là người mới trong React, ứng dụng này sẽ là một miếng bánh cho bạn.

Chưa bị thuyết phục?

Không có vấn đề gì, hãy để nói về một vài tính năng nữa. Khi tiêu đề đọc trò chuyện riêng tư thời gian thực, ở đây bạn sẽ biết làm thế nào bạn có thể triển khai trò chuyện riêng tư thời gian thực giữa những người dùng đang trực tuyến. Nó tốt hơn, tôi liệt kê tất cả các tính năng này thay vì viết một đoạn văn.

1. Đầu tiên, bạn sẽ thực hiện đăng nhập và đăng ký trong ứng dụng của mình.Login and Registration in your application.
2. Sau khi đăng nhập/đăng ký thành công, người dùng sẽ được chuyển hướng đến trang chủ.
3. Tại đây, bạn sẽ triển khai danh sách trò chuyện thời gian thực, tại sao thời gian thực vì danh sách trò chuyện sẽ tự động cập nhật khi bất kỳ người dùng mới nào lên mạng hoặc bất kỳ người dùng hiện tại nào ngoại tuyến.chat list will update automatically when any new user comes online or any existing user goes offline.
4. Trên trang chủ, người dùng có thể bắt đầu một cuộc trò chuyện với bất kỳ người dùng trực tuyến nào khác. Ngoài ra, người dùng có thể đọc cuộc trò chuyện cũ của họ.read their old conversation.
5. Khi bạn đã nói xong, thì bạn có thể sử dụng nút Đăng xuất để đi ngoại tuyến.

Nếu bạn quen thuộc với Angular, thì bạn sẽ muốn đọc cách tạo ứng dụng trò chuyện riêng tư thời gian thực bằng cách sử dụng Angular.

Hãy cùng xem kết quả cuối cùng của ứng dụng này, trước khi đi xa hơn.

Vì vậy, chúng tôi sẽ thực hiện tất cả các tính năng được liệt kê ở trên trong loạt bài viết của Fours. Vì bài viết này có vẻ hơi rộng rãi, do đó tôi đã chia nó thành 4 phần. Mỗi phần của bài viết này bao gồm một phần duy nhất trong việc xây dựng ứng dụng trò chuyện riêng tư thời gian thực.4 parts. Each part of this article covers a unique part in building the Real Time private chatting app.

Phần đầu tiên: Bao gồm các điều kiện tiên quyết, cấu hình của ứng dụng React cùng với các tuyến phản ứng và thiết lập máy chủ NodeJS.: Covers the prerequisites, Configuration of React application along with React routes and Nodejs server setup.

Phần thứ hai: Trong phần này, bạn sẽ thực hiện đăng nhập và đăng ký. Với điều đó, bạn sẽ triển khai một tính năng để kiểm tra tính duy nhất của tên người dùng trước khi đăng ký và phiên của người dùng (khi người dùng điều hướng đến trang chủ).: In this part, you will implement Login and Registration. With that, you will implement a feature to check the uniqueness of the username before registration and the session of a user (when the user navigates to the home page).

Phần thứ ba: Ở đây bạn sẽ triển khai danh sách trò chuyện thời gian thực.: Here you will implement a Realtime Chat list.

Phần thứ tư: Trong phần cuối cùng, bạn sẽ triển khai tính năng trò chuyện, trong đó người dùng thực sự có thể trò chuyện với nhau.: In the last part, you will implement a chat feature, where the user actually can chat with each other.

Trước khi chúng tôi bắt đầu, tôi muốn thú nhận rằng bộ truyện này sẽ dài, vì vậy hãy chịu đựng tôi và bạn cũng có thể muốn đi lấy cà phê, bia hoặc thậm chí nước sẽ làm; Bất cứ điều gì làm việc cho bạn.

Tạo một dự án React mới

Hãy để sử dụng CLI CLEACT-APP CLI để thiết lập ứng dụng của chúng tôi. Nếu bạn không có CLI CLI CREATE-REACT-APP được cài đặt trên máy, hãy chạy lệnh bên dưới để cài đặt nó trên toàn cầu .________ 1After Created-React-App CLI Cài đặt, để tạo lệnh React Project mới chạy bên dưới. Lệnh này sẽ tạo tất cả các tệp cần thiết, tải xuống tất cả các phụ thuộc bên ngoài cần thiết và thực hiện tất cả các công việc thiết lập cho chúng tôi.
npm install -g create-react-app
After create-react-app CLI installation, to create a new React project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.

tạo ra chatapp ứng dụng

Cấu trúc và thư mục dự án

Theo tôi, điều rất quan trọng là bạn hiểu những thư mục và tệp bạn sẽ tạo trong ứng dụng này. Bạn có thể thấy tất cả các thư mục và tệp trong hình ảnh dưới đây.

Hình ảnh trên là một thư mục chụp nhanh /src với một vài thư mục và tệp bên trong nó. Chúng tôi đã tạo ra một vài thư mục, hãy để hiểu động cơ của mỗi tệp và thư mục.

=> Bạn có thể tạo tất cả các tệp được liệt kê ở trên hoặc chỉ tải xuống mã. You can create all the files are listed above or just download the code.

1. /pages: Bạn sẽ tạo tất cả các trang bên trong thư mục này. Trong ứng dụng này, chúng tôi chỉ có hai trang với một vài thành phần bên trong chúng. Mặc dù tên của mỗi thành phần React là dễ hiểu. Tuy nhiên, tôi sẽ liệt kê từng thành phần cùng với việc sử dụng nó vì lợi ích của lương tâm của chúng tôi. /pages: You will create all the pages inside this folder. In this application, we have only two pages with a few components inside them.
Though the name of each React component is comprehensible. But still, I will list down each component along with its usage for the sake of our conscience.

1. Authentication Component: Chúng tôi sẽ sử dụng nó để đăng nhập và đăng ký.
2. Chat-list Component: Như tên cho thấy, để hiển thị danh sách chatlist thời gian thực.
3. Conversation Component: Thành phần này được sử dụng để hiển thị tin nhắn.
4. Home Component: Đây sẽ là thành phần máy chủ của thành phần chatlist và hội thoại.
5. NotFound Component: Thành phần này sẽ được sử dụng khi người dùng nhập URL không chính xác, không được xác định trong ứng dụng của chúng tôi.

2. /utils: Thư mục này chứa hai tệp sẽ được sử dụng để thực hiện các sự kiện yêu cầu và ổ cắm HTTP. /utils: This folder contains the two files which will be used for making an HTTP request and Socket events.

1. npm install -g create-react-app0: Trong lớp này, chúng tôi sẽ viết tất cả các yêu cầu HTTP. Trong ứng dụng này, chúng tôi sẽ thực hiện các cuộc gọi HTTP.
2. npm install -g create-react-app1: Trong lớp này, chúng tôi sẽ viết mã liên quan đến ổ cắm để nhận và gửi các sự kiện thời gian thực.

Phản ứng định tuyến

Trong phần này, chúng tôi sẽ định cấu hình định tuyến ứng dụng của chúng tôi. Ở đây chúng tôi sẽ sử dụng React-Router-DOM để tạo các tuyến phản ứng. Tổng số chúng tôi sẽ có hai tuyến đường npm install -g create-react-app2 và npm install -g create-react-app3.

=> Khi ứng dụng này tải trong trình duyệt, chúng tôi sẽ chuyển hướng người dùng đến npm install -g create-react-app2ROUTE. Tuyến đường này sẽ hiển thị trang xác thực không có gì ngoài thành phần npm install -g create-react-app5. When this application loads in the browser, we will redirect the user tonpm install -g create-react-app2route. This route will display the Authentication page which is nothing but npm install -g create-react-app5 component.

=> Bây giờ npm install -g create-react-app6File và ghi ra mã bên dưới,Now thenpm install -g create-react-app6file and write down the below code,

App.js:

Tạo cấu trúc thư mục ứng dụng và dự án NodeJS mới

Cho đến bây giờ bạn đã tạo và hoàn thành thiết lập ứng dụng React. Đến bây giờ, ứng dụng React của bạn không có gì ngoài bảng xếp hạng sạch sẽ, và bạn sẽ viết phần còn lại của A B C D trong 3 phần tiếp theo của bộ truyện.

Trong phần này, bạn sẽ tạo NodeJS API Boilerplate. Đối với những người không biết tại sao máy chủ NodeJS là rõ ràng đối với chúng tôi,

1. Đầu tiên, bạn sẽ cần một máy chủ nơi bạn có thể lưu trữ và tìm nạp dữ liệu và tin nhắn của người dùng.
2. Thứ hai, bạn cần thực hiện nhắn tin thời gian thực cho rằng chúng tôi cần một ổ cắm web.
3. Thứ ba, đó là lựa chọn tốt nhất có sẵn ngoài kia, bạn không phải học bất cứ điều gì ngoại trừ JavaScript chắc chắn!

Được rồi, vì vậy, hãy để tiếp tục và bắt đầu sự phát triển, nhưng trước đó, hãy để xem cấu trúc thư mục của chúng tôi về máy chủ NodeJS.

Như bạn có thể thấy, có năm thư mục trong ứng dụng này; Tại đây bạn sẽ tạo bốn thư mục, mong đợi một thư mục, tức là npm install -g create-react-app7. Đến bây giờ, ứng dụng của chúng tôi không lớn đến thế, vì vậy tôi đã giữ cấu trúc thư mục rất tối thiểu và dễ hiểu. Trong trường hợp nếu bạn muốn đi lớn, tôi sẽ khuyên bạn nên đọc hướng dẫn cấu trúc thư mục được cung cấp bởi Rising Stack.the folder structure guide provided by Rising Stack.

Để hiểu mục đích của từng thư mục, hãy xem qua các điểm được liệt kê dưới đây.

1. npm install -g create-react-app8: Trong tổng số thư mục này, chúng tôi có bốn tệp như trong hình trên. Trong các tệp này, chúng tôi sẽ bao gồm ứng dụng và thể hiện cấu hình liên quan cùng với kết nối cơ sở dữ liệu.
2. npm install -g create-react-app9: Ở đây bạn sẽ tạo các tệp, bao gồm thực thi truy vấn MongoDB và trình xử lý tuyến đường Express. Mà chúng ta sẽ nhìn thấy trên đường.
3. /utils: Bạn sẽ tạo các tệp, chủ yếu được sử dụng làm đường để thực hiện các hoạt động khác. Trong trường hợp này, mật khẩu băm để đăng nhập và đăng ký.
4. /src1: Tất cả các sự kiện nhanh chóng và các sự kiện ổ cắm của bạn sẽ đến đây.

Và cuối cùng, chúng tôi có tệp /src2 và /src3 và tôi tin rằng các tệp này không cần giới thiệu.

Vâng, bạn đã nghiên cứu và hiểu cấu trúc dự án mà bạn có. Bây giờ, hãy để tạo ra một dự án NodeJS bằng cách chạy bên dưới lệnh.

/src4

Lệnh này sẽ tạo một tệp pack.json, bằng cách hỏi về dự án của bạn. Bây giờ, hãy để một cái nhìn vào pack.json mà tôi đã tạo ra.package.json file, by asking about your project. Now let’s take a look at package.json which, I have created.

package.json:

Tạo máy chủ NodeJS

Vì vậy, bạn đã quen thuộc với cấu trúc thư mục, đó là thời gian để đi trước một máy chủ created nodejs. Bạn sẽ bắt đầu NodeJS của mình trong tệp /src3, vì tên của tệp thể hiện chính nó. Mở tệp /src3 và ghi ra mã dưới đây.

server.js:

Explanation:

Mã trên là đơn giản, bạn nghĩ vậy! Máy chủ bắt đầu trong ba bước, được liệt kê dưới đây.

1. Đầu tiên, ứng dụng bắt đầu bằng cách thực thi phương thức xây dựng khi chúng ta tạo một đối tượng của lớp /src7.
2. Thứ hai, trong phương thức /src8, bạn sẽ bao gồm tất cả các cấu hình của bạn.
3. Bước cuối cùng là, bạn phải bao gồm các tuyến đường và sự kiện ổ cắm.

Và tất cả điều này sẽ xảy ra khi bạn sẽ thực thi phương thức /src9 bằng cách tạo đối tượng của máy chủ.

Tạo tệp cấu hình:

Phần này là tất cả về việc viết tệp cấu hình, vì vậy về cơ bản bạn sẽ xử lý các tệp bên trong thư mục npm install -g create-react-app8.

Hãy để bắt đầu với tệp /pages1, thành thật mà nói tại thời điểm này, bạn không cần tập tin này. Mặc dù khi ứng dụng của bạn phát triển, sẽ cần phải thực hiện cấu hình rõ ràng. Vì vậy, hãy mở tệp Express-config.js và ghi ra mã bên dưới,you don’t need this file. Though when your application grows, will need to do express configuration. So open the express-config.js file and write down the below code,

express-config.js:

Tệp cấu hình chính và cấu hình chính của chúng tôi là tệp /pages2, trong đó bạn sẽ viết tất cả các cấu hình liên quan đến ứng dụng của mình, bạn cũng sẽ bao gồm tệp /pages3 ở đó. Mở /pages2 và viết ra mã dưới đây.

app-config.js:

Explanation:

1. Vì ứng dụng này sử dụng tệp /src2 để lưu trữ cấu hình, bạn sẽ dotenv mô -đun, hãy đọc thêm về nó ở đây.dotenv module, read more about it here.
2. Bên trong /pages6 về cơ bản, bạn sẽ sử dụng BodyParser và kích hoạt CORS cho các tuyến ứng dụng.

Không có gì nhiều để làm ở đây, hãy để chuyển sang bước tiếp theo.

Kết nối với cơ sở dữ liệu (MongoDB):

Tạo tệp db.js trong thư mục npm install -g create-react-app8 và ghi ra mã bên dưới. Ở đây tôi đang sử dụng mô -đun MongoDB, mặc dù bạn có thể sử dụng lược đồ Mongo và tất cả. Vì tôi không muốn làm cho bài viết này phức tạp hơn nên tôi sẽ để lại cho bạn.db.js file under npm install -g create-react-app8 folder and write down the below code. Here I am using the MongoDB module, though you can use mongo schema and all. Since I don’t want to make this article more complicated so I will leave that to you.

db.js:

Sự kết luận

Vì vậy, ở đây chúng tôi đang ở cuối phần đầu tiên. Trước khi nhảy sang phần tiếp theo của bài viết, hãy để encore tất cả các bước nữa.

1. Chúng tôi đã tạo ứng dụng React, đã thiết lập tất cả các thiết lập cần thiết và hiểu cấu trúc thư mục của nó.
2. Thứ hai, chúng tôi đã tạo một ứng dụng NodeJS mới và thực hiện cấu hình.
3. Ngoài ra, chúng tôi đã tạo một máy chủ NodeJS và kết nối ứng dụng của chúng tôi với MongoDB.

Trong phần tiếp theo, bạn sẽ triển khai tính năng đăng nhập, đăng ký và đăng xuất cùng với các tính năng cần thiết khác. Tôi sẽ gặp bạn trong phần tiếp theo.

Hãy chia sẻ ý kiến ​​của bạn trong hộp bình luận dưới đây. Nếu bạn thích bài viết này, hãy chia sẻ nó và để lại một cái vỗ tay.

Làm cách nào để tạo một ứng dụng trò chuyện thời gian thực với NodeJS Socket.io và MongoDB?

Làm cách nào để tạo một ứng dụng trò chuyện thời gian thực với React?

Bạn có thể sử dụng socket.io với React không?

Tôi có thể kết nối React JS với MongoDB không?