如何構建相對於頁面URI的WebSocket URI？

Question

我想在瀏覽器端構建一個相對於頁面URI的WebSocket 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 

我在做什麼現在是「WS」替換第4個字母「HTTP」，並追加「/到/ ws「。有沒有更好的方法呢？

Answer 1

如果您的Web服務器支持WebSocket（或WebSocket處理程序模塊），那麼您可以使用相同的主機和端口，只需更改您顯示的方案即可。有許多選項可以將Web服務器和Websocket服務器/模塊一起運行。

我建議你看看window.location global的各個部分，並將它們連接在一起而不是盲目的字符串替換。

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

注意，某些Web服務器（即，基於碼頭的）目前使用的路徑（而不是升級頭），以確定是否一個特定的請求應該到網頁套接字句柄傳遞。所以你可能會受限於你是否可以按照你想要的方式改變路徑。

Answer 2

這裏是我的版本，它增加了TCP端口的情況下，它不是80或443：

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：現在我創建WebSocket此：

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

Answer 3

假設你的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

容易：

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

Answer 6

使用Window.URL API - 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"));