Bagaimana cara membuat URI WebSocket relatif terhadap URI halaman?

Saya ingin membuat URI WebSocket relatif terhadap URI halaman di sisi browser. Katakanlah, dalam kasus saya, ubah HTTP URI seperti

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

untuk

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

Yang saya lakukan sekarang adalah mengganti 4 huruf pertama "http" dengan "ws", dan menambahkan "/ to / ws" padanya. Apakah ada cara yang lebih baik untuk itu?

Jika server Web Anda memiliki dukungan untuk WebSockets (atau modul handler WebSocket) maka Anda dapat menggunakan host dan port yang sama dan hanya mengubah skema seperti yang Anda tunjukkan. Ada banyak pilihan untuk menjalankan server Web dan server / modul Websocket secara bersamaan.

Saya menyarankan agar Anda melihat bagian individual window.location global dan menggabungkannya kembali daripada melakukan substitusi blind string.

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

Perhatikan bahwa beberapa server web (yaitu yang berbasis Jetty) saat ini menggunakan jalur (bukan header pemutakhiran) untuk menentukan apakah permintaan tertentu harus diteruskan ke penangan WebSocket. Jadi, Anda mungkin dibatasi dalam apakah Anda dapat mengubah jalan sesuai keinginan Anda.

Ini adalah versi saya yang menambahkan port tcp jika bukan 80 atau 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: Versi yang ditingkatkan sebagai saran dari @kanaka:

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

Edit 2: Saat ini saya membuat WebSocketini:

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

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

Bekerja dengan http (s), port dll.

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

Dengan asumsi server WebSocket Anda mendengarkan pada port yang sama seperti dari mana halaman tersebut diminta, saya sarankan:

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

Kemudian, untuk kasus Anda, sebut sebagai berikut:

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

mudah:

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

Di localhost, Anda harus mempertimbangkan jalur konteks.

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

Dalam naskah ketikan:

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

Pemakaian:

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