ページURIに関連したWebSocket URIを構築する方法は？

Question

ブラウザ側でページURIに関連したWebSocket URIを構築したいと思います。私が現在やっていることは/に/」「WS」で「HTTP」を最初の4つの文字を置き換え、そして追加され

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

にHTTP URIを

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

のように変換する私の場合には、言いますws "を入力します。それのためのより良い方法はありますか？

Answer 1

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"; 

いくつかのウェブサーバ（すなわち、突堤基づくもの）は、現在、特定の要求がWebSocketのハンドラに渡されるべきかどうかを決定するために、パス（というよりアップグレードヘッダ）を使用することに注意してください。だから、あなたが望むようにパスを変換できるかどうかは限られているかもしれません。ここで

Answer 2

は、それが80または443ではない場合には、TCPポートを追加私のバージョンです：

function url(s) { 
    var l = window.location; 
    return ((l.protocol === "https:") ? "wss://" : "ws://") + l.hostname + (((l.port != 80) && (l.port != 443)) ? ":" + l.port : "") + l.pathname + s; 
} 

編集1：@kanakaの提案するなどの改良版：

function url(s) { 
    var l = window.location; 
    return ((l.protocol === "https:") ? "wss://" : "ws://") + l.host + l.pathname + s; 
} 

編集2：

var s = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws"); 

Answer 3

があなたのWebSocketサーバーがOを聞いていると仮定すると：今日で私はこのWebSocketを作成しますここからページが要求されているようなn同じポートは、私がお勧めします：次のように

function createWebSocket(path) { 
    var protocolPrefix = (window.location.protocol === 'https:') ? 'wss:' : 'ws:'; 
    return new WebSocket(protocolPrefix + '//' + location.host + path); 
} 

次に、あなたのケースのために、それを呼び出す：あなたはコンテキストパスを考慮する必要があり、ローカルホスト上で

var socket = createWebSocket(location.pathname + '/to/ws'); 

Answer 4

を。

function wsURL(path) { 
    var protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://'; 
    var url = protocol + location.host; 
    if(location.hostname === 'localhost') { 
     url += '/' + location.pathname.split('/')[1]; // add context path 
    } 
    return url + path; 
} 

Answer 5

簡単：

Window.URLのAPIを使用して

location.href.replace(/^http/, 'ws') + '/to/ws' 
// or if you hate regexp: 
location.href.replace('http://', 'ws://').replace('https://', 'wss://') + '/to/ws' 

Answer 6

- typescriptですでhttps://developer.mozilla.org/en-US/docs/Web/API/Window/URL

HTTP（S）で動作し、ポートなど

var url = new URL('/path/to/websocket', window.location.href); 

url.protocol = url.protocol.replace('http', 'ws'); 

url.href // => ws://www.example.com:9999/path/to/websocket 

Answer 7

：

export class WebsocketUtils { 

    public static websocketUrlByPath(path) { 
     return this.websocketProtocolByLocation() + 
      window.location.hostname + 
      this.websocketPortWithColonByLocation() + 
      window.location.pathname + 
      path; 
    } 

    private static websocketProtocolByLocation() { 
     return window.location.protocol === "https:" ? "wss://" : "ws://"; 
    } 

    private static websocketPortWithColonByLocation() { 
     const defaultPort = window.location.protocol === "https:" ? "443" : "80"; 
     if (window.location.port !== defaultPort) { 
      return ":" + window.location.port; 
     } else { 
      return ""; 
     } 
    } 
} 

使用法：

alert(WebsocketUtils.websocketUrlByPath("/websocket"));