Load blink.js from local server when loading from localhost

[bryaan]

I am loading a js project from a local Vite server which is much like serving from Webpack. I point my window to localhost:9100 and everything loads. Problem is when I try to call Blink.msg(...) that blink.js has not been loaded onto the window. I am thinking of solving this by adding an import to the head like this:

<script src="localhost:xxxx/blink.js"></script>

What I need to know is on what port Blink.jl is serving its blink.js file from. And if it is not can this functionality be implemented?

This would allow supporting a much much wider range of javascript usecases.

[bryaan]

Ok so I figured out how to get the port by using Blink.port[] and it is able to find the blink.js file. Now Im getting another issue that id can't be found.

[bryaan]

Figured this out too, must add it like this:

    <script>
      var id = 1 
    </script>
    <script>
      var callback_id = 1
    </script>
    <script src="http://localhost:2224/blink.js"></script>

Now another problem: the websocket is replacing the http localhost webpack/vite server path with ws to initiate the websocket connection, but that is not the right port. The port must be injected into this file on generation. Can someone point me to the right files to edit for this and I will work on a PR?

[bypie5]

UPDATE: see this other comment #303 (comment)

@bryaan thanks for figuring out how to get the port and solve the issue with the missing id values in blink.js. I was able to make some headway loading html/js from a webpack built project.

The port must be injected into this file on generation.

I'm not sure if I completely understand the situation you're describing. But, if you're talking about injecting the port into the JS file, I was able to do something like this:

using Blink, Genie

Genie.Server.serve("gui/build", 8081) # serving webpack built project with local webserver

w = Window()

url = "http://localhost:8081/index.html?blinkPort=" * string(Blink.port[]) # add the port as a query param
@js w window.location = $url

wait()

Basically, I gave up trying to use loadurl and instead overwrote the window.location value. loadurl was causing blink.js to not be loaded for some reason. Therefore, I had to load blink.js with a script tag like this:

function App() {
  let params = (new URL(document.location)).searchParams
  let blinkPort = params.get("blinkPort")
  let blinkUrl = `http://localhost:${blinkPort}/blink.js`

  useEffect(() => {
    const declareIds = 'var id = 1; var callback_id = 1;'

    // attach as global variable
    const declareIdsScript = document.createElement('script')
    declareIdsScript.innerHTML = declareIds
    document.body.appendChild(declareIdsScript)

    const script = document.createElement('script')
    script.src = blinkUrl
    script.async = true
    document.body.appendChild(script)

    return () => {
      document.body.removeChild(declareIdsScript)
      document.body.removeChild(script)
    }
  }, [blinkUrl])

// rest of the app...

You'll notice I "injected" the port via a query parameter. Maybe you could do something similar for your websocket port?

[bypie5]

I opened up this PR to address this issue of Blink not being available when loading content from a url (loadurl or defining :url in the opts for the Window)

#320