Failing to compile the halogen websocket example

I’m trying to run the example from halogen and web sockets that can be found here as a standalone project by adding to spago.dhall the dependencies defined in the root of the halogen project. Here it is as reference:

─ cat spago.dhall 
{-
Welcome to a Spago project!
You can edit this file as you like.
-}
{ name = "my-project"
, dependencies =
  [ "aff"
  , "aff-coroutines"
  , "arrays"
  , "console"
  , "coroutines"
  , "effect"
  , "either"
  , "foldable-traversable"
  , "foreign"
  , "halogen"
  , "halogen-subscriptions"
  , "maybe"
  , "prelude"
  , "psci-support"
  , "transformers"
  , "web-events"
  , "web-socket"
  ]
, packages = ./packages.dhall
, sources = [ "src/**/*.purs", "test/**/*.purs" ]
}

It builds OK but when I try to run it, it outputs the following error.

╰─ spago run
[info] Build succeeded.
/home/cebrian/GIT/fe-be-protocol-spike/frontend/output/Web.Socket.WebSocket/foreign.js:6
      return new WebSocket(url, protocols);
      ^

ReferenceError: WebSocket is not defined
    at /home/cebrian/GIT/fe-be-protocol-spike/frontend/output/Web.Socket.WebSocket/foreign.js:6:7
    at Object.__do [as main] (/home/cebrian/GIT/fe-be-protocol-spike/frontend/output/Main/index.js:61:82)
    at Object.<anonymous> (/home/cebrian/GIT/fe-be-protocol-spike/frontend/.spago/run.js:3:72)

What am I missing for having this example to run outside of the purescript halogen repo (in which I was able to run it perfectly)?

Are you perhaps trying to run your code via the console using Node? WebSocket is defined when running in the browser, but is not natively available in Node. See https://stackoverflow.com/questions/43311238/javascript-referenceerror-websocket-is-not-defined/43311304

I’m just running spago run for running it, and if you clone the purescript-halogen repo and go to that folder, this is the only thing you need to get a web page with the intended functionality.

So maybe it is something related to spago or Purescript but basically I want to understand why does it work in the halogen example’s folder but not on my copy of that folder.

But in the example in the halogen repo, it doesn’t do spago run:

"example-driver-websockets": "spago --config examples/driver-websockets/spago.dhall bundle-app --main Example.Driver.Websockets.Main --to examples/driver-websockets/dist/example.js",

So it bundles an example.js file that gets loaded by /examples/driver-websockets/dist/index.html when you load that page in a browser.

When you do spago run it tries to execute the program via Node as a console application, but WebSocket is only available when loaded in a browser.

2 Likes

You are right @ntwilson thanks!! With current setup if I bundle the app spago build-app and I open an index.html pointing to the bundled Javascript I’m able to run perfectly the app.

Do you know which changes to the spago.dhall should I do so I could interactively develop using the file watch of spago run -w?

Good question! I use webpack to bundle my frontend code, and then I also have a separate webpack watch window open (webpack --watch). Then whenever I make PureScript code changes, webpack can pick those up and rebundle rather quickly and I just refresh the page. I’m not sure if there’s a good way to achieve the same effect without some sort of third-party bundler thrown in the mix. Maybe somebody else can chime in if they have a good solution?