Hiện nay, hầu hết các ứng dụng và mini-program đều cần đến chức năng trò chuyện thời gian thực. Nếu viết hoàn toàn logic truyền thông từ đầu, khối lượng công việc sẽ lớn, mất nhiều thời gian và dễ gặp phải các vấn đề về tương thích.
Với sự trợ giúp của ZIM SDK, bạn có thể dễ dàng triển khai các tính năng chính như trò chuyện, gửi/nhận tin nhắn và quản lý cuộc hội thoại, tăng đáng kể hiệu quả phát triển. Bài viết này sẽ hướng dẫn chi tiết cách sử dụng uni-app cùng ZIM SDK để xây dựng một hệ thống trò chuyện thời gian thực có thể sử dụng ngay lập tức.
Các tình huống sử dụng điển hình
Trò chuyện 1-1: Chat riêng với bạn bè, đối thoại với dịch vụ khách hàng hoặc giao tiếp trực tiếp với người lạ. Chat nhóm: Hỗ trợ tương tác thời gian thực giữa nhiều người trong các nhóm quan tâm chung, nhóm làm việc hoặc lớp học. Dịch vụ khách hàng trực tuyến: Tích hợp chat hỗ trợ bên trong ứng dụng để người dùng có thể trao đổi nhanh chóng bằng văn bản với nhân viên chăm sóc khách hàng. Tương tác xã hội: Kết hợp với phòng chat âm thanh/định dạng video để tạo ra trải nghiệm đa phương tiện.
Yêu cầu trước khi tích hợp ZIM SDK
Trước khi sử dụng ZIM SDK, hãy đảm bảo rằng:
Bạn đã tạo dự án trên bảng điều khiển ZEGO và nhận được AppID và AppSign cần thiết để kết nối với dịch vụ ZIM SDK. Bạn đã có Token cần thiết để đăng nhập vào SDK. Chi tiết xem tại tài liệu liên quan đến quyền hạn Token.
Tích hợp ZIM SDK vào uni-app
- Tạo dự án mới (tùy chọn)
Bước này chỉ áp dụng nếu bạn đang tạo một dự án mới. Nếu tích hợp vào dự án hiện có, bỏ qua bước này.
Mở HBuilderX và chọn "Tệp > Mới > Dự án". Điền thông tin và chọn nền tảng "uni-app", sau đó nhấn "Tạo".
- Nhập SDK
2.1 Tải xuống SDK
Bạn có thể chọn một trong hai cách sau để tải SDK:
Cách 1: Tải từ trang web ZEGO
Tải phiên bản mới nhất của SDK từ trang tải xuống và giải nén tệp "zego-ZIMUniPlugin.zip". Sao chép thư mục đã giải nén vào thư mục "nativeplugins" trong gốc dự án (nếu không tồn tại, tạo thủ công).
Cách 2: Lấy từ chợ plugin uni-app
Chọn plugin ZIM SDK từ chợ plugin uni-app. Nhập plugin bằng cách nhấp vào "Mua (0 đồng)" hoặc "Tải xuống cho gói ngoại tuyến".
2.2 Cấu hình plugin gốc trong dự án uni-app
Mở file "manifest.json" của dự án. Trong phần "Cấu hình plugin gốc", chọn "Chọn plugin địa phương" hoặc "Chọn plugin đám mây". Chọn plugin "Zego ZIM SDK" và xác nhận.
2.3 Nhập lớp bọc JS
Bạn có thể chọn một trong hai cách sau:
Cách 1: Tải lớp bọc JS từ trang tải xuống và giải nén "zego-ZIMUniplugin-JS.zip". Sao chép vào thư mục "js_sdk" của dự án. Cách 2: Sử dụng chức năng nhập plugin trực tiếp trong chợ plugin uni-app.
2.4 Sử dụng plugin gốc trong dự án
import ZIM from '../js_sdk/zego-ZIMUniplugin-JS/lib/index.js';
Triển khai cơ bản gửi/nhận tin nhắn
Dưới đây là quy trình cơ bản để triển khai chức năng chat 1-1 giữa hai client A và B:
3.1 Quy trình triển khai
Tạo instance ZIM. Đăng ký các callback sự kiện. Đăng nhập vào hệ thống. Gửi và nhận tin nhắn.
3.2 Tạo instance ZIM
import { ZIM } from '@/uni_modules/zego-zim-uts';
const config = { appID: 0, appSign: '' };
ZIM.create(config);
const zim = ZIM.getInstance();
3.3 Đăng ký callback sự kiện
zim.onError((errorInfo) => {
console.log('Lỗi xảy ra:', errorInfo.code, errorInfo.message);
});
zim.onConnectionStateChanged((data) => {
console.log('Trạng thái kết nối thay đổi:', data);
});
zim.onPeerMessageReceived((data) => {
console.log('Nhận tin nhắn 1-1:', data);
});
zim.onTokenWillExpire(() => {
console.log('Token sắp hết hạn');
zim.renewToken(token)
.then((res) => {
console.log('Cập nhật token thành công');
})
.catch((err) => {
console.error('Cập nhật token thất bại', err);
});
});
3.4 Đăng nhập vào ZIM
const userID = 'xxxx';
const config = {
userName: 'xxxx',
token: '',
customStatus: '',
isOfflineLogin: false,
};
zim.login(userID, config)
.then(() => {
console.log('Đăng nhập thành công');
})
.catch((err) => {
console.error('Đăng nhập thất bại', err);
});
3.5 Gửi tin nhắn
const toUserID = 'yyyy'; // ID người nhận
const conversationType = 0; // Loại cuộc hội thoại: 1-1 = 0, Phòng = 1, Nhóm = 2
const messageTextObj = { type: 1, content: 'Chào bạn!' };
zim.sendMessage(messageTextObj, toUserID, conversationType)
.then((res) => {
console.log('Gửi tin nhắn thành công');
})
.catch((err) => {
console.error('Gửi tin nhắn thất bại', err);
});
3.6 Nhận tin nhắn
zim.onPeerMessageReceived((data) => {
console.log('Nhận tin nhắn:', data);
});
3.7 Đăng xuất khỏi hệ thống
zim.logout();
Kết luận
Việc sử dụng uni-app cùng ZIM SDK giúp bạn triển khai nhanh chóng một hệ thống trò chuyện ổn định với độ trễ thấp. Phương pháp này phù hợp cho các ứng dụng xã hội, dịch vụ khách hàng và cộng tác nhóm.