Giới thiệu
- WebAssembly (gọi tắt là WASM) là một công nghệ góp phần không nhỏ trong sự phát triển ứng dụng Web và ngày càng được sử dụng phổ biến bởi ưu thế hiệu năng, tính bảo mật cao cho WebApp so với ngôn nhữ lập trình Javascript.
- Nếu như trước đây khi tải một Website về thiết bị, chỉ cần 3 ngôn ngữ gồm HTML/CSS/JavaScript là có thể tạo nên một WebApp tương tác với người dùng. Nhưng thời điểm hiện tại, các trình duyệt Web sẽ phải tìm hiểu thêm ngôn ngữ mới, đó là WASM.
- Đây là thành quả nghiên cứu của Microsoft, Google, Mozilla, Apple. WASM được sinh ra để giải quyết hiệu năng của JavaScript, đặc biệt là các tác vụ xử lý video, image, audio, thuật toán ...
- WASM là một ngôn ngữ khác với JavaScript, nhưng nó không nhằm mục đích thay thế. Thay vào đó, nó được thiết kế để bổ sung và hoạt động cùng với JavaScript, cho phép các nhà phát triển web tận dụng điểm mạnh của cả hai ngôn ngữ.
- WASM là một dạng tệp nhị phân cấp thấp cho nền tảng Web, tương tự như file .exe của Windows và được build ra bằng ngôn ngữ C/C++, Rust hoặc Golang (Bài viết này sẽ dùng Golang).
- Tương thích mới nhiều loại trình duyệt và thiết bị di động
Viết WASM với Golang
package main
import (
"crypto/md5"
"encoding/hex"
"encoding/json"
"strconv"
"syscall/js"
"time"
)
func main() {
fmt.Println("Hello, WebAssembly!")
js.Global().Set("EncodeData", js.FuncOf(EncodeData))
<-make(chan bool)
}
func EncodeData(this js.Value, args []js.Value) interface{} {
if len(args) != 1 {
return "Invalid no of arguments passed"
}
accSecure := args[0].String()
timeSecure := time.Now().Unix()
encryptMD5 := md5.Sum([]byte(accSecure + strconv.Itoa(int(timeSecure))))
hexMD5 := hex.EncodeToString(encryptMD5[:])
data := map[string]interface{}{
"data": accSecure,
"data_encrypt": hexMD5,
"time": timeSecure,
}
dataParse, _ := json.Marshal(data)
return string(dataParse)
}
- Hàm EncodeData ở trên data đầu vào là 1 string, kết quả trả ra là data được mã hóa dạng md5(acc + timestamp)
- Để có thể gọi hàm EncodeData này trên JavaScript, chúng ta sử dụng package syscall/js và nó sẽ cung cấp cho ta một số chức năng cơ bản.
- js.Global().Set("EncodeData", js.FuncOf(EncodeData)) đây là câu lệnh để truy cập biến toàn cục trong JavaScript. Hiểu nôm na đó là gọi hàm Go EncodeData trên JavaScript.
- Đặt các biến môi trường GOOS = js và GOARCH = wasm để biên dịch cho WebAssembly:
$ GOOS=js GOARCH=wasm go build -o main.wasm
- Để thực thi main.wasm trong trình duyệt, chúng ta cũng sẽ cần tệp hỗ trợ JavaScript và trang HTML để kết nối mọi thứ với nhau:
$ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .
- Tương tác của các file trong dự án:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Go wasm</title>
</head>
<body>
<script src="wasm_exec.js"></script>
<script>
var go = new Go
var fetchAndInstantiate = async function (wasm, t) {
return fetch(wasm)
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes, t))
.then(result => result.instance)
}
var mod = fetchAndInstantiate("http://mingid.mediacdn.vn/main.wasm", go.importObject);
window.onload = function () {
mod.then(function (e) {
go.run(e)
})
};
</script>
</body>
</html>
- Đoạn script trên sẽ nạp mã WASM từ file main.wasm, sau khi quá trình này diễn ra thành công ta có thể sử dụng hàm EncodeData.
- Lên trình duyệt gõ thử ra như hình là thành công
Nhận xét
Đăng nhận xét