如何构建一个WebSocket的URI相对于页面URI？(How to construct a We

我想建立一个WebSocket的URI相对于页面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

我在做什么现在是“WS”替换第4个字母“HTTP”，并追加“/到/ WS”来了。 是否有任何更好的办法？

Answer 1:

如果您的Web服务器拥有的WebSockets（或WebSocket的处理器模块）的支持，那么你可以使用相同的主机和端口，只是改方案就像你呈现。 有用于运行一个Web服务器和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";

请注意，某些Web服务器（即基于码头的）目前使用的路径（而不是升级头），以确定是否一个特定的请求应该到网页套接字句柄传递。 所以，你可以在你是否能在你想要的方式转变的路径受到限制。

Answer 2:

这里是我的版本，它增加了TCP端口的情况下，它不是80或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;
}

编辑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");

Answer 3:

使用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

Answer 4:

假设你的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');

Answer 5:

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

Answer 6:

在打字稿：

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

Answer 7:

简单：

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

文章来源: How to construct a WebSocket URI relative to the page URI?