¿Cómo construir un URI de WebSocket relativo al URI de la página?

Quiero construir un URI de WebSocket relativo al URI de la página en el lado del navegador. Digamos, en mi caso, convierta HTTP URI como

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

a

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

Lo que estoy haciendo actualmente es reemplazar las primeras 4 letras "http" por "ws", y agregarle "/ a / ws". ¿Hay alguna forma mejor de hacerlo?

Si su servidor web es compatible con WebSockets (o un módulo controlador de WebSocket), entonces puede usar el mismo host y puerto y simplemente cambiar el esquema como se muestra. Hay muchas opciones para ejecutar un servidor web y un servidor / módulo Websocket juntos.

Le sugiero que mire las piezas individuales de window.location global y las vuelva a unir en lugar de realizar una sustitución ciega de cadenas.

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

Tenga en cuenta que algunos servidores web (es decir, los basados ​​en Jetty) utilizan actualmente la ruta (en lugar del encabezado de actualización) para determinar si una solicitud específica debe transmitirse al controlador WebSocket. Por lo tanto, es posible que tenga limitaciones en cuanto a si puede transformar el camino de la manera que desee.

Aquí está mi versión que agrega el puerto tcp en caso de que no sea 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;
}

Edición 1: versión mejorada por sugerencia de @kanaka:

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

Edición 2: Hoy en día creo WebSocketesto:

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

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

Funciona con http (s), puertos, 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

Suponiendo que su servidor WebSocket está escuchando en el mismo puerto desde el que se solicita la página, sugeriría:

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

Luego, para su caso, llámelo de la siguiente manera:

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'

En localhost, debe considerar la ruta de 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;
}

Mecanografiado:

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