Cách xây dựng ứng dụng trò chuyện nhóm bằng Vanilla JS, Twilio và Node.js

[theanh]

Trò chuyện đang trở thành phương tiện giao tiếp ngày càng phổ biến trong cả bối cảnh kinh doanh và xã hội. Các doanh nghiệp sử dụng trò chuyện để giao tiếp nội bộ giữa khách hàng và nhân viên như với Slack, Microsoft Teams, Chanty, HubSpot Live Chat, Help Scout, v.v. Hầu hết các mạng xã hội và ứng dụng giao tiếp cũng cung cấp tùy chọn trò chuyện theo mặc định, như trên Instagram, Facebook, Reddit và Twitter. Các ứng dụng khác như Discord, Whatsapp và Telegram chủ yếu dựa trên trò chuyện, với trò chuyện nhóm là một trong những chức năng chính của chúng.

Mặc dù có nhiều sản phẩm hỗ trợ trò chuyện, bạn có thể cần một giải pháp tùy chỉnh cho trang web của mình phù hợp với nhu cầu giao tiếp cụ thể của bạn. Ví dụ: nhiều sản phẩm trong số này là ứng dụng độc lập và có thể không tích hợp được vào trang web của riêng bạn. Việc để người dùng rời khỏi trang web của bạn để trò chuyện có thể không phải là lựa chọn tốt nhất vì nó có thể ảnh hưởng đến trải nghiệm người dùng và chuyển đổi. Mặt khác, việc xây dựng ứng dụng trò chuyện từ đầu có thể là một nhiệm vụ khó khăn và đôi khi là quá sức. Tuy nhiên, bằng cách sử dụng các API như Twilio Conversations, bạn có thể đơn giản hóa quy trình tạo chúng. Các API giao tiếp này xử lý việc tạo nhóm, thêm người tham gia, gửi tin nhắn, thông báo, trong số các chức năng trò chuyện quan trọng khác. Các ứng dụng phụ trợ sử dụng các API này chỉ phải xử lý xác thực và thực hiện lệnh gọi đến các API này. Sau đó, các ứng dụng front-end sẽ hiển thị các cuộc trò chuyện, nhóm và tin nhắn từ back-end.

Trong hướng dẫn này, bạn sẽ học cách tạo ứng dụng trò chuyện nhóm bằng Twilio Conversations API. Giao diện người dùng cho ứng dụng này sẽ được xây dựng bằng HTML, CSS và Vanilla JavaScript. Nó sẽ cho phép người dùng tạo các cuộc trò chuyện nhóm, gửi lời mời, đăng nhập cũng như gửi và nhận tin nhắn. Back-end sẽ là ứng dụng Node.js. Nó sẽ cung cấp mã thông báo xác thực cho những người được mời trò chuyện và quản lý việc tạo cuộc trò chuyện.

Điều kiện tiên quyết​

Trước khi có thể bắt đầu hướng dẫn này, bạn cần cài đặt những thứ sau:

• Node.js. Bạn sẽ sử dụng nó chủ yếu cho ứng dụng phụ trợ và để cài đặt các phụ thuộc trong ứng dụng giao diện người dùng.
  Bạn có thể tải xuống bằng trình cài đặt dựng sẵn có trên trang tải xuống Node.js.
• Tài khoản Twilio.
  Bạn có thể tạo một tài khoản trên trang web Twilio tại liên kết này.
• http-server để phục vụ ứng dụng giao diện người dùng.
  Bạn có thể cài đặt nó bằng cách chạy npm i -g http-server. Bạn cũng có thể chạy nó với npx http-server để chạy một lần.
• MongoDB để lưu trữ phiên trong ứng dụng phụ trợ.
  trang cài đặt của nó có hướng dẫn chi tiết về cách chạy nó.

Ứng dụng phụ trợ​

Để gửi tin nhắn trò chuyện bằng API Twilio, bạn cần một cuộc trò chuyện. Tin nhắn trò chuyện được gửi và nhận trong một cuộc trò chuyện. Những người gửi tin nhắn được gọi là người tham gia. Người tham gia chỉ có thể gửi tin nhắn trong một cuộc trò chuyện nếu họ được thêm vào cuộc trò chuyện đó. Cả cuộc trò chuyện và người tham gia đều được tạo bằng API Twilio. Ứng dụng phụ trợ sẽ thực hiện chức năng này.

Người tham gia cần có mã thông báo truy cập để gửi tin nhắn và nhận các cuộc trò chuyện đã đăng ký của họ. Phần giao diện người dùng của dự án này sẽ sử dụng mã thông báo truy cập này. Ứng dụng phụ trợ tạo mã thông báo và gửi mã thông báo đó đến giao diện người dùng. Tại đó, mã thông báo sẽ được sử dụng để tải các cuộc trò chuyện và tin nhắn.

Project Starter​

Bạn sẽ gọi ứng dụng phụ trợ là twilio-chat-server. Có thể tìm thấy trình khởi tạo dự án được dựng sẵn trên Github. Để sao chép dự án và lấy trình khởi động, hãy chạy:

git clone https://github.com/zaracooper/twilio-chat-server.gitcd twilio-chat-servergit checkout starter

Ứng dụng phụ trợ sử dụng cấu trúc này:

.├── app.js├── config/├── controllers/├── package.json├── routes/└── utils/

Để chạy ứng dụng, bạn sẽ sử dụng lệnh node index.js.

Dependencies​

Ứng dụng phụ trợ cần 8 phần phụ thuộc. Bạn có thể cài đặt chúng bằng cách chạy:

npm i

Dưới đây là danh sách từng phần phụ thuộc:

• connect-mongo kết nối với MongoDB, nơi bạn sẽ sử dụng làm kho lưu trữ phiên;
• cors xử lý CORS;
• dotenv tải các biến môi trường từ tệp .env mà bạn sẽ tạo ở bước sau;
• express là khung web bạn sẽ sử dụng cho phần phụ trợ;
• express-session cung cấp phần mềm trung gian để xử lý dữ liệu phiên;
• http-errors giúp tạo lỗi máy chủ;
• morgan xử lý logging;
• twilio tạo ứng dụng khách Twilio, tạo mã thông báo, tạo cuộc hội thoại và thêm người tham gia.

Cấu hình​

Thư mục config chịu trách nhiệm tải cấu hình từ các biến môi trường. Cấu hình được nhóm thành ba loại: cấu hình cho CORS, Twilio và DB phiên MongoDB. Khi môi trường là development, bạn sẽ tải config từ tệp .env bằng cách sử dụng dotenv.

Bắt đầu bằng cách tạo tệp .env trên thiết bị đầu cuối. Tệp này đã được thêm vào tệp .gitignore để ngăn các giá trị nhạy cảm mà nó chứa được kiểm tra vào kho lưu trữ.

touch .env

Dưới đây là giao diện của .env của bạn:

# Cấu hình DB phiênSESSION_DB_HOST=XXXXSESSION_DB_USER=XXXXSESSION_DB_PASS=XXXXSESSION_DB_PORT=XXXXSESSION_DB_NAME=XXXXSESSION_DB_SECRET=XXXX# Cấu hình TwilioTWILIO_ACCOUNT_SID=XXXXTWILIO_AUTH_TOKEN=XXXXTWILIO_API_KEY=XXXXTWILIO_API_SECRET=XXXX# Máy khách CORS Cấu hìnhCORS_CLIENT_DOMAIN=XXXX

Bạn có thể tìm hiểu cách tạo người dùng cho DB phiên của bạn từ mục nhập hướng dẫn MongoDB này. Sau khi bạn tạo cơ sở dữ liệu phiên và người dùng có thể ghi vào đó, bạn có thể điền các giá trị SESSION_DB_USER, SESSION_DB_PASS và SESSION_DB_NAME. Nếu bạn đang chạy phiên bản cục bộ của MongoDB, SESSION_DB_HOST sẽ là localhost và SESSION_DB_PORT thường là 27017. SESSION_DB_SECRET được express-session sử dụng để ký cookie ID phiên và có thể là bất kỳ chuỗi bí mật nào bạn đặt.

Trong bước tiếp theo, bạn sẽ nhận được thông tin xác thực từ Bảng điều khiển Twilio. Thông tin xác thực phải được gán cho các biến có tiền tố TWILIO_. Trong quá trình phát triển cục bộ, máy khách giao diện người dùng sẽ chạy trên http://localhost:3000. Vì vậy, bạn có thể sử dụng giá trị này cho biến môi trường CORS_CLIENT_DOMAIN.

Thêm mã sau vào config/index.js để tải các biến môi trường.

import dotenv from 'dotenv';if (process.env.NODE_ENV == 'development') { dotenv.config();}const corsClient = { domain: process.env.CORS_CLIENT_DOMAIN};const sessionDB = { máy chủ: process.env.SESSION_DB_HOST, người dùng: process.env.SESSION_DB_USER, mật khẩu: process.env.SESSION_DB_PASS, cổng: process.env.SESSION_DB_PORT, tên: process.env.SESSION_DB_NAME, bí mật: process.env.SESSION_DB_SECRET};const twilioConfig = { accountSid: process.env.TWILIO_ACCOUNT_SID, authToken: process.env.TWILIO_AUTH_TOKEN, apiKey: process.env.TWILIO_API_KEY, apiSecret: process.env.TWILIO_API_SECRET};const port = process.env.PORT || '8000';export { corsClient, port, sessionDB, twilioConfig };

Các biến môi trường được nhóm thành các danh mục dựa trên chức năng của chúng. Mỗi danh mục cấu hình có biến đối tượng riêng và tất cả đều được xuất để sử dụng trong các phần khác của ứng dụng.

Lấy thông tin xác thực Twilio từ bảng điều khiển​

Để xây dựng dự án này, bạn sẽ cần bốn thông tin xác thực Twilio khác nhau: SID tài khoản, Mã thông báo xác thực, Khóa API và Bí mật API. Trong bảng điều khiển, trên trang Cài đặt chung, hãy cuộn xuống phần Thông tin xác thực API. Đây là nơi bạn sẽ tìm thấy SID tài khoản và Mã thông báo xác thực của mình.



Để lấy Khóa API và Bí mật, hãy truy cập trang Khóa API. Bạn có thể xem trong ảnh chụp màn hình bên dưới. Nhấp vào nút + để đi đến trang Khóa API mới.



Trên trang này, hãy thêm tên khóa và để KEY TYPE là Standard, sau đó nhấp vào Create API Key. Sao chép khóa API và bí mật. Bạn sẽ thêm tất cả các thông tin xác thực này vào tệp .env như bạn sẽ thấy trong các bước tiếp theo.

Tiện ích​

Ứng dụng phụ trợ cần có hai hàm tiện ích. Một hàm sẽ tạo một mã thông báo, hàm còn lại sẽ đóng gói các bộ điều khiển bất đồng bộ và xử lý lỗi cho chúng.

Trong utils/token.js, hãy thêm mã sau để tạo một hàm có tên là createToken sẽ tạo các mã thông báo truy cập Twilio:

import { twilioConfig } from '../config/index.js';import twilio from 'twilio';function createToken(username, serviceSid) { const AccessToken = twilio.jwt.AccessToken; const ChatGrant = AccessToken.ChatGrant; const token = new AccessToken( twilioConfig.accountSid, twilioConfig.apiKey, twilioConfig.apiSecret, { identity: username } ); const chatGrant = new ChatGrant({ serviceSid: serviceSid, }); token.addGrant(chatGrant); return token.toJwt();}

Trong hàm này, bạn tạo mã thông báo truy cập bằng cách sử dụng SID tài khoản, khóa API và bí mật API của bạn. Bạn có thể tùy chọn cung cấp một danh tính duy nhất có thể là tên người dùng, email, v.v. Sau khi tạo mã thông báo, bạn phải thêm quyền trò chuyện vào đó. Quyền trò chuyện có thể lấy ID dịch vụ trò chuyện cùng với các giá trị tùy chọn khác. Cuối cùng, bạn sẽ chuyển đổi mã thông báo thành JWT và trả về mã thông báo đó.

Tệp utils/controller.js chứa hàm asyncWrapper đóng gói các hàm điều khiển bất đồng bộ và bắt mọi lỗi mà chúng phát ra. Dán mã sau vào tệp này:

function asyncWrapper(controller) { return (req, res, next) => Promise.resolve(controller(req, res, next)).catch(next);}export { asyncWrapper, createToken };

Bộ điều khiển​

Ứng dụng phụ trợ có bốn bộ điều khiển: hai bộ điều khiển để xác thực và hai bộ điều khiển để xử lý các cuộc hội thoại. Bộ điều khiển xác thực đầu tiên tạo một mã thông báo và bộ điều khiển thứ hai xóa mã thông báo đó. Một trong các bộ điều khiển cuộc hội thoại tạo cuộc hội thoại mới, trong khi bộ điều khiển còn lại thêm người tham gia vào các cuộc hội thoại hiện có.

Bộ điều khiển cuộc hội thoại​

Trong tệp controllers/conversations.js, hãy thêm các mục nhập và mã sau cho bộ điều khiển StartConversation:

import { twilioConfig } from '../config/index.js';import { createToken } from '../utils/token.js';import twilio from 'twilio';async function StartConversation(req, res, next) { const client = twilio(twilioConfig.accountSid, twilioConfig.authToken); const { conversationTitle, username } = req.body; try { if (conversationTitle && username) { const conversation = await client.conversations.conversations .create({ friendlyName: conversationTitle }); req.session.token = createToken(username, conversation.chatServiceSid); req.session.username = username; const attendence = await client.conversations.conversations(conversation.sid) .participants.create({ identity: username }) res.send({ conversation, attendence }); } else { next({ message: 'Thiếu tiêu đề cuộc trò chuyện hoặc tên người dùng' }); } } catch (error) { next({ error, message: 'Đã xảy ra sự cố khi tạo cuộc trò chuyện của bạn' }); }}

Bộ điều khiển StartConversation trước tiên tạo một client Twilio bằng twilioConfig.accountSid và twilioConfig.authToken mà bạn lấy từ config/index.js.

Tiếp theo, nó tạo một cuộc trò chuyện. Nó cần một tiêu đề cuộc trò chuyện cho việc này, tiêu đề này lấy từ nội dung yêu cầu. Người dùng phải được thêm vào cuộc trò chuyện trước khi họ có thể tham gia vào cuộc trò chuyện đó. Người tham gia không thể gửi tin nhắn nếu không có mã thông báo truy cập. Vì vậy, nó tạo ra một mã thông báo truy cập bằng cách sử dụng tên người dùng được cung cấp trong phần thân yêu cầu và conversation.chatServiceSid. Sau đó, người dùng được xác định bằng tên người dùng sẽ được thêm vào cuộc trò chuyện. Bộ điều khiển hoàn tất bằng cách phản hồi với cuộc trò chuyện và người tham gia mới được tạo.

Tiếp theo, bạn cần tạo bộ điều khiển AddParticipant. Để thực hiện việc này, hãy thêm mã sau vào bên dưới mã bạn vừa thêm vào tệp controllers/conversations.js ở trên:

async function AddParticipant(req, res, next) { const client = twilio(twilioConfig.accountSid, twilioConfig.authToken); const { username } = req.body; const conversationSid = req.params.id; try { const conversation = await client.conversations.conversations .get(conversationSid).fetch(); if (username && conversationSid) { req.session.token = createToken(username, conversation.chatServiceSid); req.session.username = username; const attend = await client.conversations.conversations(conversationSid) .participants.create({ identity: username }) res.send({ conversation, attend }); } else { next({ message: 'Thiếu username hoặc sid cuộc hội thoại' }); } } catch (error) { next({ error, message: 'Đã xảy ra sự cố khi thêm người tham gia' }); }}export { AddParticipant, StartConversation };

Bộ điều khiển AddParticipant thêm người tham gia mới vào các cuộc hội thoại đã tồn tại. Sử dụng conversationSid được cung cấp dưới dạng tham số tuyến đường, nó sẽ truy xuất cuộc hội thoại. Sau đó, nó tạo một mã thông báo cho người dùng và thêm họ vào cuộc hội thoại bằng tên người dùng của họ từ nội dung yêu cầu. Cuối cùng, nó gửi cuộc trò chuyện và người tham gia dưới dạng phản hồi.

Bộ điều khiển xác thực​

Hai bộ điều khiển trong controllers/auth.js được gọi là GetToken và DeleteToken. Thêm chúng vào tệp bằng cách sao chép và dán mã này:

function GetToken(req, res, next) { if (req.session.token) { res.send({ token: req.session.token, username: req.session.username }); } else { next({ status: 404, message: 'Token not set' }); }}function DeleteToken(req, res, _next) { delete req.session.token; delete req.session.username; res.send({ message: 'Session ruined' });}export { DeleteToken, GetToken };

Bộ điều khiển GetToken truy xuất mã thông báo và tên người dùng từ phiên nếu chúng tồn tại và trả về chúng dưới dạng phản hồi. DeleteToken xóa phiên.

Routes​

Thư mục routes có ba tệp: index.js, conversations.js và auth.js.

Thêm các tuyến xác thực này vào tệp routes/auth.js bằng cách thêm mã này:

import { Router } from 'express';import { DeleteToken, GetToken } from '../controllers/auth.js';var router = Router();router.get('/', GetToken);router.delete('/', DeleteToken);export default router;

Tuyến GET tại đường dẫn / trả về một mã thông báo trong khi tuyến DELETE xóa một mã thông báo.

Tiếp theo, sao chép và dán mã sau vào tệp routes/conversations.js:

import { Router } from 'express';import { AddParticipant, StartConversation } from '../controllers/conversations.js';import { asyncWrapper } from '../utils/controller.js';var router = Router();router.post('/', asyncWrapper(StartConversation));router.post('/:id/participants', asyncWrapper(AddParticipant));export default router;

Trong tệp này, bộ định tuyến cuộc hội thoại được tạo. Một tuyến POST để tạo các cuộc hội thoại với đường dẫn / và một tuyến POST khác để thêm người tham gia với đường dẫn /:id/participants được thêm vào bộ định tuyến.

Cuối cùng, thêm mã sau vào tệp routes/index.js mới của bạn.

import { Router } from 'express';import authRouter from './auth.js';import conversationRouter from './conversations.js';var router = Router();router.use('/auth/token', authRouter);router.use('/api/conversations', conversationRouter);export default router;

Bằng cách thêm các bộ định tuyến conversation và auth tại đây, bạn sẽ làm cho chúng khả dụng tại /api/conversations và /auth/token cho bộ định tuyến chính tương ứng. Sau đó, bộ định tuyến được xuất.

Ứng dụng Backend​

Bây giờ là lúc ghép các phần backend lại với nhau. Mở tệp index.js trong trình soạn thảo văn bản của bạn và dán mã sau vào:

import cors from 'cors';import createError from 'http-errors';import express, { json, urlencoded } from 'express';import logger from 'morgan';import session from 'express-session';import store from 'connect-mongo';import { corsClient, port, sessionDB } từ './config/index.js';import router từ './routes/index.js';var app = express();app.use(logger('dev'));app.use(json());app.use(urlencoded({ extended: false }));app.use(cors({ origin: corsClient.domain, credentials: true, methods: ['GET', 'POST', 'DELETE'], maxAge: 3600 * 1000, allowedHeaders: ['Content-Type', 'Range'], exposedHeaders: ['Accept-Ranges', 'Content-Encoding', 'Content-Length', 'Content-Range']}));app.options('*', cors());app.use(session({ store: store.create({ mongoUrl: `mongodb://${sessionDB.user}:${sessionDB.pass}@${sessionDB.host}:${sessionDB.port}/${sessionDB.name}`, mongoOptions: { useUnifiedTopology: true }, collectionName: 'sessions' }), secret: sessionDB.secret, cookie: { maxAge: 3600 * 1000, sameSite: 'strict' }, name: 'twilio.sid', resave: false, saveUninitialized: true}));app.use('/', router);app.use(function (_req, _res, next) { next(createError(404, 'Tuyến đường không tồn tại.'));});app.use(function (err, _req, res, _next) { res.status(err.status || 500).send(err);});app.listen(port);

Tệp này bắt đầu bằng cách tạo ứng dụng express. Sau đó, nó thiết lập phân tích cú pháp tải trọng được mã hóa JSON và URL và thêm phần mềm trung gian ghi nhật ký. Tiếp theo, nó thiết lập CORS và xử lý phiên. Như đã đề cập trước đó, MongoDB được sử dụng làm kho lưu trữ phiên.

Sau khi tất cả được thiết lập, nó sẽ thêm bộ định tuyến được tạo ở bước trước đó trước khi định cấu hình xử lý lỗi. Cuối cùng, nó khiến ứng dụng lắng nghe và chấp nhận các kết nối tại cổng được chỉ định trong tệp .env. Nếu bạn chưa thiết lập cổng, ứng dụng sẽ lắng nghe trên cổng 8000.

Sau khi hoàn tất việc tạo ứng dụng phụ trợ, hãy đảm bảo MongoDB đang chạy và khởi động ứng dụng bằng cách chạy lệnh này trên thiết bị đầu cuối:

NODE_ENV=development npm start

Bạn truyền biến NODE_ENV=development để cấu hình được tải từ tệp .env cục bộ.

Giao diện​

Phần giao diện của dự án này có một số chức năng. Nó cho phép người dùng tạo các cuộc hội thoại, xem danh sách các cuộc hội thoại mà họ tham gia, mời người khác tham gia các cuộc hội thoại mà họ đã tạo và gửi tin nhắn trong các cuộc hội thoại. Các vai trò này được thực hiện thông qua bốn trang:

• một trang cuộc hội thoại,
• một trang trò chuyện,
• một trang lỗi,
• một trang đăng nhập.

Bạn sẽ gọi ứng dụng front-end là twilio-chat-app. Có một trình khởi tạo được dựng sẵn cho ứng dụng này trên Github. Để sao chép dự án và lấy trình khởi tạo, hãy chạy:

git clone https://github.com/zaracooper/twilio-vanilla-js-chat-app.gitcd twilio-vanilla-js-chat-appgit checkout starter

Ứng dụng có cấu trúc sau:

.├── index.html├── pages│ ├── chat.html│ ├── conversation.html│ ├── error.html│ └── login.html├── scripts│ ├── chat.js│ ├── conversation.js│ └── login.js└── styles ├── chat.css ├── main.css └── simple-page.css

Kiểu dáng và đánh dấu HTML đã được thêm vào cho từng trang trong trang khởi động. Phần này chỉ đề cập đến các tập lệnh bạn phải thêm.

Phụ thuộc​

Ứng dụng có hai phụ thuộc: axios và @twilio/conversations. Bạn sẽ sử dụng axios để gửi yêu cầu đến ứng dụng phụ trợ và @twilio/conversations để gửi và lấy tin nhắn và cuộc hội thoại trong các tập lệnh. Bạn có thể cài đặt chúng trên thiết bị đầu cuối bằng cách chạy:

npm i

Trang chỉ mục​

Trang này đóng vai trò là trang đích cho ứng dụng. Bạn có thể tìm thấy mã đánh dấu cho trang này (index.html) tại đây. Mã này sử dụng hai bảng định kiểu CSS: styles/main.css mà tất cả các trang đều sử dụng và styles/simple-page.css mà các trang nhỏ hơn, ít phức tạp hơn sử dụng.

Bạn có thể tìm thấy nội dung của các bảng định kiểu này được liên kết trong đoạn trước. Sau đây là ảnh chụp màn hình về giao diện của trang này:

Trang lỗi​

Trang này được hiển thị khi xảy ra lỗi. Nội dung của pages/error.html có thể được tìm thấy tại đây. Nếu xảy ra lỗi, người dùng có thể nhấp vào nút để chuyển đến trang chủ. Ở đó, họ có thể thử lại những gì họ đã cố gắng làm.

Trang hội thoại​

Trên trang này, người dùng cung cấp tiêu đề của cuộc hội thoại cần tạo và tên người dùng của họ vào biểu mẫu.

Nội dung của pages/conversation.html có thể được tìm thấy tại đây. Thêm mã sau vào tệp scripts/conversation.js:

window.twilioChat = window.twilioChat || {};function createConversation() { let convoForm = document.getElementById('convoForm'); let formData = new FormData(convoForm); let body = Object.fromEntries(formData.entries()) || {}; let submitBtn = document.getElementById('submitConvo'); submitBtn.innerText = "Đang tạo..." submitBtn.disabled = true; submitBtn.style.cursor = 'wait'; axios.request({ url: '/api/conversations', baseURL: 'http://localhost:8000', method: 'post', withCredentials: true, data: body }) .then(() => { window.twilioChat.username = body.username; location.href = '/pages/chat.html'; }) .catch(() => { location.href = '/pages/error.html'; });}

Khi người dùng nhấp vào nút Gửi, hàm createConversation sẽ được gọi. Trong đó, nội dung của biểu mẫu được thu thập và sử dụng trong phần thân của yêu cầu POST được gửi đến http://localhost:8000/api/conversations/ ở phần phụ trợ.

Bạn sẽ sử dụng axios để thực hiện yêu cầu. Nếu yêu cầu thành công, một cuộc hội thoại sẽ được tạo và người dùng sẽ được thêm vào cuộc hội thoại đó. Sau đó, người dùng sẽ được chuyển hướng đến trang trò chuyện, tại đó họ có thể gửi tin nhắn trong cuộc trò chuyện.

Dưới đây là ảnh chụp màn hình trang trò chuyện:

Trang trò chuyện​

Trên trang này, người dùng sẽ xem danh sách các cuộc trò chuyện mà họ tham gia và gửi tin nhắn cho họ. Bạn có thể tìm thấy đánh dấu cho pages/chat.html tại đây và kiểu cho styles/chat.css tại đây.

Tệp scripts/chat.js bắt đầu bằng cách định nghĩa không gian tên twilioDemo.

window.twilioChat = window.twilioChat || {};

Thêm hàm initClient bên dưới. Nó chịu trách nhiệm khởi tạo máy khách Twilio và tải các cuộc hội thoại.

async function initClient() { try { const response = await axios.request({ url: '/auth/token', baseURL: 'http://localhost:8000', method: 'GETget', withCredentials: true }); window.twilioChat.username = response.data.username; window.twilioChat.client = await Twilio.Conversations.Client.create(response.data.token); let conversations = await window.twilioChat.client.getSubscribedConversations(); let conversationCont, conversationName; const sideNav = document.getElementById('side-nav'); sideNav.removeChild(document.getElementById('loading-msg')); for (let conv of conversations.items) { conversationCont = document.createElement('button'); conversationCont.classList.add('conversation'); conversationCont.id = conv.sid; conversationCont.value = conv.sid; conversationCont.onclick = async () => { await setConversation(conv.sid, conv.channelState.friendlyName); }; conversationName = document.createElement('h3'); conversationName.innerText = `💬 ${conv.channelState.friendlyName}`; conversationCont.appendChild(conversationName); sideNav.appendChild(conversationCont); } } catch { location.href = '/pages/error.html'; }};

Khi trang tải, initClient sẽ lấy mã thông báo truy cập của người dùng từ phần phụ trợ, sau đó sử dụng mã thông báo đó để khởi tạo máy khách. Sau khi khởi tạo máy khách, nó được sử dụng để lấy tất cả các cuộc hội thoại mà người dùng đã đăng ký. Sau đó, các cuộc hội thoại được tải lên side-nav. Trong trường hợp xảy ra bất kỳ lỗi nào, người dùng sẽ được chuyển đến trang lỗi.

Hàm setConversion tải một cuộc hội thoại duy nhất. Sao chép và dán mã bên dưới vào tệp để thêm nó:

async function setConversation(sid, name) { try { window.twilioChat.selectedConvSid = sid; document.getElementById('chat-title').innerText = '+ ' + name; document.getElementById('loading-chat').style.display = 'flex'; document.getElementById('messages').style.display = 'none'; hãy để submitButton = document.getElementById('submitMessage') submitButton.disabled = true; hãy để InviteButton = document.getElementById('invite-button') InviteButton.disabled = true; window.twilioChat.selectedConversation = await window.twilioChat.client.getConversationBySid(window.twilioChat.selectedConvSid); const messages = await window.twilioChat.selectedConversation.getMessages(); addMessagesToChatArea(messages.items, true); window.twilioChat.selectedConversation.on('messageAdded', msg => addMessagesToChatArea([msg], false)); submitButton.disabled = false; InviteButton.disabled = false; } catch { showError('đang tải cuộc hội thoại bạn đã chọn'); }};

Khi người dùng nhấp vào một cuộc trò chuyện cụ thể, setConversation được gọi. Hàm này nhận SID và tên của cuộc trò chuyện và sử dụng SID để lấy cuộc trò chuyện và tin nhắn của cuộc trò chuyện đó. Sau đó, các tin nhắn được thêm vào khu vực trò chuyện. Cuối cùng, một trình lắng nghe được thêm vào để theo dõi các tin nhắn mới được thêm vào cuộc trò chuyện. Các tin nhắn mới này được thêm vào khu vực trò chuyện khi chúng được nhận. Trong trường hợp xảy ra bất kỳ lỗi nào, thông báo lỗi sẽ được hiển thị.

Đây là ảnh chụp màn hình trang trò chuyện:



Tiếp theo, bạn sẽ thêm hàm addMessagedToChatArea để tải tin nhắn trò chuyện.

function addMessagesToChatArea(messages, clearMessages) { let cont, msgCont, msgAuthor, timestamp; const chatArea = document.getElementById('messages'); if (clearMessages) { document.getElementById('loading-chat').style.display = 'none'; chatArea.style.display = 'flex'; chatArea.replaceChildren(); } for (const msg of messages) { cont = document.createElement('div'); if (msg.state.author == window.twilioChat.username) { cont.classList.add('right-message'); } else { cont.classList.add('left-message'); } msgCont = document.createElement('div'); msgCont.classList.add('message'); msgAuthor = document.createElement('p'); msgAuthor.classList.add('username'); msgAuthor.innerText = msg.state.author; timestamp = document.createElement('p'); timestamp.classList.add('timestamp'); timestamp.innerText = msg.state.timestamp; msgCont.appendChild(msgAuthor); msgCont.innerText += msg.state.body; cont.appendChild(msgCont); cont.appendChild(timestamp); chatArea.appendChild(cont); } chatArea.scrollTop = chatArea.scrollHeight;}

Hàm addMessagesToChatArea thêm tin nhắn của cuộc trò chuyện hiện tại vào vùng trò chuyện khi nó được chọn từ thanh điều hướng bên. Hàm này cũng được gọi khi có tin nhắn mới được thêm vào cuộc trò chuyện hiện tại. Thông thường, tin nhắn tải sẽ được hiển thị khi tin nhắn đang được tải xuống. Trước khi tin nhắn hội thoại được thêm vào, tin nhắn tải này sẽ bị xóa. Tin nhắn từ người dùng hiện tại được căn chỉnh sang phải, trong khi tất cả các tin nhắn khác từ những người tham gia nhóm được căn chỉnh sang trái.

Đây là giao diện của tin nhắn tải:



Thêm hàm sendMessage để gửi tin nhắn:

function sendMessage() { let submitBtn = document.getElementById('submitMessage'); submitBtn.disabled = true; let messageForm = document.getElementById('message-input'); let messageData = new FormData(messageForm); const msg = messageData.get('chat-message'); window.twilioChat.selectedConversation.sendMessage(msg) .then(() => { document.getElementById('chat-message').value = ''; submitBtn.disabled = false; }) .catch(() => { showError('đang gửi tin nhắn của bạn'); submitBtn.disabled = false; });};

Khi người dùng gửi tin nhắn, hàm sendMessage được gọi. Hàm này lấy văn bản tin nhắn từ vùng văn bản và vô hiệu hóa nút gửi. Sau đó, sử dụng cuộc trò chuyện hiện đang được chọn, tin nhắn được gửi bằng phương thức sendMessage của nó. Nếu thành công, vùng văn bản sẽ được xóa và nút submit sẽ được bật lại. Nếu không thành công, một thông báo lỗi sẽ được hiển thị thay thế.

Phương thức showError sẽ hiển thị thông báo lỗi khi được gọi; hideError sẽ ẩn thông báo lỗi đó.

function showError(msg) { document.getElementById('error-message').style.display = 'flex'; document.getElementById('error-text').innerText = `Đã xảy ra sự cố ${msg ? msg : 'đang thực hiện yêu cầu của bạn'}.`;}function hideError() { document.getElementById('error-message').style.display = 'none';}

Thông báo lỗi này sẽ trông như thế này:



Hàm logout sẽ đăng xuất người dùng hiện tại. Hàm này thực hiện việc này bằng cách gửi yêu cầu đến phần phụ trợ để xóa phiên của họ. Sau đó, người dùng được chuyển hướng đến trang trò chuyện để họ có thể tạo một cuộc trò chuyện mới nếu muốn.

function logout(logoutButton) { logoutButton.disabled = true; logoutButton.style.cursor = 'wait'; axios.request({ url: '/auth/token', baseURL: 'http://localhost:8000', method: 'DELETEdelete', withCredentials: true }) .then(() => { location.href = '/pages/conversation.html'; }) .catch(() => { location.href = '/pages/error.html'; });}

Thêm hàm inviteFriend để gửi lời mời trò chuyện:

async function InviteFriend() { try { const link = `http://localhost:3000/pages/login.html?sid=${window.twilioChat.selectedConvSid}`; await navigator.clipboard.writeText(link); alert(`Liên kết bên dưới đã được sao chép vào bảng tạm của bạn.\n\n${link}\n\nBạn có thể mời bạn bè trò chuyện bằng cách gửi cho họ.`); } catch { showError('đang chuẩn bị lời mời trò chuyện'); }}

Để mời những người khác tham gia cuộc trò chuyện, người dùng hiện tại có thể gửi cho người khác một liên kết. Liên kết này dẫn đến trang đăng nhập và chứa SID cuộc trò chuyện hiện tại dưới dạng tham số truy vấn. Khi họ nhấp vào nút mời, liên kết sẽ được thêm vào bảng tạm của họ. Sau đó, một cảnh báo sẽ hiển thị với hướng dẫn mời.

Đây là ảnh chụp màn hình cảnh báo mời:

Trang đăng nhập​

Trên trang này, người dùng sẽ đăng nhập khi họ được mời tham gia cuộc trò chuyện. Bạn có thể tìm thấy mã đánh dấu cho pages/login.html tại liên kết này.

Trong scripts/login.js, hàm login chịu trách nhiệm đăng nhập những người được mời tham gia cuộc trò chuyện. Sao chép mã của hàm bên dưới và thêm vào tệp đã đề cập ở trên:

function login() { const convParams = new URLSearchParams(window.location.search); const conv = Object.fromEntries(convParams.entries()); if (conv.sid) { let submitBtn = document.getElementById('login-button'); submitBtn.innerText = 'Đang đăng nhập...'; submitBtn.disabled = true; submitBtn.style.cursor = 'wait'; let loginForm = document.getElementById('loginForm'); let formData = new FormData(loginForm); let body = Object.fromEntries(formData.entries()); axios.request({ url: `/api/conversations/${conv.sid}/participants`, baseURL: 'http://localhost:8000', method: 'POSTpost', withCredentials: true, data: body }) .then(() => { location.href = '/pages/chat.html'; }) .catch(() => { location.href = '/pages/error.html'; }); } else { location.href = '/pages/conversation.html'; }}

Hàm login lấy tham số truy vấn sid của cuộc trò chuyện từ URL và tên người dùng từ biểu mẫu. Sau đó, nó thực hiện yêu cầu POST đến api/conversations/{sid}/participants/ trên ứng dụng phụ trợ. Ứng dụng phụ trợ thêm người dùng vào cuộc trò chuyện và tạo mã thông báo truy cập để nhắn tin. Nếu thành công, một phiên sẽ được bắt đầu trong phần phụ trợ cho người dùng.

Sau đó, người dùng được chuyển hướng đến trang trò chuyện, nhưng nếu yêu cầu trả về lỗi, họ sẽ được chuyển hướng đến trang lỗi. Nếu không có tham số truy vấn sid của cuộc trò chuyện trong URL, người dùng sẽ được chuyển hướng đến trang cuộc trò chuyện.

Dưới đây là ảnh chụp màn hình của trang đăng nhập:

Chạy ứng dụng​

Trước khi bạn có thể khởi động ứng dụng giao diện người dùng, hãy đảm bảo rằng ứng dụng giao diện người dùng đang chạy. Như đã đề cập trước đó, bạn có thể khởi động ứng dụng phụ trợ bằng lệnh này trên thiết bị đầu cuối:

NODE_ENV=development npm start

Để phục vụ ứng dụng giao diện người dùng, hãy chạy lệnh này trong một cửa sổ thiết bị đầu cuối khác:

http-server -p 3000

Lệnh này sẽ phục vụ ứng dụng tại http://localhost:3000. Sau khi chạy, hãy truy cập http://localhost:3000/pages/conversation.html; đặt tên cho cuộc trò chuyện của bạn và thêm tên người dùng, sau đó tạo tên. Khi bạn đến trang trò chuyện, hãy nhấp vào cuộc trò chuyện, sau đó nhấp vào nút Mời.

Trong một cửa sổ ẩn danh riêng biệt, hãy dán liên kết mời và đặt tên người dùng khác. Khi bạn vào trang trò chuyện trong cửa sổ ẩn danh, bạn có thể bắt đầu trò chuyện với chính mình. Bạn có thể gửi tin nhắn qua lại giữa người dùng trong cửa sổ đầu tiên và người dùng thứ hai trong cửa sổ ẩn danh trong cùng một cuộc trò chuyện.

[*] Video demo về ứng dụng.

Kết luận​

Trong hướng dẫn này, bạn đã học cách tạo ứng dụng trò chuyện bằng Twilio Conversations và Vanilla JS. Bạn đã tạo ứng dụng Node.js tạo mã thông báo truy cập của người dùng, duy trì phiên cho họ, tạo cuộc trò chuyện và thêm người dùng vào đó làm người tham gia. Bạn cũng đã tạo ứng dụng giao diện người dùng bằng HTML, CSS và Vanilla JS. Ứng dụng này sẽ cho phép người dùng tạo cuộc trò chuyện, gửi tin nhắn và mời người khác trò chuyện. Ứng dụng sẽ lấy mã thông báo truy cập từ ứng dụng phụ trợ và sử dụng chúng để thực hiện các chức năng này. Tôi hy vọng hướng dẫn này giúp bạn hiểu rõ hơn về cách thức hoạt động của Twilio Conversations và cách sử dụng nó để nhắn tin trò chuyện.

Để tìm hiểu thêm về Twilio Conversations và những gì bạn có thể làm với nó, hãy xem tài liệu liên kết tại đây.

Đọc thêm​

• Tạo phân tích tình cảm âm thanh thời gian thực bằng AI
• Cách xây dựng trình thu thập dữ liệu sản phẩm của Amazon bằng Node.js
• Cách an toàn nhất để ẩn khóa API của bạn khi sử dụng React
• Chuyển đổi văn bản thuần túy sang HTML được mã hóa bằng JavaScript thuần túy