it-swarm.com.de

Wie erstelle ich einen WebSocket-URI relativ zum Seiten-URI?

Ich möchte einen WebSocket-URI relativ zum Seiten-URI auf der Browserseite erstellen. Sprich, in meinem Fall konvertieren HTTP-URIs wie

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

zu

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

Was ich gerade mache, ist, die ersten 4 Buchstaben "http" durch "ws" zu ersetzen und "/ to/ws" anzufügen. Gibt es dafür einen besseren Weg?

84
neuront

Wenn Ihr Webserver WebSockets (oder ein WebSocket-Handler-Modul) unterstützt, können Sie denselben Host und denselben Port verwenden und einfach das angezeigte Schema ändern. Es gibt viele Möglichkeiten, einen Webserver und einen Websocket-Server/ein Websocket-Modul zusammen auszuführen.

Ich würde vorschlagen, dass Sie sich die einzelnen Teile von window.location global ansehen und sie wieder zusammenfügen, anstatt die blinde Zeichenfolge zu ersetzen.

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

Beachten Sie, dass einige Webserver (d. H. Jetty-basierte) derzeit den Pfad (anstelle des Upgrade-Headers) verwenden, um zu bestimmen, ob eine bestimmte Anforderung an den WebSocket-Handler weitergeleitet werden soll. Es kann also sein, dass Sie nur begrenzt in der Lage sind, den Pfad nach Ihren Wünschen umzuwandeln.

87
kanaka

Hier ist meine Version, die den TCP-Port hinzufügt, falls er nicht 80 oder 443 ist:

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: Verbesserte Version wie auf Vorschlag von @kanaka:

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

Edit 2: Heute erstelle ich das WebSocket so:

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

Verwenden der Window.URL-API - https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

Funktioniert mit http (s), Ports usw.

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
13
Eadz

Angenommen, Ihr WebSocket-Server überwacht denselben Port, von dem aus die Seite angefordert wird, würde ich Folgendes vorschlagen:

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

Rufen Sie es dann für Ihren Fall wie folgt auf:

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

Auf localhost sollten Sie den Kontextpfad berücksichtigen.

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

einfach:

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

In TypeScript:

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

Verwendung:

alert(WebsocketUtils.websocketUrlByPath("/websocket"));
1
Dániel Kis