Tin Tức

Tổng hợp các bài viết, kinh nghiệm, chia sẻ kiến thức hữu ích về việc làm onsite, nhân sự onsite.

Chạy Máy Ảo trong Trình Duyệt của Bạn

Chúng ta sẽ chạy một máy ảo hoàn chỉnh ngay trong trình duyệt của bạn! Và không chỉ dừng lại ở việc chạy máy ảo - chúng ta sẽ khởi động cả FreeDOS và Alpine Linux. "Khoan đã, cái gì? Chúng ta đã có VirtualBox, VMware, và DOSBox cho việc đó rồi mà!" Ừ thì, ai cần VirtualBox khi bạn đã có trình duyệt web? (Đùa thôi! 😄)
image-hatonet

Nhưng nghiêm túc mà nói, hãy cùng vui vẻ khám phá xem các trình duyệt hiện đại đã mạnh mẽ đến mức nào, đặc biệt là khi chúng hỗ trợ WebAssembly (Wasm). Chắc chắn phần mềm máy ảo truyền thống rất tuyệt, nhưng có thể chạy một hệ điều hành hoàn chỉnh trong trình duyệt của bạn? Điều đó thực sự thú vị! 🚀

Trong hướng dẫn này, chúng ta sẽ sử dụng React.js, nhưng mình sẽ giữ mọi thứ chung chung để bạn có thể điều chỉnh cho HTML thuần túy hoặc bất kỳ framework nào bạn thích.

Những gì bạn cần

  • Kiến thức cơ bản về HTML, Javascript, và CSS
  • Trình duyệt web có hỗ trợ WebAssembly. Đừng lo, trình duyệt bạn đang dùng hiện tại có lẽ sẽ hoạt động tốt 😊
  • Node.js đã được cài đặt. Bạn có thể tải bản sao từ đây và làm theo các bước cài đặt.

Được rồi, bắt đầu xây dựng nào!

Thiết lập Ứng dụng Web của chúng ta Nếu bạn đã là một chuyên gia về React, hãy thoải mái bỏ qua phần thiết lập và chuyển thẳng sang phần Components!

Đầu tiên, hãy tạo ứng dụng của chúng ta bằng Vite (nó siêu nhanh và hiện đại):

npm create vite@latest

Khi được hỏi:

  • Chọn tên dự án (mình sẽ chọn "browser-vm")
  • Chọn React làm framework.
  • Chọn Javascript làm biến thể. (Giữ cho nó chung chung như đã hứa 😄)

Sau đó chạy lệnh:

cd browser-vm
npm install

Components

Bây giờ, chúng ta hãy thiết lập màn hình hiển thị máy ảo. Mở tệp App.jsx và thay thế toàn bộ nội dung bằng đoạn mã sau:

function App(){
  return (
    <div id="screen_container">
      <div id="screen" style={{overflow: 'hidden'}}>Initializing Emulator…</div>
      <canvas style={{display: 'none'}}></canvas>
    </div>
  );
}

export default App;

Mở tệp index.css và thay thế nội dung bằng đoạn mã sau:

#screen_container {
  white-space: pre;
  font-family: Courier, monospace;
  font-size: 14px;
  line-height: 14px;
  background-color: #000;
  color: #fff;
}

2. Chuẩn bị Máy Ảo của Chúng ta

Chúng ta sẽ sử dụng một dự án thú vị có tên là V86, giúp biến trình duyệt của bạn thành một trình giả lập máy tính hoàn chỉnh. Nó sử dụng WebAssembly để dịch các lệnh máy tính ngay lập tức — khá tuyệt đúng không? Bạn có thể tìm hiểu thêm về nó tại đây.

Tải các tệp sau từ phần phát hành trên GitHub của V86:

  • libv86.js
  • v86.wasm

Tiếp theo, tải các tệp BIOS sau từ thư mục bios của kho V86:

  • seabios.bin
  • vgabios.bin

Đặt chúng vào dự án của bạn như sau:

public/
├── v86.wasm
├── libv86.js
└── bios/
    ├── seabios.bin
    └── vgabios.bin

 

 

3. Đến Lúc Làm Cho Nó Hoạt Động!

Cập nhật tệp index.html để bao gồm công cụ máy ảo của chúng ta bằng cách thêm <script src="libv86.js"></script>:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FreeDOS 1.2</title>
</head>
<body>
  <div id="root"></div>
  <script src="libv86.js"></script>
  <script type="module" src="/src/main.jsx"></script>
</body>
</html>

Bây giờ đến phần thú vị — chúng ta hãy cấu hình máy ảo của mình! Cập nhật nội dung của `App.jsx` thành:

import { useEffect } from 'react';
function App() {

useEffect(function initializeEmulator(){
 // See https://github.com/copy/v86/blob/master/src/browser/starter.js for options 
 window.emulator = new window.V86({
   wasm_path: '/v86.wasm',
   screen_container: document.getElementById("screen_container"),
   bios: {
     url: "/bios/seabios.bin",
   },
   vga_bios: {
     url: "/bios/vgabios.bin",
   },
   hda: { // Hard Disk
    url:  "/images/fd12-base.img",
    async:  true,
    size:  419430400, // Recommended to add size of the image in URL. see https://github.com/copy/v86/blob/master/src/browser/starter.js 
   },
   autostart: true,
 });
}, []);

return (
     <div id="screen_container">
       <div id="screen" style={{overflow: 'hidden'}}>Initializing Emulator…</div>
       <canvas style={{display: 'none'}}></canvas>
     </div>
   );
}
export default App;

Hãy Khởi Động Một Hệ Điều Hành!

Đầu tiên: FreeDOS

Hãy bắt đầu với điều gì đó thú vị — FreeDOS! Nó rất phù hợp để chạy các trò chơi và phần mềm DOS cổ điển. Tải phiên bản đã được biên soạn ở đây, giải nén fd12-base.img, và đặt nó vào thư mục public/images của bạn.

Khởi động Ứng dụng Web bằng cách chạy:

npm run dev

Và mở http://localhost:5173/ trong trình duyệt của bạn

Booting up FreeDOS within the browser

Muốn Thử Linux?
Đây là một điều còn thú vị hơn — chúng ta có thể chạy Alpine Linux ngay trong trình duyệt! Tải phiên bản ISO ảo Alpine mới nhất và cập nhật cài đặt máy ảo của bạn thành:

window.emulator = new window.V86({
  wasm_path:  '/v86.wasm',
  screen_container:  document.getElementById("screen_container"),
  bios: {
    url:  "/bios/seabios.bin",
  },
  vga_bios: {
    url:  "/bios/vgabios.bin",
  },
  boot_order: '0x123', // Boot from CD-ROM first
  memory_size: 512 * 1024 * 1024, // 512MB RAM
  vga_memory_size: 64 * 1024 * 1024, // 64MB VGA RAM
  // See more: https://github.com/copy/v86/blob/master/docs/networking.md
  net_device: {
    type: 'virtio',
    relay_url: "wisps://wisp.mercurywork.shop",
  },
  cdrom: {
    // Source: https://dl-cdn.alpinelinux.org/alpine/v3.20/releases/x86/alpine-virt-3.20.3-x86.iso
    url: "/images/alpine-virt-3.20.3-x86.iso", 
  },
  autostart:  true,
});

Làm mới trình duyệt và chờ đợi Linux khởi động. Điều này có thể mất từ 3–5 phút 😅. Khi được yêu cầu đăng nhập, hãy nhập: root.

Login prompt for Alpine Linux 3.20 running in the browser

Làm Cho Nó Trông Thực Sự Ngầu 😎
Bạn có muốn cảm giác như một máy tính cổ điển? Hãy thêm phông chữ hoàn hảo:

Tải phông chữ Modern DOS về.
Đặt các tệp vào dự án của bạn trong thư mục assets/fonts/ModernDOS và cập nhật tệp index.css thành:

@font-face {
 font-family: 'ModernDOS';
 src: url('./assets/fonts/ModernDOS/ModernDOS8x16.ttf') format('truetype');
}
#screen_container {
 white-space: pre;
 font-family: 'ModernDOS', 'Courier New', Courier, monospace;
 font-size: 14px;
 line-height: 14px;
 background-color: #000;
 color:#fff;
}

Làm mới trang và tận hưởng giao diện mới!

FreeDOS running in the browser using a DOS-like font

Còn Gì Tiếp Theo?
Bây giờ bạn đã có một máy ảo chạy trong trình duyệt của mình (thật tuyệt phải không?!), dưới đây là một số điều thú vị để thử:

Muốn có mã nguồn hoàn chỉnh? Tải về tại đây:

  • Phiên bản FreeDOS
  • Phiên bản Linux

Những thứ thú vị tương tự để khám phá:

  • JSLinux
  • PC.js
  • Tạo một Boot Sector
  • Trình giả lập Halfix x86
  • Mini.WebVM: Máy Linux của bạn từ Dockerfile, ảo hóa trong trình duyệt qua WebAssembly

Cảm ơn lớn đến:

  • Dự án V86 tuyệt vời
  • Nhóm FreeDOS và Alpine Linux
  • Những người làm SeaBIOS
  • Người tạo phông chữ Modern DOS

Hatonet kết nối doanh nghiệp ITO toàn cầu.
Giúp các doanh nghiệp IT Việt Nam tiết kiệm chi phí,tìm kiếm đối tác,mở rộng mạng lưới.

- Mở rộng kênh tìm kiếm khách hàng gia tăng doanh thu.

- Tiết kiệm chi phí quan hệ tìm đối tác.

- Ứng tuyển trực tuyến bất cứ lúc nào khi có yêu cầu.

- Trực tiếp liên kết với công ty quốc tế

Liên hệ :

Email: hello@hatonet.vn

Zalo: https://zalo.me/hatonet

hatonet