Tarayıcı tarafında sayfa URI'sine göre bir WebSocket URI'si oluşturmak istiyorum. Diyelim ki benim durumumda HTTP URI'larını şu şekilde dönüştürün:

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

-e

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

Şu anda yaptığım şey ilk 4 harf olan "http" yi "ws" ile değiştirmek ve ona "/ to / ws" yi eklemek. Bunun daha iyi bir yolu var mı?

Web sunucunuzda WebSocket (veya bir WebSocket işleyici modülü) desteği varsa, aynı ana bilgisayarı ve bağlantı noktasını kullanabilir ve yalnızca gösterdiğiniz gibi düzeni değiştirebilirsiniz. Bir Web sunucusu ve Websocket sunucusu / modülünü birlikte çalıştırmak için birçok seçenek vardır.

Kör dizge ikamesi yapmak yerine window.location global'in tek tek parçalarına bakmanızı ve onları tekrar birleştirmenizi öneririm.

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

Bazı web sunucularının (yani Jetty tabanlı olanlar), belirli bir isteğin WebSocket işleyicisine iletilmesi gerekip gerekmediğini belirlemek için şu anda yolu (yükseltme başlığı yerine) kullandığına dikkat edin. Bu nedenle, yolu istediğiniz şekilde dönüştürebilme konusunda sınırlı kalabilirsiniz.

İşte 80 veya 443 olmaması durumunda tcp bağlantı noktasını ekleyen sürümüm:

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

Düzenleme 1: @kanaka'nın önerisine göre geliştirilmiş sürüm:

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

Düzenleme 2: Bugünlerde şunu oluşturuyorum WebSocket:

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

Window.URL API'sini kullanma - https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

Http (s), bağlantı noktaları vb. İle çalışır.

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

WebSocket sunucunuzun, sayfanın istendiği bağlantı noktasından dinlediğini varsayarsak, şunu öneririm:

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

Ardından, davanız için aşağıdaki şekilde arayın:

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

kolay:

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

Localhost'ta bağlam yolunu düşünmelisiniz.

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

Typcript'te:

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

Kullanım:

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

Son derece kolay çözüm, ws ve port, test edildi:

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

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