Làm thế nào để xây dựng một URI WebSocket liên quan đến URI trang?

Tôi muốn tạo một URI WebSocket liên quan đến URI trang ở phía trình duyệt. Giả sử, trong trường hợp của tôi, hãy chuyển đổi các URI HTTP như

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

đến

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

Những gì tôi đang làm hiện tại là thay thế 4 chữ cái đầu tiên "http" bằng "ws" và nối "/ to / ws" vào nó. Có cách nào tốt hơn cho điều đó không?

Nếu máy chủ Web của bạn có hỗ trợ WebSockets (hoặc một mô-đun xử lý WebSocket) thì bạn có thể sử dụng cùng một máy chủ và cổng và chỉ cần thay đổi sơ đồ như bạn đang hiển thị. Có nhiều tùy chọn để chạy máy chủ Web và máy chủ / mô-đun Websocket cùng nhau.

Tôi khuyên bạn nên xem xét từng phần riêng lẻ của window.location global và nối chúng lại với nhau thay vì thực hiện thay thế chuỗi mù.

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

Lưu ý rằng một số máy chủ web (tức là máy chủ dựa trên Jetty) hiện đang sử dụng đường dẫn (thay vì tiêu đề nâng cấp) để xác định xem một yêu cầu cụ thể có nên được chuyển đến trình xử lý WebSocket hay không. Vì vậy, bạn có thể bị hạn chế về việc bạn có thể biến đổi con đường theo cách bạn muốn hay không.

Đây là phiên bản của tôi có thêm cổng tcp trong trường hợp nó không phải là 80 hoặc 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;
}

Chỉnh sửa 1: Phiên bản cải tiến theo đề xuất của @kanaka:

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

Chỉnh sửa 2: Ngày nay tôi tạo ra cái WebSocketnày:

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

Sử dụng API Window.URL - https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

Hoạt động với (các) http, cổng, v.v.

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

Giả sử máy chủ WebSocket của bạn đang nghe trên cùng một cổng mà từ đó trang đang được yêu cầu, tôi sẽ đề xuất:

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

Sau đó, đối với trường hợp của bạn, hãy gọi nó như sau:

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

dễ dàng:

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

Trên localhost, bạn nên xem xét đường dẫn ngữ cảnh.

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

Trong bảng chữ:

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

Sử dụng:

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