How to create a WebSocket URI relative to a page URI?

Question

I want to create a WebSocket URI relative to the page URI on the browser side. Let's say in my case convert the HTTP URI, for example

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 

Currently, I am replacing the first 4 letters of "http" with "ws" and adding "/ to / ws" to it. Is there a better way to do this?

Answer 1

If your web server supports WebSockets (or the WebSocket handler module), you can use the same host and port and just change the scheme as you show. There are many possibilities for starting a web server and a Websocket server / module.

I would suggest that you look at the individual parts of window.location global and put them together instead of doing blind line replacements.

 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 (such as those associated with Jetty) currently use the path (rather than the update header) to determine if a particular request should be passed to the WebSocket handler. That way, you can be limited to whether you can transform the path the way you want.

Answer 2

Here is my version that adds the tcp port in case it is 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 suggested by @kanaka:

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

Edit 2: I am currently creating WebSocket this:

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

Answer 3

Assuming your WebSocket server is listening on the same port the page is being requested from, 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 like this:

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

Answer 4

On the local host, you should consider the 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 5

easily:

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

Answer 6

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

Using:

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