socekt.io-clientのEIO=3版(enginel.ioプロトコルバージョン3)をブラウザでES moduleとして読み込みたかったが、なかなか苦労したので対応した備忘録。
socekt.io-clientのプロトコルはサーバー側のsocket.ioとバージョンが同じでなければならない。
現在(2021/3/6)の最新版はEIO=4だが、主流はいまだEIO=3のようだ。
ドキュメントが見つけられなかったが、おそらくsocekt.io-clientとしては2.xまではEIO=3で3.xからEIO=4となっている。
公式ブログによると2.3.1が2.x系の最終版だろうか。
githubには2.4.xのブランチもあるがreleasesには2.4は記載されていない。
なので2.3.1を使用する。
buid
結論としては2.3.1版のES moduleビルドは苦労のわりに得られるものが少ないのであきらめたので途中まで。
gulpがversion 3という古いバージョンなのでnodeのバージョンを下げる必要がありv10.10.0を使用した。
git clone -b 2.3.x https://github.com/socketio/socket.io-client cd socket.io-client npm install make build
makeを使ってbuildする。内部はgulpを使用している。これで通常版はビルドに成功した。
次にES module版だが、通常はsupport/webpack.config.jsの
libraryTarget: 'umd',
を
libraryTarget: 'module',
に変更すればよいが、webpackのバージョンが低く、ES moduleに対応していない。
webpackのバージョンを上げても良いが、config.jsの内容を見直す必要があり、今後2.3.xは使用されなくなると考えると
そこまで手間をかけるのは割に合わない。なのでbuildされたdistのファイルを直接編集することとした。
distファイルの編集
socket.io.dev.jsがminifyされていないjsファイルでありこれを使用する。
同じようなことをしようとしている人がstackoverflowにいたため、参考になった。
Use socket.io in browser via ES6 import
socket.io.dev.jsの前に
const exports = null, module = {};
を。後に
export default module.exports;
を追加する。
これでhtmlファイルから
<script type="module" src="./socket.io.dev.js"></script>
<script type="module">
import io from "./socket.io.dev.js";
</script>
などとして使用可能になった。
参考サイト
https://stackoverflow.com/questions/64405808/use-socket-io-in-browser-via-es6-import