Potential Solutions to loading Javascript classes unknown at run time

Question

I'm looking for some advice or potential options for loading javascript files in real time long after the DOM has fully loaded. Those javascript files need to be sent over a WebSocket connection, and thus are unknown on page load.

Backstory: I've been working on a VR game for the past year and a half, and progress has been fantastic. I won't waste time going into irrelevant details, but crucially the game is played by one person in VR, and up to 4 other people on their mobile devices.

Now, I've been going through and adding the possibility of mod support. So far this has gone surprisingly well, the Desktop VR game transmits relevant details about all the game-specific information when the mobile players connect, and we go from there.

Except I've hit a snag on one system: "Constructs" that the mobile players can place. Each one is so fundamentally different in use and operation that I've had to create separate classes on a case by case basis. But now with the potential for mod support... Those classes need to somehow be sent by the VR player over WebSocket.

My first naive approach was to use eval and function with a passed string containing javascript contents of an entire file sent from the VR user... Needless to say, that didn't work very well.

Any thoughts at all here for this brick wall I've run into?

• Stack Exchange Broke The Law: why didn't it work very well?
• Robert Harvey: stackoverflow.com/q/55279762
• gntskn: Depending on how your game is architected, you may not need to run these objects in the same process at all. You may want to look into "web workers:" developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/… This sort of approach has the benefit of separating the mods from the core game further, which may make it easier to develop stable mods.
• Alexander: You might be interested in figma.com/blog/how-we-built-the-figma-plugin-system

Answer 1

Okay maybe asking this question helped me think of a solution.

So, modder creates a construct... Lets say a catapult. Makes a javascript class definining how it works. We assume he/she does it all right following certain documentation and following certain design patterns. (Not very likely, I know.)

The mod is loaded on the VR side, and sent during the load sequence as a string, all contained as a function with a name... Lets say Construct_Catapult

We find the first script element on the page, and right before it we inject a new one. We fill it with the script passed over from the websocket connection

A mobile player goes to place a catapult, and taps on it. We now use a quick eval statement to convert a sent "type" into a matching function call for Construct_Catapult, and badda-bing-badda-boom, we've got our dynamic content from the new script tag.

• Mike Daoust: I'll mark this as solved if I can successfully test it out for awhile. Thanks me!
• Thomas Junk: I see a potential security issue with this. If whatever javascript comes down the wire get's executed on the client side, you are an interesting target to deliver whatever code to the client, once your server is compromized.
• svidgen: @ThomasJunk If the server is compromised, the attacker already fully capable of sending arbitrary javascript to the client. Does it matter whether it comes through a <script> tag or a web socket?