search

Hướng dẫn simple chat script in php mysql and ajax - kịch bản trò chuyện đơn giản trong php mysql và ajax

Ngày đăng: 09/10/2022
Trả lời: 0
Lượt xem: 105

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.

Show

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: http: // 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.

http://localhost/phpmyadmin

Hướng dẫn simple chat script in php mysql and ajax - kịch bản trò chuyện đơn giản trong php mysql và ajax

Tin nhắn - Tin nhắn đã gửi.

SUBMEM_DATE - Ngày tin nhắn được tạo.

Ngoài các điều trên, câu lệnh SQL sẽ tạo tài khoản toán tử mà sau này chúng ta có thể sử dụng khi kiểm tra tiện ích trò chuyện.

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  background-color: #FFFFFF;
  margin: 0;
}
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  text-transform: uppercase;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}

Trong phpmyadmin, cấu trúc cơ sở dữ liệu sẽ trông giống như sau:

4. Tạo biểu định kiểu (CSS3)

Tệp CSS sẽ tạo kiểu và bố trí ứng dụng Trò chuyện hỗ trợ trực tiếp của chúng tôi. Với các kiểu dáng, chúng ta có thể áp dụng các kiểu cho các yếu tố cụ thể, chẳng hạn như thay đổi kích thước phông chữ, màu sắc, hình ảnh động và bất cứ thứ gì liên quan đến thiết kế.

Chỉnh sửa tệp style.css và thêm:



	
		
		Live Support Chat
		
        
	
	
	    
Live Support Chat

		
The live support chat icon will appear in the bottom-right corner.

Điều đó là đủ để làm cho ứng dụng của chúng tôi trông thanh lịch. Các chuyển đổi được thêm vào bảng kiểu sẽ hiện đại hóa ứng dụng của chúng tôi và sẽ cho phép người dùng điều hướng giữa các tab tiện ích trò chuyện một cách liền mạch.

5. Tạo tệp chỉ mục

After:

Add:

Đừ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:


    

        ‹
        ×

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.

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $exception) {
    // Failed to connect! Check the database variables and ensure your database exists with all tables.
	exit('Failed to connect to database!');
}
// The following function will check whether the user is logged-in or not.
function is_loggedin($pdo) {
    // Session loggedin?
    if (isset($_SESSION['account_loggedin'])) {
        // Update the last seed date
        $stmt = $pdo->prepare('UPDATE accounts SET last_seen = ? WHERE id = ?');
        $stmt->execute([ date('Y-m-d H:i:s'), $_SESSION['account_id'] ]);
        return TRUE;
    }
    // Check if the secret cookie is declared in the browser cookies
    if (isset($_COOKIE['chat_secret']) && !empty($_COOKIE['chat_secret'])) {
        $stmt = $pdo->prepare('SELECT * FROM accounts WHERE secret = ?');
        $stmt->execute([ $_COOKIE['chat_secret'] ]);
        $account = $stmt->fetch(PDO::FETCH_ASSOC);
        // Does the account exist?
        if ($account) {
            // Yes it does... Authenticate the user
            $_SESSION['account_loggedin'] = TRUE;
            $_SESSION['account_id'] = $account['id'];
            $_SESSION['account_role'] = $account['role']; 
            return TRUE;
        }
    }
    // User isn't logged-in!
    return FALSE;
}
// The following function will update the user's secret code in the databse
function update_secret($pdo, $id, $email, $current_secret = '') {
    // Generate the code using the password hash function. Make sure you change 'yoursecretkey'.
    $cookiehash = !empty($current_secret) ? $current_secret : password_hash($id . $email . 'yoursecretkey', PASSWORD_DEFAULT);
    // The number of days the secret cookie will be remembered
    $days = 30;
    // Create the new cookie
    setcookie('chat_secret', $cookiehash, (int)(time()+60*60*24*$days));
    // Update the secret code in the databse
    $stmt = $pdo->prepare('UPDATE accounts SET secret = ? WHERE id = ?');
    $stmt->execute([ $cookiehash, $id ]);
}
// The following function will be used to assign a unique icon color to our users
function color_from_string($string) {
    // The list of hex colors
    $colors = ['#34568B','#FF6F61','#6B5B95','#88B04B','#F7CAC9','#92A8D1','#955251','#B565A7','#009B77','#DD4124','#D65076','#45B8AC','#EFC050','#5B5EA6','#9B2335','#DFCFBE','#BC243C','#C3447A','#363945','#939597','#E0B589','#926AA6','#0072B5','#E9897E','#B55A30','#4B5335','#798EA4','#00758F','#FA7A35','#6B5876','#B89B72','#282D3C','#C48A69','#A2242F','#006B54','#6A2E2A','#6C244C','#755139','#615550','#5A3E36','#264E36','#577284','#6B5B95','#944743','#00A591','#6C4F3D','#BD3D3A','#7F4145','#485167','#5A7247','#D2691E','#F7786B','#91A8D0','#4C6A92','#838487','#AD5D5D','#006E51','#9E4624'];
    // Find color based on the string
    $colorIndex = hexdec(substr(sha1($string), 0, 10)) % count($colors);
    // Return the hex color
    return $colors[$colorIndex];
}
?>

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.

Đảm bảo cập nhật các biến cơ sở dữ liệu để phản ánh của riêng bạn. Nếu bạn gặp lỗi kết nối cơ sở dữ liệu, rất có thể là do thông tin đăng nhập không chính xác được cung cấp.

Thêm vào sau:

// Select account from the database based on the email address
$stmt = $pdo->prepare('SELECT * FROM accounts WHERE email = ?');
$stmt->execute([ $_POST['email'] ]);
// Fetch the results and return them as an associative array
$account = $stmt->fetch(PDO::FETCH_ASSOC);

Mã trên sẽ truy xuất tài khoản được liên kết với địa chỉ email đã bị bắt. Để ngăn ngừa tiêm SQL, chúng tôi tận dụng các tuyên bố đã chuẩn bị.

Thêm vào sau:

// Does the account exist?
if ($account) {
    // Yes, it does... Check whether the user is an operator or guest
} else {
    // Accounts doesn't exist, so create one
}

Điều đó sẽ kiểm tra xem tài khoản có tồn tại hay không. Bây giờ, chúng ta phải thêm mã sẽ xác thực người dùng và cung cấp phản hồi.

After:

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  background-color: #FFFFFF;
  margin: 0;
}
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  text-transform: uppercase;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}
0

Add:

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  background-color: #FFFFFF;
  margin: 0;
}
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  text-transform: uppercase;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}
1

Mã trên sẽ xác thực người dùng, nhưng chỉ khi người dùng đáp ứng một trong các điều kiện được chỉ định. Các biến phiên sẽ được ghi nhớ trên máy chủ và về cơ bản sẽ hoạt động như cookie trình duyệt - tất cả các biến được liên kết với ID phiên.

Như đã đề cập trước đây, chúng tôi đã tạo hai vai trò cho người dùng của mình:

  • Nhà điều hành - Họ được yêu cầu nhập mật khẩu vì dữ liệu của họ sẽ cần được lưu giữ trong cơ sở dữ liệu. — they are required to enter a password as their data will need to be preserved in the database.
  • Khách - Mật khẩu không cần thiết vì nó sẽ quá tẻ nhạt đối với người dùng và họ sẽ cảm thấy miễn cưỡng khi sử dụng ứng dụng Trò chuyện hỗ trợ trực tiếp. — password is not essential as it will be too tedious for the user and they'll feel reluctant to use the live support chat app.

Php tipthe exit () hàm sẽ dừng tập lệnh và ngăn chặn thực hiện thêm. Nếu param được chỉ định, nó sẽ xuất chuỗi vào trình duyệt.The exit() function will stop the script and prevent further execution. If the param is specified, it will output the string to the browser.

After:

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  background-color: #FFFFFF;
  margin: 0;
}
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  text-transform: uppercase;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}
2

Add:

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  background-color: #FFFFFF;
  margin: 0;
}
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  text-transform: uppercase;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}
3

Cuối cùng, mã trên sẽ tạo một tài khoản nếu người ta không tồn tại trong cơ sở dữ liệu. Ngoài ra, người dùng sẽ tự động xác thực.

Các phản hồi đầu ra sẽ được sử dụng trong mã AJAX của chúng tôi để xác định trạng thái xác thực.

Bây giờ, chúng tôi có thể quay lại tệp chỉ mục của mình và triển khai mã AJAX cho biểu mẫu đăng nhập.

Chỉnh sửa tệp index.html và sau:

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  background-color: #FFFFFF;
  margin: 0;
}
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  text-transform: uppercase;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}
4

Add:

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  background-color: #FFFFFF;
  margin: 0;
}
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  text-transform: uppercase;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}
5

Mã trên sẽ khai báo các biến chúng tôi sẽ sử dụng trong tập lệnh của chúng tôi. Biến CurrentChattab sẽ cập nhật khi người dùng điều hướng giữa các tab tiện ích trò chuyện mà sau đó chúng ta có thể tận dụng để cập nhật tab hoạt động trong thời gian thực. Biến ConvertaionId là ID của cuộc trò chuyện và sẽ cập nhật khi người dùng tham gia vào một cuộc trò chuyện mới. Biến trạng thái là trạng thái hiện tại của người dùng, cũng cập nhật khi người dùng điều hướng giữa các tab.

Thêm vào sau:

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  background-color: #FFFFFF;
  margin: 0;
}
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  text-transform: uppercase;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}
6

Mã trên sẽ thêm trình xử lý sự kiện Onclick vào nút Tiện ích trò chuyện đang mở mà chúng tôi đã khai báo trước đó và sẽ thực thi chức năng Initchat khi được nhấp.

Hàm initchat sẽ bao gồm các trình xử lý sự kiện và mã AJAX sẽ xác thực người dùng và tìm nạp danh sách các cuộc hội thoại.

After:

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  background-color: #FFFFFF;
  margin: 0;
}
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  text-transform: uppercase;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}
7

Add:

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  background-color: #FFFFFF;
  margin: 0;
}
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  text-transform: uppercase;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}
8

Ban đầu, chúng tôi thêm mã sẽ mở tiện ích trò chuyện và sau đó thêm mã sẽ bắt đầu yêu cầu AJAX mới khi người dùng gửi biểu mẫu đăng nhập. Trong mã AJAX, chúng tôi lấy lại phản hồi trong cuộc gọi lại và xác định điều gì sẽ xảy ra tiếp theo.

Ngoài ra, nếu người dùng là toán tử, trường mật khẩu sẽ được thêm vào mẫu đăng nhập vì các toán tử được yêu cầu nhập mật khẩu.

Vì vậy, bây giờ, nếu chúng ta điều hướng đến trang Index qua Localhost và nhấp vào nút Tiện ích trò chuyện mở ở góc dưới bên phải, chúng ta sẽ thấy như sau:

http://localhost/livesupportchat/index.html

Hướng dẫn simple chat script in php mysql and ajax - kịch bản trò chuyện đơn giản trong php mysql và ajax

Nếu chúng ta nhập cả hai trường, chúng ta sẽ gặp phải một phản hồi thành công sẽ được hiển thị trên biểu mẫu đăng nhập. Nếu bạn không nhận được phản hồi, hãy kiểm tra bảng điều khiển nhà phát triển trình duyệt để biết lỗi và đảm bảo bạn không bỏ lỡ bất kỳ mã nào.

8. Cuộc trò chuyện cư trú

Bây giờ chúng tôi đã triển khai xác thực, chúng tôi có thể triển khai mã AJAX sẽ đưa ra các cuộc hội thoại được lấy từ cơ sở dữ liệu, được liên kết với ID tài khoản.

Tab Cuộc trò chuyện sẽ cho phép người dùng thấy tất cả các cuộc hội thoại họ đã trao đổi giữa người vận hành/khách. Chúng tôi sẽ điền vào danh sách dựa trên tin nhắn gần đây nhất, vì vậy cuộc trò chuyện với tin nhắn gần đây nhất sẽ luôn xuất hiện ở đầu.

Chỉnh sửa tệp Conversations.php và thêm:

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  background-color: #FFFFFF;
  margin: 0;
}
.open-chat-widget {
  text-decoration: none;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  right: 28px;
  bottom: 28px;
  background-color: #4488dc;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  z-index: 999998;
}
.open-chat-widget:hover {
  background-color: #3780da;
}
.chat-widget {
  position: fixed;
  display: none;
  right: 25px;
  bottom: 25px;
  box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  opacity: 0;
  transform: translateY(100px);
  border-radius: 5px;
  background-color: #fff;
  width: 300px;
  height: 500px;
  visibility: hidden;
  transition: all .2s ease;
  flex-flow: column;
  overflow: hidden;
}
.chat-widget.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.chat-widget .chat-widget-header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid #eef0f2;
}
.chat-widget .chat-widget-header .close-chat-widget-btn {
  display: block;
  text-decoration: none;
  font-size: 28px;
  margin-left: auto;
  padding: 0 15px;
  margin-bottom: 5px;
  color: #b4bdc6;
}
.chat-widget .chat-widget-header .close-chat-widget-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-header .previous-chat-tab-btn {
  display: none;
  text-decoration: none;
  font-size: 32px;
  padding: 0 15px;
  margin-bottom: 7px;
  color: #b4bdc6;
}

.chat-widget .chat-widget-header .previous-chat-tab-btn:hover {
  color: #a6b0bb;
}
.chat-widget .chat-widget-content {
  display: flex;
  flex-grow: 1;
}
.chat-widget .chat-widget-tabs {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.chat-widget .chat-widget-tabs .chat-widget-tab {
  display: flex;
  flex-flow: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  transition: all ease .2s;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab {
  justify-content: center;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input, 
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  border-radius: 25px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form input {
  border: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button {
  appearance: none;
  color: #fff;
  font-weight: 500;
  background-color: #4488dc;
  border: 0;
  cursor: pointer;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form button:hover {
  background-color: #2f7ad8;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-login-tab form .msg {
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 500;
  color: #888b8f;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-new-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #eef0f2;
  padding: 15px;
  width: 100%;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #fff;
  background-color: #3b4656;
  border-radius: 50%;
  text-transform: uppercase;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details {
  padding: 0 10px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .title {
  font-size: 14px;
  color: #5f6061;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .details .msg {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation .date {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: #8f9091;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversations-tab .chat-widget-conversations .chat-widget-conversation:hover {
  background-color: #f7f8f9;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages {
  display: flex;
  flex-flow: column;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .date {
  margin: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #8f9091;
  font-weight: 500;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message {
  align-self: flex-end;
  background-color: #4488dc;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 90%;
  margin-bottom: 10px;
  font-size: 14px;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-messages .chat-widget-message.alt {
  align-self: flex-start;
  background-color: #e2e6eb;
  color: #000;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message {
  height: 60px;
  padding: 10px;
  border-top: 1px solid #e0e3e7;
}
.chat-widget .chat-widget-tabs .chat-widget-tab.chat-widget-conversation-tab .chat-widget-input-message input {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 0;
  outline: 0;
}
.chat-widget-messages::-webkit-scrollbar,
.chat-widget-conversations::-webkit-scrollbar {
  width: 8px;
}
.chat-widget-messages::-webkit-scrollbar-track,
.chat-widget-conversations::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb,
.chat-widget-conversations::-webkit-scrollbar-thumb {
  background-color: #cdd0d380;
  border-radius: 15px;
  border: transparent;
}
9

Giống như trước đây, chúng tôi cần đảm bảo người dùng được xác thực trước khi họ có thể tiến hành. Trạng thái người dùng được cập nhật thành Idle, điều đó có nghĩa là người dùng không làm gì cả.

Thêm vào sau:



	
		
		Live Support Chat
		
        
	
	
	    
Live Support Chat

		
The live support chat icon will appear in the bottom-right corner.
0

Với mã trên, chúng tôi thực thi truy vấn để truy xuất tất cả các cuộc hội thoại tương ứng với ID tài khoản của người dùng. Sau đó, chúng tôi tận dụng chức năng Usort để sắp xếp các kết quả được truy xuất vào ngày tin nhắn gần đây nhất.

Thêm vào sau:



	
		
		Live Support Chat
		
        
	
	
	    
Live Support Chat

		
The live support chat icon will appear in the bottom-right corner.
1

Mã trên là mẫu cho danh sách hội thoại của chúng tôi. Chúng tôi sử dụng một hàm foreach để lặp lại kết quả và xuất chúng cho phù hợp.

Php tipthe HTMLSpecialchars () Hàm sẽ thoát khỏi các thực thể HTML và do đó ngăn chặn các cuộc tấn công XSS.The htmlspecialchars() function will escape HTML entities and therefore preventing XSS attacks.

Bây giờ, chúng tôi cần quay lại trang chỉ mục của mình và triển khai mã AJAX sẽ truy xuất các cuộc hội thoại từ tệp trên.

Chỉnh sửa tệp index.html và thêm chức năng sau vào tập lệnh JS:



	
		
		Live Support Chat
		
        
	
	
	    
Live Support Chat

		
The live support chat icon will appear in the bottom-right corner.
2

Hàm trên sẽ chọn tab Widget Chat được chỉ định và cập nhật các biến toàn cầu mà chúng tôi đã khai báo trước đó. Nếu người dùng nằm trên tab Biểu mẫu đăng nhập, chúng tôi thêm mã sẽ xóa cookie được xác thực, đó là cookie chat_secret mà chúng tôi đã khai báo trong hàm php update_secret.

Chức năng tiếp theo chúng ta cần thêm vào tập lệnh JS là hàm của trò chuyện, sẽ thêm trình xử lý sự kiện vào các cuộc hội thoại.

Thêm bên dưới chức năng trên:



	
		
		Live Support Chat
		
        
	
	
	    
Live Support Chat

		
The live support chat icon will appear in the bottom-right corner.
3

Và bây giờ chúng ta có thể quay lại mã xử lý các phản hồi đăng nhập và thay thế dòng sau:



	
		
		Live Support Chat
		
        
	
	
	    
Live Support Chat

		
The live support chat icon will appear in the bottom-right corner.
4

With:



	
		
		Live Support Chat
		
        
	
	
	    
Live Support Chat

		
The live support chat icon will appear in the bottom-right corner.
5

Vì vậy, bây giờ, khi người dùng đăng nhập thành công, họ đã chuyển sang tab Cuộc hội thoại, sẽ điền vào tất cả các cuộc hội thoại mà người dùng được liên kết.

Nhưng chờ đã! Điều gì sẽ xảy ra nếu người dùng tải lại trang, họ sẽ cần phải xác thực lại? Ngay bây giờ, có, nhưng nếu chúng ta thêm mã sau vào hàm initchat:



	
		
		Live Support Chat
		
        
	
	
	    
Live Support Chat

		
The live support chat icon will appear in the bottom-right corner.
6

Chúng sẽ được tự động xác thực và chuyển sang tab hội thoại, nhưng chỉ khi người dùng đăng nhập. Chúng tôi đã triển khai mã Regex để xác định xem mã xác thực bí mật có tồn tại hay không. Nếu tồn tại, thực hiện yêu cầu AJAX.

Để điều hướng trở lại một tab trước, chúng ta có thể tận dụng chọn lọc mà chúng ta đã triển khai. Thêm mã sau vào chức năng Initchat:



	
		
		Live Support Chat
		
        
	
	
	    
Live Support Chat

		
The live support chat icon will appear in the bottom-right corner.
7

Khi người dùng nhấp vào nút trước đó trong tiêu đề tiện ích trò chuyện, họ được chuyển sang tab Biểu mẫu đăng nhập.

Nếu chúng tôi đăng nhập vào tiện ích trò chuyện bằng thông tin đăng nhập toán tử mà chúng tôi đã đưa vào câu lệnh SQL (email:, mật khẩu: toán tử), chúng tôi sẽ thấy như sau:

http://localhost/livesupportchat/index.html

Hướng dẫn simple chat script in php mysql and ajax - kịch bản trò chuyện đơn giản trong php mysql và ajax

Chúng tôi vẫn chưa bắt đầu một cuộc trò chuyện với khách và do đó không có cuộc trò chuyện nào xuất hiện trong tab. Chúng tôi sẽ làm điều đó trong phần tiếp theo khi chúng tôi thực hiện mã hội thoại.

9. Xử lý cuộc trò chuyện

Trong phần này, chúng tôi sẽ triển khai mã sẽ điền vào tất cả các tin nhắn giữa người nhận và người gửi và bao gồm biểu mẫu sẽ cho phép người dùng gửi tin nhắn. Ngoài ra, chúng tôi sẽ thêm xác thực để đảm bảo người dùng thuộc về cuộc trò chuyện chính xác - chúng tôi sẽ không muốn người dùng tấn công cuộc trò chuyện.

9.1. Lấy lại cuộc trò chuyện và thực hiện xác thực

Chỉnh sửa tệp trò chuyện.php và thêm:



	
		
		Live Support Chat
		
        
	
	
	    
Live Support Chat

		
The live support chat icon will appear in the bottom-right corner.
8

Trong mã trên, chúng tôi đảm bảo người dùng đã đăng nhập và tham số ID GET tồn tại vì không có tham số ID, làm thế nào chúng ta sẽ biết cuộc trò chuyện nào để truy xuất từ ​​cơ sở dữ liệu?

Sau đó, cuộc trò chuyện được lấy từ cơ sở dữ liệu dựa trên tham số ID và ID tài khoản phiên. ID tài khoản phiên sẽ đảm bảo cuộc trò chuyện thuộc về người dùng đó. Nếu cuộc trò chuyện không tồn tại, hãy kết thúc tập lệnh và xuất ra lỗi.

9.2. Tin nhắn điền kinh

Để điền vào các tin nhắn phù hợp, chúng tôi cần truy xuất chúng từ cơ sở dữ liệu dựa trên thông số get id và sử dụng vòng lặp foreach để sắp xếp các tin nhắn theo ngày gửi.

Thêm phần sau vào tệp trò chuyện.php:



	
		
		Live Support Chat
		
        
	
	
	    
Live Support Chat

		
The live support chat icon will appear in the bottom-right corner.
9

Cuối cùng, chúng ta có thể thêm mẫu sẽ điền vào các tin nhắn:

0

Trong mã trên, chúng tôi lặp lại các tin nhắn và xuất chúng phù hợp cùng với ngày sẽ xuất hiện phía trên các tin nhắn được nhóm. Ngoài ra, chúng tôi đã bao gồm thông báo đầu vào sẽ gửi tin nhắn đến tệp post_message.php mà chúng tôi sẽ tạo sau này.

9.3. Nắm bắt tin nhắn

Bắt các tin nhắn sẽ cho phép chúng tôi gửi tin nhắn và lưu trữ chúng trong cơ sở dữ liệu MySQL của chúng tôi.

Chỉnh sửa tệp post_message.php và thêm:

1

Trong mã trên, chúng tôi thêm xác thực để đảm bảo người dùng được liên kết với cuộc trò chuyện họ đang gửi tin nhắn. Giống như trước đây, chúng tôi sẽ tận dụng hàm isset () để đảm bảo dữ liệu yêu cầu GET tồn tại.

Thêm vào sau:

2

Cuối cùng, nếu người dùng quản lý để vượt qua xác thực, tin nhắn sẽ được chèn vào cơ sở dữ liệu.

9.4. Kết nối người dùng

Bây giờ, đây là nơi nó có thể trở nên tinh vi vì chúng tôi cần thực hiện mã kết nối hai người dùng, một người là khách và người kia là nhà điều hành. Trong trường hợp này, chúng tôi có thể tận dụng các cột Last_Seen và Status để xác định xem người dùng có đủ điều kiện không.

Chỉnh sửa tệp find_conversation.php và thêm:

3

Đầu tiên, chúng tôi cập nhật trạng thái để chờ đợi vì nó sẽ là yếu tố chính trong việc tìm kết nối. Sau khi chúng tôi kiểm tra xem đã có một cuộc trò chuyện được tạo trong phút cuối và nếu vậy, hãy xuất ID hội thoại, sau này sẽ được sử dụng để kết nối người dùng với khách/nhà điều hành.

Thêm vào sau:

4

Cuối cùng, nếu người dùng quản lý để vượt qua xác thực, tin nhắn sẽ được chèn vào cơ sở dữ liệu.

Thêm vào sau:

5

Cuối cùng, nếu người dùng quản lý để vượt qua xác thực, tin nhắn sẽ được chèn vào cơ sở dữ liệu.

9,5. Thực hiện mã JS

Trong phần này, chúng tôi sẽ triển khai mã AJAX để xử lý từng tệp cho phù hợp, vì vậy chúng tôi sẽ cần quay lại tệp chỉ mục của mình.

Chỉnh sửa tệp index.html và thêm chức năng sau vào tập lệnh JS:

6

Với chức năng trên, giờ đây chúng tôi có khả năng truy xuất một cuộc trò chuyện cùng với các thông điệp của nó dựa trên ID của cuộc trò chuyện. Hơn nữa, chúng tôi đã bao gồm mã AJAX sẽ gửi tin nhắn và nối nó vào cuộc trò chuyện.

Khi người dùng gửi tin nhắn, phần tử đầu vào sẽ đặt lại và thanh cuộn sẽ luôn bắt đầu từ phía dưới.

Và bây giờ chúng ta có thể thay thế dòng sau trong hàm hội thoại:

7

With:

8

Khi điều hướng đến tab hội thoại (giả sử bạn được kết nối với ai đó), nó sẽ trông tương tự như sau:

http://localhost/livesupportchat/index.html

Hướng dẫn simple chat script in php mysql and ajax - kịch bản trò chuyện đơn giản trong php mysql và ajax

Trong tab Cuộc trò chuyện, nó sẽ xuất hiện như sau:

http://localhost/livesupportchat/index.html

Hướng dẫn simple chat script in php mysql and ajax - kịch bản trò chuyện đơn giản trong php mysql và ajax

Có lẽ bạn đang nghĩ - thật tuyệt, David! Nhưng làm thế nào để chúng tôi cập nhật tiện ích trò chuyện trong thời gian thực? Tôi sẽ chỉ cho bạn chính xác làm thế nào trong phần tiếp theo.

10. Giao tiếp thời gian thực

Cuối cùng (và cảm ơn lòng tốt!), Chúng tôi sẽ thực hiện mã sẽ thực hiện các yêu cầu AJAX theo một khoảng thời gian cụ thể. Những gì chúng tôi đặt khoảng thời gian phụ thuộc hoàn toàn vào số lượng băng thông mà chúng tôi sẵn sàng phân bổ cho tiện ích trò chuyện. Chúng tôi có thể thực hiện các yêu cầu AJAX ở 100 mili giây, nhưng nếu máy chủ của chúng tôi không thể xử lý các yêu cầu, nó sẽ chậm lại đáng kể, vì vậy hãy luôn thận trọng và thử nghiệm.

Chỉnh sửa tệp index.html và thêm phần sau vào tập lệnh JS:

9

Chúng tôi đang tận dụng chức năng SetInterVal để thực hiện các yêu cầu AJAX và cập nhật nội dung tiện ích trò chuyện. Chức năng gọi lại được chia thành SetInterVal sẽ thực hiện cứ sau 5 giây - hãy thoải mái hạ số nhưng vui lòng thử nghiệm trước khi làm như vậy.

Nội dung nào chúng tôi cập nhật phụ thuộc vào tab trò chuyện hiện tại, vì vậy nếu người dùng ở trên Tab 2 (Danh sách trò chuyện), không cần thiết phải cập nhật nội dung trên Tab 3 và sẽ tiết kiệm cho chúng tôi rất nhiều băng thông.

Cách tiếp cận SetInterval chậm hơn nhiều so với WebSockets được sử dụng trong các ứng dụng nhắn tin truyền thống, nhưng nó không yêu cầu bất kỳ sự phụ thuộc nào và sẽ hoạt động trên bất kỳ trang web nào có hỗ trợ PHP và MySQL, vì vậy nó thuận tiện hơn nhiều.

Sự kết luận

Nếu bạn đã đến cùng, xin chúc mừng! Có nhiều nguyên tắc cơ bản liên quan khi phát triển một ứng dụng trò chuyện và do đó bạn phải hiểu mọi khía cạnh đã được nêu trong hướng dẫn.

Nếu bạn thích đọc bài viết, hãy nhấn các nút chia sẻ bên dưới và giúp trang web của chúng tôi phấn đấu để thành công! Chúng ta càng nhận được nhiều tiếp xúc, chúng ta càng có nhiều nội dung chất lượng.

Cảm ơn bạn đã đọc và vui chơi mã hóa! :-)

Nếu bạn muốn hỗ trợ chúng tôi, hãy xem xét việc mua gói nâng cao dưới đây. Nó sẽ giúp chúng tôi tạo ra nhiều nội dung hơn và giữ cho trang web của chúng tôi bền vững. Hỗ trợ của bạn sẽ được đánh giá cao!

Nâng cao

Mã nguồn

Cơ sở dữ liệu Tệp SQL

Hệ thống trò chuyện hỗ trợ trực tiếp an toàn

Mẫu trang chủ

Lớp JavaScript

Tập tin đính kèm

Thông điệp biểu tượng cảm xúc

Tin nhắn đáp ứng

Tâm trạng người dùng

Thông báo cài đặt trước

Tích hợp Ajax

Nhiều vai trò

Cải thiện mã

Bảng quản trị - Bảng điều khiển - Quản lý tin nhắn - Chấp nhận yêu cầu - Xem người dùng - Cài đặt
— Dashboard
— Manage Messages
— Accept Requests
— View Users
— Settings

Thiết kế đáp ứng (thân thiện với thiết bị di động)

Tệp SCSS

Mã nhận xét

Không có giới hạn mã

Cập nhật và hỗ trợ miễn phí (lỗi và các vấn đề nhỏ)

Hướng dẫn sử dụng

* Thanh toán được xử lý với PayPal/Stripe. * Gói nâng cao cũng bao gồm nguồn hướng dẫn.
* Advanced package also includes the tutorial source.

Để biết thêm thông tin chi tiết về gói nâng cao, bấm vào đây.

Làm thế nào để tạo trò chuyện trong PHP và MySQL?

Bước1: Tạo bảng cơ sở dữ liệu. ....
Bước 2: Đăng nhập người dùng trò chuyện. ....
Bước 3: Tạo hệ thống trò chuyện HTML. ....
Bước4: Xử lý câu trả lời trò chuyện của người dùng. ....
Bước5: Cập nhật thông tin danh sách người dùng trò chuyện. ....
Bước6: Cập nhật chi tiết trò chuyện người dùng đang hoạt động. ....
Bước7: Cập nhật số lượng tin nhắn chưa đọc của người dùng. ....
Bước8: Cập nhật trạng thái gõ người dùng ..

Làm cách nào để tạo trò chuyện trực tuyến trong PHP?

Bắt đầu bằng cách tạo chỉ mục ...
Thêm tập lệnh và liên kết vào tiêu đề ..
Tạo một hình thức bootstrap cơ bản ..
Kích hoạt máy đẩy bằng cách truyền phím API ..
Nhập một kênh duy nhất để đăng ký và ràng buộc sự kiện ..
Tạo cuộc gọi AJAX để gửi và nhận dữ liệu vào tin nhắn.Tệp PHP ..
Trigger Enter Key Nhấp vào sự kiện để gửi tin nhắn ..

Bạn có thể sử dụng AJAX với PHP không?

Bắt đầu sử dụng AJAX ngay hôm nay trong hướng dẫn PHP của chúng tôi, chúng tôi sẽ chứng minh cách AJAX có thể cập nhật các phần của trang web, mà không cần tải lại toàn bộ trang.Tập lệnh máy chủ sẽ được viết bằng PHP.Nếu bạn muốn tìm hiểu thêm về Ajax, hãy truy cập hướng dẫn Ajax của chúng tôi.The server script will be written in PHP. If you want to learn more about AJAX, visit our AJAX tutorial.

Làm thế nào để bạn tạo một ứng dụng trò chuyện web đơn giản?

Cách tạo ứng dụng trò chuyện dựa trên web (các bước dễ dàng)..
Tải xuống sdks trò chuyện ..
Thêm các tính năng trò chuyện vào ứng dụng ..
Kết nối các sdks trò chuyện với máy chủ ..
Gửi và nhận tin nhắn qua ứng dụng trò chuyện web của riêng bạn ..

programming php AJAX chat Ajax chat demo PHP live chat

Bài Viết Liên Quan

Mục đích của báo cáo tài chính là gì năm 2024
Mục đích của báo cáo tài chính là gì năm 2024

là ai Hỏi Đáp Là gì
Công ty crmto việt nam chi nhánh thanh hóa năm 2024
Công ty crmto việt nam chi nhánh thanh hóa năm 2024

mẹo hay
Kế toán ở đơn vị kế toán gồm năm 2024
Kế toán ở đơn vị kế toán gồm năm 2024

mẹo hay Tài sản là
Viêm cầu thận tiếng anh là gì năm 2024
Viêm cầu thận tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Glomerulonephritis là gì
Làm giảm trừ gia cảnh như thế nào năm 2024
Làm giảm trừ gia cảnh như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào
Giải phiếu bài tập cuối tuần lớp 5 tuan 6 năm 2024
Giải phiếu bài tập cuối tuần lớp 5 tuan 6 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Esp8266 ch340 tên mã trong adruino ide là gì năm 2024
Esp8266 ch340 tên mã trong adruino ide là gì năm 2024

là ai Hỏi Đáp Là gì ESP8266 Esp8266 là gì Arduino WiFi ESP32 Arduino Arduino download Arduino web server
Phụ nữ đeo nhẫn cưới bên tay nào năm 2024
Phụ nữ đeo nhẫn cưới bên tay nào năm 2024

mẹo hay Giới Tính Phụ nữ
Vượt lên số phận là gì năm 2024
Vượt lên số phận là gì năm 2024

là ai Hỏi Đáp Là gì
Màu sắc trong văn hóa các dân tộc việt nam năm 2024
Màu sắc trong văn hóa các dân tộc việt nam năm 2024

mẹo hay
Imo trong xuất nhập khẩu là gì năm 2024
Imo trong xuất nhập khẩu là gì năm 2024

là ai Hỏi Đáp Là gì IMCO là gì?
Cân bằng phản ứng oxi hóa khử là gì năm 2024
Cân bằng phản ứng oxi hóa khử là gì năm 2024

mẹo hay Hỏi Đáp Là gì
Cách giải bài toán lớp 4 bài 3 trang 94 năm 2024
Cách giải bài toán lớp 4 bài 3 trang 94 năm 2024

mẹo hay Mẹo Hay Cách
Lỗi connect camera ip open error no power năm 2024
Lỗi connect camera ip open error no power năm 2024

mẹo hay
Hợp tác là gì cho ví dụ năm 2024
Hợp tác là gì cho ví dụ năm 2024

là ai Hỏi Đáp Là gì Ví dụ
Fob cảng đi thì exw thể hiện như thế nào năm 2024
Fob cảng đi thì exw thể hiện như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào
10 năm ngày cưới gọi là gì năm 2024
10 năm ngày cưới gọi là gì năm 2024

là ai Hỏi Đáp Là gì
Bài tập tín hiệu và hệ thống slide năm 2024
Bài tập tín hiệu và hệ thống slide năm 2024

mẹo hay Khỏe Đẹp Bài tập
Bài tập nâng cao về căn bậc 2 lớp 9 năm 2024
Bài tập nâng cao về căn bậc 2 lớp 9 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Viêt tăt cụm từ ctmn toán lớp 7 là gì năm 2024
Viêt tăt cụm từ ctmn toán lớp 7 là gì năm 2024

là ai Hỏi Đáp Là gì Đánh trọng âm

Quảng Cáo

Có thể bạn quan tâm

Cơ quan lãnh sự quán gồm các cơ quan nào năm 2024
1 ngày trước . bởi DankWidget
Danh sách giáo viên dạy hóa giởi tại đà nẵng năm 2024
1 ngày trước . bởi WhitishArchery
Cách khắc phục lỗi gõ số trong miniworld năm 2024
1 ngày trước . bởi CardiacReaction
Boộ nhận diện thương hiệu tiếng anh là gì năm 2024
1 ngày trước . bởi FoulAlligator
Bất kỳ sửa đổi nào trong điều kiện hợp đồng năm 2024
1 ngày trước . bởi WiryTerry
Top nhung bai hat đang đuoc nghe nhju nhât năm 2024
1 ngày trước . bởi DualAppeasement
Bị đau ở đầu gối là bệnh gì năm 2024
1 ngày trước . bởi AptHelping
Cách khắc phục lỗi hết hạn word 2010 bị khóa năm 2024
1 ngày trước . bởi WidespreadFries
Văn học là gì tình thương là gì năm 2024
1 ngày trước . bởi AttemptedCylinder
Giải vở thực hành toán lớp 3 tập 1 năm 2024
1 ngày trước . bởi DetailedEstimation

Toplist được quan tâm

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
6 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
6 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
6 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
6 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
6 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
6 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
6 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
6 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
6 tháng trước

Quảng cáo

Xem Nhiều

Bài tập cấu hình electron nguyên tử khó năm 2024
1 tuần trước . bởi HumidTiger
Nghiệp vụ tín dụng ngân hàng là gì năm 2024
6 ngày trước . bởi NutritionalBuilding
Lý luận mác lênin có phải đã lỗi thời năm 2024
2 ngày trước . bởi HereticalEmperor
Mục đích sử dụng đất 2l 19 năm là gì năm 2024
1 tuần trước . bởi UnreliableBounds
Lỗi font chữ trong tiêu đề thư trong outlook 2007 năm 2024
3 ngày trước . bởi DetectableRefrigerator
Lỗi không cài dat dirve may in sp7000 năm 2024
3 ngày trước . bởi LaxMetaphysics
Ngày 14 3 là ngày gì năm 2024
1 tuần trước . bởi UnrealConspiracy
Lỗi trùng chưng minh thư của người phụ thuộc năm 2024
2 ngày trước . bởi UnholyFrigate
Viết một đoạn văn tả cây bóng mát năm 2024
2 ngày trước . bởi DeposedAircraft
Phí chuyển đổi quỹ liên kết đơn vị là gì năm 2024
1 tuần trước . bởi High-riseCoaster

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Xây Nhà Inc.