Merge pull request #148 from mind-ar/fix-diagrama-socket

Diagrama: permitir conexiones desde cualquier origen

public/diagram/index.html

@@ -34,8 +34,7 @@
       <script type="module">
         import { io } from "./lib/socket.io.esm.min.js";
 
-        const { port } = window.location
-        const socket = io(`http://localhost:${port}`);
+        const socket = io();
         socket.on("connect", function () {
           console.log("conectado!");
         });

src/commands/repl.ts

@@ -22,6 +22,7 @@ export type Options = {
   project: string
   skipValidations: boolean,
   darkMode: boolean,
+  host: string,
   port: string,
   skipDiagram: boolean,
 }
@@ -282,9 +283,10 @@ export async function initializeClient(options: Options, repl: Interface, interp
     cors({ allowedHeaders: '*' }),
     express.static(publicPath('diagram'), { maxAge: '1d' }),
   )
-  server.listen(parseInt(options.port), 'localhost')
+  const host = options.host
+  server.listen(parseInt(options.port), host)
   server.addListener('listening', () => {
-    logger.info(successDescription('Dynamic diagram available at: ' + bold(`http://localhost:${options.port}`)))
+    logger.info(successDescription('Dynamic diagram available at: ' + bold(`http://${host}:${options.port}`)))
     repl.prompt()
   })
 

src/commands/run.ts

@@ -19,14 +19,16 @@ type Options = {
   project: string
   assets: string
   skipValidations: boolean
-  port?: string
+  host: string,
+  port: string
   game: boolean,
   startDiagram: boolean
 }
 
 let timer = 0
 
 const DEFAULT_PORT = '4200'
+const DEFAULT_HOST = 'localhost'
 
 type DynamicDiagramClient = {
   onReload: () => void,
@@ -120,7 +122,7 @@ export const getGameInterpreter = (environment: Environment, io: Server): Interp
   return interpreter
 }
 
-export const initializeGameClient = ({ project, assets, port, game }: Options): Server | undefined => {
+export const initializeGameClient = ({ project, assets, host, port, game }: Options): Server | undefined => {
   if (!game) return undefined
 
   const app = express()
@@ -137,10 +139,11 @@ export const initializeGameClient = ({ project, assets, port, game }: Options):
     app.use(cors({ allowedHeaders: '*' }), express.static(soundsFolder, { maxAge: '1d' }))
   }
 
+  const currentHost = gameHost(host!)
   const currentPort = gamePort(port!)
-  server.listen(parseInt(currentPort), 'localhost')
+  server.listen(parseInt(currentPort), currentHost)
 
-  logger.info(successDescription('Game available at: ' + bold(`http://localhost:${currentPort}`)))
+  logger.info(successDescription('Game available at: ' + bold(`http://${currentHost}:${currentPort}`)))
   server.listen(currentPort)
   return io
 }
@@ -170,10 +173,11 @@ export async function initializeDynamicDiagram(programPackage: Package, options:
     cors({ allowedHeaders: '*' }),
     express.static(publicPath('diagram'), { maxAge: '1d' }),
   )
+  const currentHost = gameHost(options.host!)
   const currentPort = dynamicDiagramPort(options.port!)
-  server.listen(parseInt(currentPort), 'localhost')
+  server.listen(parseInt(currentPort), currentHost)
   server.addListener('listening', () => {
-    logger.info(successDescription('Dynamic diagram available at: ' + bold(`http://localhost:${currentPort}`)))
+    logger.info(successDescription('Dynamic diagram available at: ' + bold(`http://${currentHost}:${currentPort}`)))
   })
 
   return {
@@ -283,6 +287,7 @@ export const buildEnvironmentForProgram = async ({ project, skipValidations, gam
 export const runner = (game: boolean): string => game ? 'as a game' : 'as a program'
 
 export const gamePort = (port: string): string => port ?? DEFAULT_PORT
+export const gameHost = (host: string): string => host ?? DEFAULT_HOST
 
 export const dynamicDiagramPort = (port: string): string => `${+gamePort(port) + 1}`
 

src/index.ts

@@ -22,6 +22,7 @@ program.command('run')
   .option('-p, --project <path>', 'path to project', process.cwd())
   .option('-a, --assets [path]', 'path relative to project for game assets. By default, it takes the assets definition from package.json.', 'assets')
   .option('--skipValidations', 'skip code validation', false)
+  .option('--host [host]', 'host to run (bind) the server', 'localhost')
   .option('--port [port]', 'port to run the server', '3000')
   .option('-g, --game', 'sets the program as a game', false)
   .option('-v, --verbose', 'print debugging information', false)
@@ -46,6 +47,7 @@ program.command('repl')
   .option('--skipValidations', 'skip code validation', false)
   .option('--darkMode', 'dark mode', false)
   .option('--skipDiagram', 'avoid starting the server for the dynamic diagram', false)
+  .option('--host [host]', 'host to run (bind) the server', 'localhost')
   .option('--port [port]', 'port to run the server', '3000')
   .option('-v, --verbose', 'print debugging information', false)
   .action(repl)