페이지 URI에 상대적인 WebSocket URI를 구성하는 방법은 무엇입니까?

브라우저 측에서 페이지 URI를 기준으로 WebSocket URI를 구성하고 싶습니다. 제 경우에는 HTTP URI를 다음과 같이 변환하십시오.

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

에

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

내가 현재하고있는 것은 처음 4 개의 "http"문자를 "ws"로 바꾸고 "/ to / ws"를 추가하는 것입니다. 더 좋은 방법이 있습니까?

웹 서버가 WebSocket (또는 WebSocket 처리기 모듈)을 지원하는 경우 동일한 호스트 및 포트를 사용하고 표시하는 것과 같이 스키마를 변경할 수 있습니다. 웹 서버와 Websocket 서버 / 모듈을 함께 실행하기위한 많은 옵션이 있습니다.

window.location 전역의 개별 조각을보고 블라인드 문자열 대체를 수행하는 대신 다시 결합하는 것이 좋습니다.

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

일부 웹 서버 (예 : Jetty 기반 서버)는 현재 경로 (업그레이드 헤더가 아닌)를 사용하여 특정 요청이 WebSocket 핸들러에 전달되어야하는지 여부를 결정합니다. 따라서 원하는 방식으로 경로를 변환 할 수 있는지 여부가 제한 될 수 있습니다.

다음은 80 또는 443이 아닌 경우 tcp 포트를 추가하는 내 버전입니다.

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

편집 1 : @kanaka의 제안으로 개선 된 버전 :

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

편집 2 : 요즘 나는 이것을 만듭니다 WebSocket.

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

Window.URL API를 사용하여 - https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

http (s), 포트 등에서 작동합니다.

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 서버가 페이지가 요청되는 것과 동일한 포트에서 수신한다고 가정하면 다음을 제안합니다.

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

그런 다음 귀하의 경우 다음과 같이 전화하십시오.

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

쉬운:

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

localhost에서는 컨텍스트 경로를 고려해야합니다.

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

타이프 스크립트에서 :

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

용법:

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