Come costruire un URI WebSocket relativo all'URI della pagina?

Voglio costruire un URI WebSocket relativo all'URI della pagina sul lato del browser. Dì, nel mio caso converti gli URI HTTP come

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

per

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

Quello che sto facendo attualmente è sostituire le prime 4 lettere "http" con "ws" e aggiungere "/ a / ws". C'è un modo migliore per farlo?

Se il tuo server Web ha il supporto per WebSocket (o un modulo gestore WebSocket), puoi usare lo stesso host e la stessa porta e cambiare semplicemente lo schema come stai mostrando. Ci sono molte opzioni per eseguire insieme un server Web e un server / modulo Websocket.

Suggerirei di guardare i singoli pezzi di window.location global e unirli di nuovo insieme invece di eseguire la sostituzione cieca delle stringhe.

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

Si noti che alcuni server Web (ad esempio quelli basati su Jetty) attualmente utilizzano il percorso (anziché l'intestazione di aggiornamento) per determinare se una richiesta specifica deve essere trasmessa al gestore WebSocket. Quindi potresti essere limitato nella possibilità di trasformare il percorso nel modo che desideri.

Ecco la mia versione che aggiunge la porta tcp nel caso in cui non sia 80 o 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;
}

Modifica 1: versione migliorata su suggerimento di @kanaka:

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

Modifica 2: Al giorno d'oggi creo WebSocketquesto:

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

Utilizzo dell'API Window.URL - https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

Funziona con http (s), porte ecc.

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

Supponendo che il tuo server WebSocket sia in ascolto sulla stessa porta da cui viene richiesta la pagina, suggerirei:

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

Quindi, per il tuo caso, chiamalo come segue:

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

facile:

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

Su localhost dovresti considerare il percorso del contesto.

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

In dattiloscritto:

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

Utilizzo:

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