如何构造相对于页面 URI 的 WebSocket URI

Question

我想在浏览器端构造一个相对于页面 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"。有没有更好的方法？

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 服务器（即基于 Jetty 的服务器）当前使用路径（而不是升级标头）来确定是否应将特定请求传递给 WebSocket 处理程序。因此，您是否可以按照您想要的方式转换路径可能会受到限制。

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

很简单：

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

Answer 6

在本地主机上，您应该考虑上下文路径。

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 7

在打字稿中：

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 8

我同意@Eadz，这样的东西更干净、更安全：

const url = new URL('./ws', location.href);
url.protocol = url.protocol.replace('http', 'ws');
const webSocket = new WebSocket(url);

URL类节省了工作并处理查询参数等内容。

Answer 9

死的简单解决方案，ws 和端口，经过测试：

var ws = new WebSocket("ws://" + window.location.host + ":6666");
ws.onopen = function() { ws.send( .. etc