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

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.