devicescript icon indicating copy to clipboard operation
devicescript copied to clipboard

Remote connection to localhost iso address of the remote server

Open louisvangeldrop opened this issue 1 year ago • 17 comments

I have started from a chromebook a remote tunnel session to my pc "louis" with ip-address 192.168.0.126. Using the Devicescript extension I want to connect to my mcu-board connected to my chromebook. As a result it opens a web-site with URL: localhost:8081/connect?dark=1 I assume it should be something like: 192.168.0.126:8081/connect?dark=1

If I replace localhost with 192.168.0.126 it doesn't connect. It looks like the localhost:8081 webserver is opened with "localhost" iso "internet"

louisvangeldrop avatar Jul 27 '23 17:07 louisvangeldrop

Looks like i forgot to resolve the external uri.

pelikhan avatar Jul 28 '23 19:07 pelikhan

Try again with v2.14.13. It should already resolve a better URI from the start and try to connect. If the devtools server does not connect yet, you can try to enable the "Devtools - Internet" option in the settings.

pelikhan avatar Jul 28 '23 20:07 pelikhan

I have tried with v2.14.13, but unfortunately it still opens with localhost. Starting devs devtools src/main with --internet allows me to open the remote server, but there is no "Connect" button

louisvangeldrop avatar Jul 28 '23 21:07 louisvangeldrop

Do you have repro steps for this issue?

The current solution relies on the port forwarding that gets put in place automatically when using WSL/Codespaces. I am not sure yet how to support this scenario.

Could you open the connect page JavaScript console and look at the error messages? If the icon does not load, it sounds like the jacdac-docs page failed to be downloaded.

pelikhan avatar Jul 29 '23 02:07 pelikhan

We use asExternalUri which should take care of port forwarding; so something is going on.

pelikhan avatar Jul 29 '23 09:07 pelikhan

Started remote tunnel session. devs devtools src/main.ts --internet Open 192.168.0.126:8081 and opened the Chrome developer tab =>

Mixed Content: The page at 'https://microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.564602934302401' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/rosarivo/v1/OGdIq-p0tOtBN2VMVvO9W_esZW2xOQ-xsNqO47m55DA.woff'. This request has been blocked; the content must be served over HTTPS. microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.564602934302401:74 Mixed Content: The page at 'https://microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.564602934302401' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff'. This request has been blocked; the content must be served over HTTPS. Sender.js:568 POST https://dc.services.visualstudio.com/v2/track 400 _xhrSender @ Sender.js:568 _self. @ Sender.js:322 dynProtoProxy @ dynamicproto-js.js:374 _self.flush @ Sender.js:108 dynProtoProxy @ dynamicproto-js.js:374 (anoniem) @ ChannelController.js:168 _iterateChain @ ProcessTelemetryContext.js:161 (anoniem) @ ChannelController.js:163 (anoniem) @ ChannelController.js:51 HelperFuncs_arrForEach @ HelperFuncs.js:343 _processChannelQueue @ ChannelController.js:44 flush @ ChannelController.js:162 _flushChannels @ BaseCore.js:572 dynProtoProxy @ dynamicproto-js.js:374 _flushChannels @ PageViewManager.js:26 (anoniem) @ PageViewManager.js:51 setInterval (asynchroon) _addQueue @ PageViewManager.js:32 _self. @ PageViewManager.js:113 dynProtoProxy @ dynamicproto-js.js:374 _self. @ AnalyticsPlugin.js:196 dynProtoProxy @ dynamicproto-js.js:374 (anoniem) @ HelperFuncs.js:641 dynProtoProxy @ dynamicproto-js.js:374 92513 @ useAnalytics.tsx:58 webpack_require @ bootstrap:19 37862 @ useServices.ts:17 webpack_require @ bootstrap:19 5355 @ wifiserver.ts:31 webpack_require @ bootstrap:19 28926 @ TransportIcon.tsx:42 webpack_require @ bootstrap:19 49501 @ strip-prefix.js:20 webpack_require @ bootstrap:19 13165 @ api-runner-browser-plugins.js:23 webpack_require @ bootstrap:19 80064 @ api-runner-browser.js:1 webpack_require @ bootstrap:19 55309 @ page-renderer.js:59 webpack_require @ bootstrap:19 webpack_exec @ index.modern.mjs:3 (anoniem) @ index.modern.mjs:3 webpack_require.O @ chunk loaded:25 (anoniem) @ index.modern.mjs:3 webpackJsonpCallback @ jsonp chunk loading:74 (anoniem) @ app-4d30d40291f810e06489.js:1 Sender.js:568 POST https://dc.services.visualstudio.com/v2/track 400 _xhrSender @ Sender.js:568 _self. @ Sender.js:322 _self.flush @ Sender.js:108 (anoniem) @ ChannelController.js:168 _iterateChain @ ProcessTelemetryContext.js:161 (anoniem) @ ChannelController.js:163 (anoniem) @ ChannelController.js:51 HelperFuncs_arrForEach @ HelperFuncs.js:343 _processChannelQueue @ ChannelController.js:44 flush @ ChannelController.js:162 _flushChannels @ BaseCore.js:572 _flushChannels @ PageViewManager.js:26 (anoniem) @ PageViewManager.js:51 setInterval (asynchroon) _addQueue @ PageViewManager.js:32 _self. @ PageViewManager.js:113 _self. @ AnalyticsPlugin.js:196 (anoniem) @ HelperFuncs.js:641 push.92513.page @ useAnalytics.tsx:62 (anoniem) @ gatsby-browser.js:51 asyncGeneratorStep @ asyncToGenerator.js:3 _next @ asyncToGenerator.js:25 (anoniem) @ asyncToGenerator.js:32 (anoniem) @ asyncToGenerator.js:21 onRouteUpdate @ gatsby-browser.js:50 (anoniem) @ api-runner-browser.js:26 push.80064.exports.h @ api-runner-browser.js:17 onRouteUpdate @ navigation.js:44 componentDidMount @ navigation.js:224 lk @ react-dom.production.min.js:261 jk @ react-dom.production.min.js:260 ik @ react-dom.production.min.js:259 Xk @ react-dom.production.min.js:283 Qk @ react-dom.production.min.js:281 Hk @ react-dom.production.min.js:270 J @ scheduler.production.min.js:13 R @ scheduler.production.min.js:14 InstrumentHooks.js:97 POST https://dc.services.visualstudio.com/v2/track 400 (anoniem) @ InstrumentHooks.js:97 _doFetchSender @ Sender.js:646 _fetchKeepAliveSender @ Sender.js:578 _doUnloadSend @ Sender.js:489 _self. @ Sender.js:319 _self.onunloadFlush @ Sender.js:119 dynProtoProxy @ dynamicproto-js.js:374 (anoniem) @ Initialization.js:128 HelperFuncs_arrForEach @ HelperFuncs.js:343 (anoniem) @ Initialization.js:126 HelperFuncs_arrForEach @ HelperFuncs.js:343 _self. @ Initialization.js:125 dynProtoProxy @ dynamicproto-js.js:374 performHousekeeping @ Initialization.js:231 _handlePageVisibility @ EventHelpers.js:414

louisvangeldrop avatar Jul 29 '23 11:07 louisvangeldrop

I have started a Chromebook remote tunnel session again and in the console I run: devs devtools src/main.ts --internet -s. On my pc - where the code tunnel service runs, with address 192.168.0.126 the url: http: //localhost:8081/connect works and shows the connect button. However on the same pc the url: http://192.168.0.126:8081/connect doesn't show the connect button

louisvangeldrop avatar Jul 29 '23 12:07 louisvangeldrop

BTW: if one enters a special character e.g. "?" in the filter field it returns: Something went wrong. Please reload the page.

louisvangeldrop avatar Jul 29 '23 13:07 louisvangeldrop

(? ... there seems to be some parsing issues in the console ui)

I suspect that since you are not going through vscode and using the cli directly, the port forwarding is not put in place.

pelikhan avatar Jul 30 '23 08:07 pelikhan

I have also used the vscode extension, but then only the url: localhost:8081/connect is supported. It will not find e.g. 192.168.0.126:8081/connect

louisvangeldrop avatar Jul 30 '23 08:07 louisvangeldrop

Did you try to enable the "internet" flag in the developer tools settings in vscode?

It should add the --internet flag when starting the devtools server

pelikhan avatar Jul 30 '23 10:07 pelikhan

Used command: devs devtools src/main.ts --internet -s

louisvangeldrop avatar Jul 30 '23 11:07 louisvangeldrop

Try enabling this flag in vscode image

pelikhan avatar Jul 31 '23 04:07 pelikhan

Now I can open url: 192.168.0.126:8081/connect, but the "Connect" button is missing

louisvangeldrop avatar Jul 31 '23 09:07 louisvangeldrop

What browser are you using? Is there any error in the JavaScript console?

pelikhan avatar Jul 31 '23 09:07 pelikhan

At my chromebook Chrome. At my latop Edge. Error in the browser development window:

Unrecognized feature: 'vr'. about:blank:1 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing. Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'. ServiceManagerContext.tsx:110 starting hosted services

louisvangeldrop avatar Jul 31 '23 21:07 louisvangeldrop

With Chromebook Chrome browser I do get after starting devs devtools .......

the error: microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.5838419806994697:74 Mixed Content: The page at 'https://microsoft.github.io/jacdac-docs/tools/devicescript-connect/?dark=1&devtools=ws%3A%2F%2F192.168.0.126%3A8081%2F#0.5838419806994697' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff'. This request has been blocked; the content must be served over HTTPS.

louisvangeldrop avatar Jul 31 '23 22:07 louisvangeldrop