CODEWITHSUNDEEP
javascripthtmlnode.jsexpresssocket.io
William Jones
William Jones

Reputation: 1129

Express not doing anything but sending HTML file

I'm using an app.post method in Express like so:

app.post('/race', function(req,res) {
  let raceResponse = {
    user_name: req.body.userName
  }
  console.log('Express has received race.');

  //Socket.IO
  let race = io.of('/race').on('connection', (socket) => {
    console.log('A user has entered the race!');
    socket.on('racePageReady', function() {
      console.log('race page ready recieved');
      socket.emit('racePageInfo', raceResponse);
    });

    socket.on('createRoom', function(roomName) {
      socket.join(roomName);
      let clients = io.sockets.adapter.rooms[roomName].sockets;
      console.log("A room with the name " + roomName + "was created.");
      console.log(clients);
      socket.emit('roomCreated', clients);
    });

    socket.on('joinRoom', function(roomName) {
      socket.join(roomName);
      let clients = io.sockets.adapter.rooms[roomName].sockets;
      console.log('A user joined the room with the name: ' + roomName + ". The user's name is " + raceResponse.user_name);
      console.log(clients);
      socket.emit('roomCreated', clients);
    });
  });

  res.sendFile(path.join(__dirname, '/client/race/index.html'));
}

The page is being sent fine, but the console.log and all the other Socket.IO stuff just doesn't happen. I'm finding this peculiar, because I have a different app.post method that works just fine, all console.logging and Socket.IO business happens. Here's the code:

app.post('/city', function(req,res) {
  let cityResponse = {
    user_name: req.body.userName
  }

  console.log('Express has received city.');

  //Socket.IO
  let city = io.of('/city').on('connection', (socket) => {
    socket.id = Math.random();
    socket.name = cityResponse.user_name;
    SOCKET_LIST[socket.id] = socket; //defined earlier

    User.onConnect(socket); //defined earlier

    socket.on('cityPageReady', function() {
      socket.emit('cityPageInfo', cityResponse);
      console.log('city page ready recieved');
    });

    console.log('A user has connected to the city!');
    console.log("Socket: " + socket);
    console.log("Socket ID: " + socket.id);
    console.log("SOCKET_LIST: ");
    console.log(SOCKET_LIST);

    socket.on('chat message', function(msg, user) {
      console.log('User ' + user + ' sent the message : ' + msg);
      socket.emit('chat message', msg, user);
    });
  });

  res.sendFile(path.join(__dirname, '/client/city/index.html'));
});

As far as I can tell, both methods look pretty much the same, except for the Socket.IO stuff in the middle. I'm fairly certain that the io.of method is correct, as it's working for the City page, but not the race.

The only other difference is the way that the two pages are accessed. The City page is accessed through a HTML form with an action attribute, whereas the Race page is accessed through a HTML link (on the City page) with a href attribute.

Both methods are shown below:

CITY

<form id="cityForm" action="http://localhost:4000/city" method="POST">
  User name: <input type="text" name="userName">
  button type="submit" id="formSubmit">Submit</button>
</form>

RACE

<div><a href="http://localhost:4000/race"></div>

Can anyone see why this peculiar behaviour is occuring? If any other information is needed please let me know so that I can include it.

Upvotes: 0

Views: 40

Answers (1)

Errorname
Errorname

Reputation: 2459

When clicking an on HTML link, the browser does a GET HTML request. When you submit a Form (with method="POST"), the browser does a POST request.

When using app.post(), you tell express to listen for POST requests. If you want express to listen for GET requests, you should use app.get()

Upvotes: 2

Related Questions