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

Je veux construire un URI WebSocket par rapport à l'URI de la page côté navigateur. Dites, dans mon cas, convertissez les URI HTTP comme

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». Y a-t-il un meilleur moyen pour cela?

Si votre serveur Web prend en charge WebSockets (ou un module de gestionnaire WebSocket), vous pouvez utiliser le même hôte et le même port et changer simplement le schéma comme vous le montrez. Il existe de nombreuses options pour exécuter ensemble un serveur Web et un serveur / module Websocket.

Je vous suggère de regarder les différentes parties du global window.location et de les réunir au lieu de faire une substitution de chaîne aveugle.

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

Notez que certains serveurs Web (c'est-à-dire ceux basés sur Jetty) utilisent actuellement le chemin (plutôt que l'en-tête de mise à niveau) pour déterminer si une requête spécifique doit être transmise au gestionnaire WebSocket. Vous pouvez donc être limité dans la possibilité de transformer le chemin comme vous le souhaitez.

Voici ma version qui ajoute le port tcp au cas où ce ne serait pas 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;
}

Edit 1: Version améliorée comme par suggestion de @kanaka:

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

Edit 2: De nos jours, je crée le WebSocketceci:

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

Utilisation de l'API Window.URL - https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

Fonctionne avec http (s), ports, 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

En supposant que votre serveur WebSocket écoute sur le même port que celui à partir duquel la page est demandée, je suggérerais:

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

Ensuite, pour votre cas, appelez-le comme suit:

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'

Sur localhost, vous devez considérer le chemin de 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;
}

En texte dactylographié:

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

Usage:

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