Ứng dụng thực tế:
Mục tiêu: Cho phép tải file dung lượng lớn (>= 2GB) từ trình duyệt với khả năng ghi nối tiếp (append) dữ liệu nhận được qua nhiều lần gọi API.
Thách thức: Trình duyệt không hỗ trợ ghi nối tiếp trực tiếp vào file cục bộ. Giải pháp thay thế là sử dụng thư viện StreamSaver.js.
1. Tải và tích hợp StreamSaver.js
Tải mã nguồn từ GitHub: jimmywarting/StreamSaver.js. Khuyến nghị nên lưu file StreamSaver.js trực tiếp vào dự án vì nó phụ thuộc vào một máy chủ HTTPS đã được ủy quyền (MITM proxy).
Nếu không cấu hình máy chủ riêng, thư viện sẽ dùng máy chủ mặc định của tác giả. Với máy chủ tự ký (self-signed), cần cài đặt chứng chỉ hoặc cấu hình trình duyệt để tránh lỗi bảo mật.
2. Nhúng vào dự án Angular
2.1. Đặt file StreamSaver.js vào thư mục assets/utils-js/.
2.2. Thêm thẻ script vào index.html:
<head>
...
<script src="assets/utils-js/StreamSaver.js"></script>
</head>
2.3. Khai báo biến toàn cục trong file TypeScript:
declare const streamSaver: any;
export class FileWriter {
static initWriter(filename: string) {
if (!filename) throw new Error('Tên file không được để trống');
// Tùy chọn: chỉ định máy chủ MITM tùy chỉnh
streamSaver.mitm = 'https://your-server:port/path/mitm.html?version=2.0.0';
return streamSaver.createWriteStream(filename).getWriter();
}
}
Lưu ý: Nếu cài qua npm (
npm i streamsaver), có thể gặp lỗi type khi gánstreamSaver.mitm. Do đó, nhúng file JS trực tiếp là giải pháp ổn định hơn.
3. Thực hiện tải file
startDownload() {
const writer = FileWriter.initWriter('large-file.zip');
for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
this.http.post('/api/download', { chunk: chunkIndex })
.subscribe(chunkData => {
writer.write(new Blob([chunkData]));
});
}
writer.close(); // Hoặc writer.releaseLock() nếu cần
}
4. Cấu hình máy chủ HTTPS tùy chỉnh (Nginx)
Đảm bảo đường dẫn trong code khớp với cấu hình Nginx. Ví dụ:
server {
listen 9999 ssl;
server_name localhost;
ssl_certificate /etc/nginx/certs/server.crt;
ssl_certificate_key /etc/nginx/certs/server.key;
location ^~/stream-proxy/mitm.html {
alias /opt/streamsaver/mitm.html;
}
location ^~/stream-proxy/sw.js {
alias /opt/streamsaver/sw.js;
}
location ^~/stream-proxy/ping {
alias /opt/streamsaver/sw.js;
}
# Các route khác...
}
Sau khi copy mitm.html và sw.js vào thư mục đích, khởi động lại Nginx.
Với chứng chỉ tự ký, người dùng cần khởi động trình duyệt với tùy chọn --ignore-certificate-errors hoặc cài đặt chứng chỉ tin cậy trên hệ thống.