Client not connecting wits server Socket.IO

Question

Hi I am making a chat site with the url http://localhost/Seminarska%20naloga%20NRSA/index.php?stran=chat Once the message is submitted the server doesn't recive it and the client doesn't even connect to the server. The server is running on http://localhost:3000 when the code is in index.html file the chat works fina and with no problems connects to the server but when i put it in the php file called chat.html.php the connection fails.

HTML code:

<ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/Seminarska naloga NRSA/template/node_modules/socket.io/client-dist/socket.io.js"></script>
    <script>
    const socket = io("http://192.168.88.152:3000");

    var messages = document.getElementById('messages');
    var form = document.getElementById('form');
    var input = document.getElementById('input');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
        }
    });

    socket.on('chat message', function(msg) {
        var item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
    });
    </script>

Server code:

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname+'/chat.html.php');
});

io.on('connection', (socket) => {
  console.log('a user connected');
});

io.on('connection', (socket) => {
    console.log('a user connected');
    socket.on('disconnect', () => {
      console.log('user disconnected');
    });
  });

  io.on('connection', (socket) => {
    socket.on('chat message', (msg) => {
      console.log('message: ' + msg);
    });
  });

  io.on('connection', (socket) => {
    socket.on('chat message', (msg) => {
      io.emit('chat message', msg);
    });
  });

server.listen(3000, () => {
  console.log('listening on *:3000');
});

In the console there are no errors or warnings if the code is in index.html and i go to http://logalhost:3000 the ctah works perfectly.

Answer 1

This should be your client

<script src="/Seminarska naloga NRSA/template/node_modules/socket.io/client-dist/socket.io.js"></script>
<script>
const socket = io("http://192.168.88.152:3000");

var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  if (input.value) {
  socket.emit('SendMsg', input.value);
  input.value = '';
}
});

socket.on('RecieveMsg', msg => {
  var item = document.createElement('li');
  item.textContent = msg;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});
</script>

This should be your server

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const io = require("socket.io")(server,
  cors: {
    origin: 'http://localhost',
    methods: ["GET", "POST"]
  }
);

app.get('/', (req, res) => {
  res.sendFile(__dirname+'/chat.html.php');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  io.on('SendMsg', msg => {
    console.log('Message: ' + msg);
    io.emit('RecieveMsg', msg);
  });
  io.on('disconnect', () => {
    console.log('A user disconnected');
  })
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

all of your io.on() functions should be inside of io.on('connection') , because you want your server to listen after the connection.

Hope this helps:D