如何构建相对于页面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

我目前正在做的是用"ws"替换前4个字母"http",并将"/ to/ws"附加到它上面.那有更好的方法吗？

Answer 1

如果您的Web服务器支持WebSockets(或WebSocket处理程序模块),那么您可以使用相同的主机和端口,只需像您显示的那样更改方案.有许多选项可以将Web服务器和Websocket服务器/模块一起运行.

我建议您查看window.location global的各个部分并将它们连接在一起,而不是进行盲字符串替换.

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'