CODEWITHSUNDEEP
javascriptnode.js
Wokki
Wokki

Reputation: 157

NodeJS SyntaxError: expected expression, got '<'

I'm using NodeJS and Socket.io. This is my index.js

    var app = require('http').createServer(handler);
    var io = require('socket.io').listen(app);
    var fs = require('fs');

    app.listen(3000);
    console.log("Listening on port 3000");

    function handler(req, res) {
      fs.readFile(__dirname + '/index.html', function( err, data ) {
        if( err ) {
          res.writeHead( 500 );
          return res.end('Error loading index.html');
        }

        res.writeHead( 200 );
        res.end( data );
      });
    }

Here is my index.html

<!DOCTYPE html>
<html>
<head>
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <title>Impact Game</title>
    <style type="text/css">
        html,body {
            background-color: #333;
            color: #fff;
            font-family: helvetica, arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 12pt;
        }

        #canvas {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>

    <script src="lib/impact/impact.js"></script>
    <script src="lib/game/main.js"></script>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

When I go to localhost:3000, I get "SyntaxError: expected expression, got '<' main.js:1:0".

The tutorial I tried to follow was for ImpactJS + NodeJS + Socket.IO, to make a multiplayer game, but this is the furthest I've got with it so far.

Here is the content of main.js

ig.module(
    'game.main'
)
.requires(
    'impact.game',
    'impact.font'
)
.defines(function(){

MyGame = ig.Game.extend({

    // Load a font
    font: new ig.Font( 'media/04b03.font.png' ),


    init: function() {
        // Initialize your game here; bind keys etc.
    },

    update: function() {
        // Update all entities and backgroundMaps
        this.parent();

        // Add your own, additional update code here
    },

    draw: function() {
        // Draw all entities and backgroundMaps
        this.parent();


        // Add your own drawing code here
        var x = ig.system.width/2,
            y = ig.system.height/2;

        this.font.draw( 'It Works!', x, y, ig.Font.ALIGN.CENTER );
    }
});


// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

});

Upvotes: 0

Views: 2909

Answers (1)

Quentin
Quentin

Reputation: 943143

Look at this:

function handler(req, res) {
  fs.readFile(__dirname + '/index.html', function( err, data ) {

No matter what the browser asks for, you are going to supply the content of index.html

So when the browser asks for lib/impact/impact.js or lib/impact/main.js … you give it the content of index.html.

You need to pay attention to what is being requested (req.url) and return the correct thing.

Upvotes: 5

Related Questions