search

microsoft / devicescript

TypeScript for Tiny IoT Devices (ESP32, RP2040, ...)
https://microsoft.github.io/devicescript/
MIT License
3.24k stars 112 forks source link

Remote connection to localhost iso address of the remote server #591

Open louisvangeldrop opened 11 months ago

louisvangeldrop commented 11 months ago

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"

pelikhan commented 11 months ago

Looks like i forgot to resolve the external uri.

pelikhan commented 11 months ago

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.

louisvangeldrop commented 11 months ago

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

pelikhan commented 11 months ago

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 commented 11 months ago

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

louisvangeldrop commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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

pelikhan commented 11 months ago

(? ... 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.

louisvangeldrop commented 11 months ago

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

pelikhan commented 11 months ago

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

louisvangeldrop commented 11 months ago

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

pelikhan commented 11 months ago

Try enabling this flag in vscode

image
louisvangeldrop commented 11 months ago

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

pelikhan commented 11 months ago

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

louisvangeldrop commented 11 months ago

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 commented 11 months ago

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.