Secure Real Time Multiplayer Game - External script not running

Please I am just starting my game project but I cant get the externaL script to run.

I have the below code in game.mjs file

import Player from './Player.mjs';
import Collectible from './Collectible.mjs';

const socket = io();
const canvas = document.getElementById('game-window');
const context = canvas.getContext('2d');

const load = () => {
context.fillStyle ="#000000";
context.fillRect(0,0,canvas.width,canvas.height);
context.font="30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText("Coin Race", 100, 30);
context.strokeStyle = "yellow";
context.strokeRect(5,35,canvas.width-10,canvas.height-40)
  
//window.requestAnimationFrame(load);
}

load();
//window.requestAnimationFrame(load);

I have the below code in index.html file

<!DOCTYPE html>
<html>
  <head>
    <title>Secure Real-Time Multiplayer Game</title>
    <meta
      name="description"
      content="An example for the fCC InfoSec Secure Real-Time Multiplayer Game project"
    />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../public/style.css" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <header>
      <h1>Secure Real Time Multiplayer Game</h1>
    </header>
    <hr style="margin: 25px" />
    <div class="container">
      <canvas 
        ref="game"
        id="game-window" 
        width="640" 
        height="480"
      >
      </canvas>
    </div>
  </body>
 <script src="../public/game.mjs" type="module"></script>
</html>

The external file isnt running using “src” in the script tag but if I add the code directly into the html file in the script tag it works.

Can someone please tell me what am doing wrong.

Thank you

Are you sure that src path is accurate? Can you load the .mjs file directly from that?

Hello,

Yes it is. I notice when comment out the below lines in the game.mjs file, the script runs. I don’t know if am supposed to require something in the package.json file for that to work

import Player from './Player.mjs';
import Collectible from './Collectible.mjs';

const socket = io();

Are you using websockets in this project?

How are you running the HTML? Are you serving it?

From the same domain

If your front is served on the same domain as your server, you can simply use:

const socket = io();

The server URL will be deduced from the window.location object.

1 Like

Hello, thanks for pointing me in the right direction. seems Its not working because i havent set up my socket.io connection in the server.js file which is why am getting the error. Hopefully once i get that done everything will be alright.

For the lines with import, once i added “type”: “module” to the package .jso n file, it worked

1 Like

Hello, yes I had done all this. I believe once I set up my socket.io connection in my server.js file. the issue will be resolved. Will get to it. Thanks for your input

@snowmonkey @lasjorg just found the issue,

I changed app.listen in my server.js file to http.listen and its working fine now.

Thank you

1 Like