Comment construire un URI WebSocket relatif à l'URI de la page ?

Question

Je veux construire un URI WebSocket relatif à l'URI de la page du côté du navigateur. Par exemple, dans mon cas, convertir des URI HTTP tels que

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

à

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

Ce que je fais actuellement, c'est remplacer les 4 premières lettres "http" par "ws", et y ajouter "/to/ws". Existe-t-il une meilleure méthode pour cela ?

Answer 1

Sur localhost, vous devez prendre en compte le chemin du contexte.

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 2

En manuscrit :

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

Utilisation :

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

Answer 3

Je suis d'accord avec @Eadz, quelque chose comme ça est plus propre et plus sûr :

const url = new URL('./ws', location.href);
url.protocol = url.protocol.replace('http', 'ws');
const webSocket = new WebSocket(url);

Le site URL permet d'économiser du travail et de gérer des éléments tels que les paramètres de requête, etc.

Answer 4

Solution très simple, ws et port, testé :

var ws = new WebSocket("ws://" + window.location.host + ":6666");

ws.onopen = function() { ws.send( .. etc