WebAssembly InstantiateStreaming Неправильный тип MIME

Question

Я пытаюсь заставить этот учебник (здесь: https://www.hellorust.com/demos/add/index.html) работать, и кажется, что что бы я ни делал, я не могу заставить зарезервированную функцию WebAssembly MDN работать должным образом.

Итак, я следовал инструкциям по ссылке выше и получил файл add.wasm. Насколько я могу сказать, это должно быть довольно просто и должно работать. Немного покопавшись, я обнаружил, что новейший модуль WebAssembly предназначен для создания потоковой передачи - документацию по которой можно найти здесь: (https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API).

В примере MDN говорится следующее:

var importObject = {
  imports: { imported_func: arg => console.log(arg) }
};

тогда

WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
.then(obj => obj.instance.exports.exported_func());

Согласно MDN importObject должен развернуть вложенный аргумент. Странно, но хорошо.

Чтобы сделать это как можно более простым, я поместил файл add.wasm и файл js, который импортировал бы его в один и тот же каталог, а затем сделал следующее ( NOTE : я использую Vue. js, но для всех, кто знаком со SPA-подобными библиотеками, это должно быть похоже):

window.WebAssembly.instantiateStreaming(fetch('./add.wasm', {
  headers: {
    "Content-Type": "application/wasm",
  },
}), importObject)
.then(obj => {
  console.log('inside return obj from WebAssembly initiateStreaming')
  obj => obj.instance.exports.exported_func() 
})
.catch(error=>{
  console.log('there was some error; ', error)
});

Я получаю сообщение об ошибке:

there was some error;  TypeError: "Response has unsupported MIME type"

Я пытался не добавлять заголовок в запрос на выборку, используя fetch(add.wasm), удаление window., удаление importObject полностью и простое ведение журнала obj в консоли. Ничто не похоже на работу.

Возможно, мне нужно каким-то образом добавить поле application/wasm в веб-пакет, если оно не поддерживается широко, но я не уверен и не видел ни одного примера в Интернете.

Кто-нибудь знает, как заставить это работать?

РЕДАКТИРОВАТЬ:

Кто-то предположил, что, поскольку это был запрос на выборку, он должен был делать запрос с внутреннего сервера. Это имело смысл для меня, поэтому я сделал следующее:

    WebAssembly.instantiateStreaming(fetch('http://localhost:8000/files/add.wasm'), importObject)
    .then(obj => {
      console.log('inside return obj from WebAssembly initiateStreaming')
      obj => obj.instance.exports.exported_func()
    })
    .catch(error=>{
      console.log('there was some error; ', error)
    });

Где http://localhost:8000/files/{someFile} - это внутренний маршрут, который обслуживает мои файлы (конечно, я обязательно добавил add.wasm). К сожалению, я получаю ту же ошибку (т. Е. unrecognized MIME type), и я не уверен, почему.

Answer 1

Фрагмент кода для обхода проблемы был опубликован в WebAssembly Git здесь . К сожалению, это обходной путь, и это побеждает цель instantiateStreaming(), которая, как говорят, здесь , должна быть "намного более эффективной", поскольку для обходного решения нужен ArrayBuffer, которого instantiateStreaming() помогает избежать.

Answer 2

there was some error; TypeError: "Response has unsupported MIME type" Веб-сервер, который вы используете, не распознает / обслуживает MIME-тип application/wasm.

Вы можете использовать http-сервер на основе ржавчины , он знает о типе wasm MIME.

Установка

Просто используйте curl

curl -SsL https://cdn.rawgit.com/thecoshman/http/master/install.sh | sh

и выполните загруженный скрипт, или вы можете использовать другие способы сделать то же самое в https://crates.io/crates/https.

---

Работает

Пожалуйста, используйте загруженный сервер для сервера вашего веб-приложения (index.html).например,

cd ${YOUR_APPS_PATH}

http

Answer 3

Учитывая, что вы не можете изменить сервер для правильного возврата application/wasm для .wasm запросов файлов по любой причине, вы можете обойти эту проблему, изменив способ создания модуля WebAssembly. Вместо этого:

WebAssembly.instantiateStreaming(fetch("./add.wasm")).then(obj => /* ... */)

Сделайте это:

const response = await fetch("add.wasm");
const buffer = await response.arrayBuffer();
const obj = await WebAssembly.instantiate(buffer);
obj.instance.exports.exported_func();

Или эквивалент then(), если вы не можете использовать async/await.

На практике мой обходной путь заключается в том, чтобы избежать вызова instantiateStreaming(), который должен проверить тип MIME, возвращаемый сервером, прежде чем продолжить (согласно этой спецификации ). Вместо этого я звоню instantiate(), пропуская ArrayBuffer и избегая проверки в целом.