[解決済み] WebSocket URIをページURIに相対的に構築する方法とは？

質問

WebSocketのURIをブラウザ側のページURIと相対的に構築したい。例えば、私の場合、HTTP URIを次のように変換します。

http://example.com:8000/path
https://example.com:8000/path

から

ws://example.com:8000/path/to/ws
wss://example.com:8000/path/to/ws

現在やっていることは、最初の4文字 "http" を "ws" に置き換え、それに "/to/ws" を追加しています。何か良い方法はないでしょうか？

どのように解決するのですか？

Web サーバーが WebSocket をサポートしている場合 (または WebSocket ハンドラ モジュールがある場合)、同じホストとポートを使用して、表示されているようにスキームを変更するだけでよいのです。Web サーバーと Websocket サーバー/モジュールを一緒に実行するための多くのオプションがあります。

私は、ブラインド文字列置換を行う代わりに、window.location グローバルの個々の部分を見て、それらを一緒に結合することを提案します。

var loc = window.location, new_uri;
if (loc.protocol === "https:") {
    new_uri = "wss:";
} else {
    new_uri = "ws:";
}
new_uri += "//" + loc.host;
new_uri += loc.pathname + "/to/ws";

一部のウェブサーバ (Jetty ベースのもの) は、特定のリクエストを WebSocket ハンドラに渡すべきかどうかを判断するのに、現在 (upgrade ヘッダではなく) パスを使用していることに注意してください。そのため、あなたが望む方法でパスを変換できるかどうかが制限されるかもしれません。