Trong hướng dẫn này, chúng tôi sẽ phát triển một ứng dụng Trò chuyện hỗ trợ trực tiếp tương tác và chất lỏng với Ajax [JavaScript], PHP và MySQL. Chúng tôi sẽ tận dụng AJAX để nhận và gửi tin nhắn trong thời gian thực mà không phải tải lại trang.
Bạn đã bao giờ thấy biểu tượng trò chuyện xuất hiện trên nhiều trang web ở góc dưới bên phải chưa? Chúng tôi sẽ phát triển một ứng dụng trò chuyện hỗ trợ trực tiếp giống hệt với những gì bạn sẽ tìm thấy trên các trang web đó.
1. Giới thiệu
Trong thời đại ngày nay, việc thực hiện hỗ trợ trực tiếp vào trang web của bạn là điều cần thiết vì nó sẽ mang lại ý thức về sự tin tưởng giữa người tiêu dùng và doanh nghiệp, cho dù bạn bán hàng hóa vật lý hay ảo. Để một doanh nghiệp xây dựng tính toàn vẹn, nó phải cung cấp hỗ trợ vững chắc cho người tiêu dùng, đây là một nền tảng cơ bản cho bất kỳ doanh nghiệp nào.
Hơn nữa, khi người tiêu dùng hỏi về các sản phẩm mà họ ngần ngại mua, nó có khả năng dẫn đến bán hàng và do đó tăng lợi nhuận kinh doanh vì với hỗ trợ trò chuyện trực tiếp, bạn có thể trả lời các câu hỏi kịp thời.
Với sự tiến bộ của công nghệ web, chúng ta có thể tận dụng các phương pháp hiện đại để phát triển một ứng dụng trò chuyện thời gian thực và trôi chảy.
2. Bắt đầu
Trước khi chúng tôi bắt đầu mã hóa ứng dụng Trò chuyện hỗ trợ trực tiếp, chúng tôi cần một máy chủ web hoạt động và cài đặt các công cụ sẽ giúp chúng tôi phát triển ứng dụng.
2.1. Yêu cầu
- Tôi đặc biệt khuyên bạn nên tải xuống và cài đặt XAMPP trên môi trường phát triển của bạn. Tuy nhiên, hãy nhớ rằng XAMPP chỉ được sử dụng cho mục đích phát triển và không được sử dụng để sản xuất.
- Đảm bảo máy chủ web của bạn đang chạy PHP> = 5.5 và MySQL> = 5.6. Phiên bản mới nhất của XAMPP sẽ được xây dựng sẵn với các thành phần mới nhất và do đó không phải là vấn đề.PHP >= 5.5 and MySQL >= 5.6. The latest version of XAMPP will come pre-built with the latest components and therefore shouldn't be an issue.
- Tải xuống và cài đặt một trình soạn thảo mã. Bạn có thể sử dụng Notepad để chỉnh sửa các tệp, nhưng tôi không khuyên bạn nên. Thay vào đó, hãy cài đặt một trong những điều sau: Notepad ++, Visual Studio Code hoặc Atom.
2.2. Những gì bạn sẽ học trong hướng dẫn này
- Triển khai AJAX-Tận dụng AJAX để cập nhật các cuộc hội thoại trong thời gian thực. — Leverage AJAX to update conversations in real-time.
- Dân sự SQL Records - Truy xuất tin nhắn từ cơ sở dữ liệu và điền vào chúng cho phù hợp. — Retrieve messages from the database and populate them accordingly.
- Thiết kế chất lỏng với CSS3 - Chuyển tiếp giữa các tab trò chuyện một cách liền mạch. — Transition between chat tabs seamlessly.
- Xác thực - Xác thực toán tử và tạo tài khoản cho khách. — Authenticate operators and create accounts for guests.
- Tìm kiếm thông minh - Tự động tìm các toán tử và khách với các thuật toán thông minh. — Automatically find operators and guests with intelligent algorithms.
2.3. Cấu trúc và thiết lập tệp
Chúng tôi cần bắt đầu máy chủ web của mình và tạo các thư mục và tệp chúng tôi sẽ sử dụng cho ứng dụng Trò chuyện hỗ trợ trực tiếp của chúng tôi. Nếu bạn đã cài đặt XAMPP, hãy làm theo các hướng dẫn bên dưới.
- Mở bảng điều khiển XAMPP
- Bên cạnh mô -đun Apache, bấm Bắt đầu
- Bên cạnh mô -đun MySQL, bấm Bắt đầu
- Điều hướng đến thư mục cài đặt của XAMPP [C: \ XAMPP]
- Mở thư mục HTDOCS
- Tạo các thư mục và tệp sau:
Cấu trúc tập tin
\- LivesupportChat & nbsp; & nbsp; & nbsp; & nbsp; |- style.css & nbsp; & nbsp; & nbsp; & nbsp; | & nbsp; .Php & nbsp; & nbsp; & nbsp; & nbsp; |- index.html
|--
style.css
|-- authenticate.php
|-- conversation.php
|-- conversations.php
|-- find_conversation.php
|-- main.php
|-- post_message.php
|-- index.html
Mỗi tệp sẽ bao gồm các mục sau:
- style.css - The StyleSheet [CSS3] cho ứng dụng Trò chuyện hỗ trợ trực tiếp của chúng tôi, được sử dụng để định dạng nội dung có cấu trúc [HTML] của chúng tôi.
- xác thực.php - sẽ được sử dụng cùng với mẫu đăng nhập, sẽ xác thực người dùng dựa trên địa chỉ email được cung cấp.
- CHUYỂN ĐỔI.php - Tệp hội thoại sẽ truy xuất tin nhắn từ cơ sở dữ liệu MySQL được liên kết với người gửi và người nhận.
- Cuộc trò chuyện.php - Tệp hội thoại sẽ truy xuất tất cả các cuộc hội thoại được liên kết với người dùng và đưa chúng dựa trên ngày.
- find_conversation.php - Tệp hội thoại tìm sẽ kết nối người dùng với toán tử, nhưng chỉ khi cả hai người dùng nhấp vào nút "Trò chuyện mới".
- Main.php - Tệp chính sẽ chứa các chức năng toàn cầu mà chúng tôi sẽ sử dụng trong suốt các tệp khác của chúng tôi, chẳng hạn như mã kết nối cơ sở dữ liệu, hàm is_loggedin và hơn thế nữa.
- POST_MESSAGE.php - Tệp thông báo bài đăng sẽ được sử dụng để gửi tin nhắn và chèn chúng vào cơ sở dữ liệu.
3. Tạo cơ sở dữ liệu
Cơ sở dữ liệu MySQL sẽ lưu trữ tất cả các tin nhắn, cuộc hội thoại, tài khoản và dữ liệu liên quan đến ứng dụng khác của chúng tôi. Chúng tôi có thể sử dụng cơ sở dữ liệu để lưu trữ, cập nhật, chèn và truy xuất dữ liệu.
Để bắt đầu, hãy làm theo các hướng dẫn dưới đây.
- Điều hướng đến phpmyadmin trong trình duyệt của bạn: // localhost/phpmyadmin/
- Nhấp vào tab Cơ sở dữ liệu trong menu điều hướng hàng đầu
- Trong phần Tạo cơ sở dữ liệu, nhập phpsupportChat làm tên cơ sở dữ liệu và utf8_general_ci làm đối chiếu
- Nhấp vào nút Tạo
- Chọn cơ sở dữ liệu mới được tạo trong bảng điều khiển bên trái
- Nhấp vào tab SQL
- Thực hiện câu lệnh SQL dưới đây
CREATE TABLE IF NOT EXISTS `accounts` [
`id` int[11] NOT NULL AUTO_INCREMENT,
`email` varchar[255] NOT NULL,
`password` varchar[255] NOT NULL,
`full_name` varchar[255] NOT NULL,
`role` enum['Guest','Operator'] NOT NULL,
`secret` varchar[255] NOT NULL DEFAULT '',
`last_seen` datetime NOT NULL,
`status` enum['Occupied','Waiting','Idle'] NOT NULL DEFAULT 'Idle',
PRIMARY KEY [`id`]
] ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
INSERT INTO `accounts` [`id`, `email`, `password`, `full_name`, `role`, `secret`, `last_seen`, `status`] VALUES
[1, '', '$2y$10$thE7hIJF/EJvKjmJy7hd5uH3a/BNgSUepkYoES0q80YEzi7VqWsRG', 'Operator', 'Operator', '', '2022-05-03 14:14:35', 'Idle'];
CREATE TABLE IF NOT EXISTS `conversations` [
`id` int[11] NOT NULL AUTO_INCREMENT,
`account_sender_id` int[11] NOT NULL,
`account_receiver_id` int[11] NOT NULL,
`submit_date` datetime NOT NULL,
PRIMARY KEY [`id`]
] ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE IF NOT EXISTS `messages` [
`id` int[11] NOT NULL AUTO_INCREMENT,
`conversation_id` int[11] NOT NULL,
`account_id` int[11] NOT NULL,
`msg` varchar[255] NOT NULL,
`submit_date` datetime NOT NULL,
PRIMARY KEY [`id`]
] ENGINE=InnoDB DEFAULT CHARSET=utf8;Câu lệnh SQL trên sẽ tạo các bảng sau:
- Tài khoản - Bảng này sẽ lưu trữ tất cả khách và nhà khai thác của chúng tôi. — this table will store all our guests and operators.
- ID-Cột ID sẽ tự động tăng và do đó mỗi cột mới sẽ có một số nguyên duy nhất.
- Email - Địa chỉ email được liên kết với người dùng.
- Mật khẩu - Trường mật khẩu cần thiết cho các nhà khai thác.
- FULL_NAME - Tên đầy đủ được liên kết với người dùng.
- Vai trò - Cột vai trò sẽ xác định xem người dùng là khách hoặc nhà điều hành.
- Bí mật - Một mã độc đáo bí mật được yêu cầu để tự động xác thực khách và người vận hành.
- last_seen - ngày cuối cùng người dùng kích hoạt một hành động.
- Trạng thái - Trạng thái của người dùng, có thể bị chiếm [trò chuyện với người dùng], chờ đợi [tìm một cuộc trò chuyện mới] hoặc nhàn rỗi.
- Cuộc trò chuyện - Bảng này sẽ lưu trữ tất cả các thông tin quan trọng liên quan đến cuộc trò chuyện. — this table will stored all the vital information related to the conversation.
- ID - ID duy nhất.
- ACCK_SENDER_ID - ID tài khoản của người gửi, sẽ được liên kết với bảng tài khoản.
- ACCK_RECEIVER_ID - ID tài khoản của người nhận, sẽ được liên kết với bảng tài khoản.
- SUBFORM_DATE - Ngày cuộc trò chuyện được tạo ra.
- Tin nhắn - Bảng này sẽ được lưu trữ tất cả các tin nhắn đã gửi. — this table will stored all the submitted messages.
- ID - ID duy nhất.
- ACCK_SENDER_ID - ID tài khoản của người gửi, sẽ được liên kết với bảng tài khoản.
- ACCK_RECEIVER_ID - ID tài khoản của người nhận, sẽ được liên kết với bảng tài khoản.
- SUBFORM_DATE - Ngày cuộc trò chuyện được tạo ra.
- Tin nhắn - Bảng này sẽ được lưu trữ tất cả các tin nhắn đã gửi.
trò chuyện_id - ID hội thoại, sẽ được liên kết với bảng hội thoại.
ACCK_ID - ID tài khoản của người gửi, sẽ được liên kết với bảng tài khoản.
//localhost/phpmyadmin
Đừng coi tệp chỉ mục là một phần cơ bản của ứng dụng Chat hỗ trợ trực tiếp vì mã JS chúng tôi thêm vào tệp này có thể được triển khai cho bất kỳ tệp hoặc trang web nào. Chúng tôi sẽ sử dụng tệp này làm cơ sở để làm việc.
Chỉnh sửa tệp index.html và thêm:
‹
×
Submit
Chúng tôi sẽ triển khai mã JS và AJAX ở giai đoạn sau. Thư viện fontawgie được bao gồm để thêm biểu tượng tin nhắn vào tiện ích trò chuyện của chúng tôi.
Trước khi chúng tôi triển khai mã JS, chúng tôi cần thêm nút sẽ mở tiện ích trò chuyện của chúng tôi.
- Nút sẽ xuất hiện ở góc dưới bên phải. Như bạn có thể thấy, chúng tôi sử dụng thư viện phông chữ tuyệt vời để hiển thị biểu tượng.
- Thêm vào sau:
- Mã trên sẽ là mẫu cho tiện ích trò chuyện của chúng tôi, sau đó sẽ mở khi nút được khai báo trước đó được nhấp.
Tiện ích trò chuyện sẽ bao gồm ba tab:
Tab 1 - sẽ được sử dụng để hiển thị biểu mẫu xác thực [tên, email, mật khẩu, v.v.].
Tab 2 - sẽ chứa danh sách các cuộc hội thoại được liên kết với người dùng.
Tab 3 - sẽ là cuộc trò chuyện chứa tin nhắn từ người gửi và người nhận.
Mỗi tab sẽ chứa một quá trình chuyển đổi sẽ kích thích hướng trên trục x. Đó là để chúng ta có thể chuyển đổi giữa các tab một cách trơn tru.
6. Tạo tệp chínhThe password_hash[] function is a strong one-way hashing algorithm and therefore is extremely difficult for an attacker to try and decrypt the hashed string.
Tệp chính sẽ chứa các chức năng và mã kết nối cơ sở dữ liệu sẽ được yêu cầu trong các tệp PHP khác của chúng tôi. Không cần phải thực hiện cùng một mã trong mỗi tệp.
Chỉnh sửa tệp Main.php và thêm:
Chúng tôi sẽ tận dụng các phiên để xác định xem người dùng của chúng tôi có đăng nhập hay không. Ngoài ra, cookie bí mật sẽ tự động xác thực người dùng của chúng tôi nếu được khai báo.
Bạn có biết không? Hàm password_hash [] là một thuật toán băm một chiều mạnh mẽ và do đó, một kẻ tấn công cực kỳ khó khăn để thử và giải mã chuỗi băm.