WebSockets Connection to published port is failing (LiveReload)

[trieloff]

Select Topic Area

Question

Body

I'm trying to set up livereload of my web app using https://www.npmjs.com/package/livereload-js and I'm unable to get the livereload.js client to talk to the server on Codespaces through WebSockets.

The setup is:

• my Codespace is https://xxxxxxxx.github.dev/ running a webapp on port 3000 and a livereload server on port 35729
• Both ports are exposed
• on https://xxxxxxxx-3000.preview.app.github.dev/ my webapp is being served, it loads the livereload client script, configured to use wss://xxxxxxxx-35729.preview.app.github.dev:443/livereload as the server URL

The result is a recurring error message:

livereload.js:2237 WebSocket connection to 'wss://xxxxxxxx-35729-preview.app.github.dev/livereload' failed: 

If I run this in the browser's dev console:

var s = new WebSocket('wss://xxxxxxxx-35729.preview.app.github.dev:443/livereload');
s.onerror = (e) => console.error('error', e);
s.onopen = console.log;

I'm getting an error:

error isTrusted
: 
true
bubbles
: 
false
cancelBubble
: 
false
cancelable
: 
false
composed
: 
false
currentTarget
: 
WebSocket {url: 'wss://xxxxxxxx-35729.preview.app.github.dev/livereload', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
defaultPrevented
: 
false
eventPhase
: 
0
path
: 
[]
returnValue
: 
true
srcElement
: 
WebSocket {url: 'wss://xxxxxxxx-35729.preview.app.github.dev/livereload', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
target
: 
WebSocket {url: 'wss://xxxxxxxx-35729.preview.app.github.dev/livereload', readyState: 3, bufferedAmount: 0, onopen: ƒ, onerror: ƒ, …}
timeStamp
: 
6686889
type
: 
"error"

back, indicating that the connection failed.

One thing that I noticed: in my devcontainer.json I've specified:

	"portsAttributes": {
		"3000": {
			"label": "My CLI",
			"protocol": "http"
		},
		"35729": {
			"label": "Live Reload",
			"requireLocalPort": true
		}
	}

and with this, port 35729 won't be opened – is that because the local port 35729 is already taken?

[lgiancol]

Hey @trieloff! Sorry you're having troubles setting this up. I wanna start by making sure that your ports are properly being forwarded. If you look in the Ports tab, you should see both 3000 and 35729. 35729 won't show up if the server is running locally on your machine and not in the Codespace itself.

Once we see that both ports are there and have a URL assigned, we can use those URLs to configure the code. The first thing I noticed is that you said you were using wss://xxxxxxxx-35729.preview.app.github.dev:443/livereload as the livereload url, :443 isn't necessary here. The second thing I noticed is this error you received, livereload.js:2237 WebSocket connection to 'wss://xxxxxxxx-35729-preview.app.github.dev/livereload' failed: has an incorrect URL. It shows ...35729-preview.app... whereas it should be ...35729.preview.app... notice the . instead of -.

If you could make these changes and then reach back out with any other errors that might come up I'll be happy to figure this out with you.

[trieloff]

The - vs. . in the hostname was definitely part of the issue at hand.

I made some progress by running npx livereload in a different terminal window inside the codespace. With this, the port is being forwarded an my client can connect.

Starting the live reload server from the same process that already exposes port 3000 does not seem to work yet.

[lgiancol]

That's great to hear! So if I'm understanding correctly, by running livereload in a separate terminal you are able to continue working on your project, but you'd like to have both the livereload server as well as your app be started from the same process?

[trieloff]

Exactly. I can probably start them together, but having a single process would be much closer to the non-Codespaces environment.

[lgiancol]

How are you setting up the single process? As long as both ports are being forwarded VSCode should pick it up, and in turn, Codespaces will end up forwarding and displaying them in the Ports tab view.

If you could create a simple repro of your setup and make it public, I can take a look and see what we can do.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬