@ledsun blog

無味の味は佳境に入らざればすなわち知れず

wandsをブラウザで実行する環境を作る

Ruby ruby.wasm WebSocket

自作のwands gemをブラウザで動かす環境を作ります。 wandsはまだブラウザで動きません。 どんな修正が必要か知るためにひとまず動かしてみます。 wasm_drb/examples at main · youchan/wasm_drb · GitHub を参考にして環境をつくります。

bundle init
bundle add wands ruby_wasm js
mkdir dist
bundle exec rbwasm build -o dist/ruby+gems.wasm

初回のビルドは20分くらい掛かります。

動作確認用のHTMLです。

<html>
  <body>
    <script type="module">
      import { DefaultRubyVM } from "https://cdn.jsdelivr.net/npm/@ruby/wasm-wasi@2.7.1/dist/browser/+esm";
      const response = await fetch("/dist/ruby+gems.wasm");
      const module = await WebAssembly.compileStreaming(response);
      const { vm } = await DefaultRubyVM(module);

      vm.eval('require "wands"')
    </script>
  </body>
</html>

ブラウザで開いてみます。

ruby -run -e httpd . -p 8000

エラーがでます。

vm.js:739 Uncaught J: <internal:/usr/local/lib/ruby/3.3.0/rubygems/core_ext/kernel_require.rb>:136:in `require': cannot load such file -- socket (LoadError)
<internal:/usr/local/lib/ruby/3.3.0/rubygems/core_ext/kernel_require.rb>:136:in `require'
/bundle/gems/wands-0.6.1/lib/wands/web_socket.rb:3:in `<top (required)>'
/bundle/gems/wands-0.6.1/lib/wands.rb:4:in `require_relative'
/bundle/gems/wands-0.6.1/lib/wands.rb:4:in `<top (required)>'
<internal:/usr/local/lib/ruby/3.3.0/rubygems/core_ext/kernel_require.rb>:136:in `require'
<internal:/usr/local/lib/ruby/3.3.0/rubygems/core_ext/kernel_require.rb>:136:in `require'
eval:1:in `<main>'
-e:in `eval'
    at j (https://cdn.jsdelivr.net/npm/@ruby/wasm-wasi@2.7.1/dist/browser/+esm:7:23748)
    at https://cdn.jsdelivr.net/npm/@ruby/wasm-wasi@2.7.1/dist/browser/+esm:7:24383
    at x (https://cdn.jsdelivr.net/npm/@ruby/wasm-wasi@2.7.1/dist/browser/+esm:7:23866)
    at S (https://cdn.jsdelivr.net/npm/@ruby/wasm-wasi@2.7.1/dist/browser/+esm:7:24319)
    at w.eval (https://cdn.jsdelivr.net/npm/@ruby/wasm-wasi@2.7.1/dist/browser/+esm:7:20663)
    at http://localhost:8000/:9:10

wands自体は見えています。 ひとまず成功です。