Como construir um URI WebSocket em relação ao URI da página?

Eu quero construir um URI de WebSocket em relação ao URI da página no lado do navegador. Digamos, no meu caso, converter URIs HTTP como

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

para

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

O que estou fazendo atualmente é substituir as primeiras 4 letras "http" por "ws" e acrescentar "/ to / ws" a ele. Existe alguma maneira melhor para isso?

Se o seu servidor Web tiver suporte para WebSockets (ou um módulo manipulador WebSocket), você pode usar o mesmo host e porta e apenas alterar o esquema como está sendo mostrado. Existem muitas opções para executar um servidor Web e um servidor / módulo Websocket juntos.

Eu sugeriria que você olhasse para as partes individuais do window.location global e junte-as novamente em vez de fazer a substituição cega de strings.

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

Observe que alguns servidores web (ou seja, os baseados em Jetty) atualmente usam o caminho (em vez do cabeçalho de atualização) para determinar se uma solicitação específica deve ser passada para o manipulador WebSocket. Portanto, você pode estar limitado quanto à possibilidade de transformar o caminho da maneira que deseja.

Aqui está minha versão que adiciona a porta tcp caso não seja 80 ou 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;
}

Edição 1: versão aprimorada conforme sugestão de @kanaka:

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

Edição 2: Hoje em dia eu crio WebSocketeste:

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

Usando a API Window.URL - https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

Funciona com http (s), portas etc.

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

Supondo que seu servidor WebSocket esteja escutando na mesma porta em que a página está sendo solicitada, sugiro:

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

Então, para o seu caso, chame-o da seguinte forma:

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

fácil:

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

No localhost, você deve considerar o caminho do contexto.

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

No texto datilografado:

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

Uso:

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