How to construct a WebSocket URI relative to the page URI? - websocket

Question

I want to construct a WebSocket URI relative to the page URI at the browser side. Say, in my case convert HTTP URIs like
http://example.com:8000/path
https://example.com:8000/path
to
ws://example.com:8000/path/to/ws
wss://example.com:8000/path/to/ws
What I'm doing currently is replace the first 4 letters "http" by "ws", and append "/to/ws" to it. Is there any better way for that?

Answer 1

If your Web server has support for WebSockets (or a WebSocket handler module) then you can use the same host and port and just change the scheme like you are showing. There are many options for running a Web server and Websocket server/module together.
I would suggest that you look at the individual pieces of the window.location global and join them back together instead of doing blind string substitution.
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";
Note that some web servers (i.e. Jetty based ones) currently use the path (rather than the upgrade header) to determine whether a specific request should be passed on to the WebSocket handler. So you may be limited in whether you can transform the path in the way you want.

Answer 2

Here is my version which adds the tcp port in case it's not 80 or 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;
}
Edit 1: Improved version as by suggestion of #kanaka :
function url(s) {
var l = window.location;
return ((l.protocol === "https:") ? "wss://" : "ws://") + l.host + l.pathname + s;
}
Edit 2: Nowadays I create the WebSocket this:
var s = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws");

Answer 3

Using the Window.URL API - https://developer.mozilla.org/en-US/docs/Web/API/Window/URL
Works with http(s), ports etc.
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

Assuming your WebSocket server is listening on the same port as from which the page is being requested, I would suggest:
function createWebSocket(path) {
var protocolPrefix = (window.location.protocol === 'https:') ? 'wss:' : 'ws:';
return new WebSocket(protocolPrefix + '//' + location.host + path);
}
Then, for your case, call it as follows:
var socket = createWebSocket(location.pathname + '/to/ws');

Answer 5

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

Answer 6

On localhost you should consider context path.
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

In typescript:
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 "";
}
}
}
Usage:
alert(WebsocketUtils.websocketUrlByPath("/websocket"));

Answer 8

I agree with #Eadz, something like this is cleaner and safer:
const url = new URL('./ws', location.href);
url.protocol = url.protocol.replace('http', 'ws');
const webSocket = new WebSocket(url);
The URL class saves work and deals with things like query parameters, etc.

Answer 9

Dead easy solution, ws and port, tested:
var ws = new WebSocket("ws://" + window.location.host + ":6666");
ws.onopen = function() { ws.send( .. etc