estoy implementando un chat en mi plataforma web con webSockets, lo que estoy usando es Socket.io. Pero me encentro con este error que se muestra en la consola de Google Chrome.
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/socket.io/?EIO=3&transport=polling&t=MpkAtjK
Archivo chat.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chat WebSockets</title>
<link rel="stylesheet" href="Styles/main.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<?php include 'navbar/navbar2.php'; ?>
<div id="chat-container">
<div id="chat-window">
<div id="salida"></div>
<div id="acciones"></div>
</div>
<input type="text" id="usuario" placeholder="Usuario">
<input type="text" id="mensaje" placeholder="Mensaje">
<button id="enviar">Enviar</button>
</div>
<script src="socket.io.js"></script>
<script src="chat.js"></script>
<script src="JavaScripts/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Archivos index.js
const express = require('express');//Servidor Express
const app = express();
const path = require('path');
// Settings
app.set('port', process.env.PORT || 3000);//Usar el puerto
//Iniciando el Servidor
const server = app.listen(app.get('port'), () => {//leer puerto utilizado
console.log('Puerto: ',app.get('port'));
});
//Abriendo el navegadpr los archivos estaticos
console.log(path.join(__dirname, 'chat.php'));
app.use(express.static(path.join(__dirname, 'chat.php')));
//Conexion a Socket.io
const SocketIO = require('socket.io');/*Modulo Socket.io */
const io = SocketIO(server);// Conexion de los webSockets
//WebSockets
io.on('connection', (socket) =>{
console.log('Nueva Conexion', socket.id);
//Escuchando el evento del Cliente Mensaje
socket.on('chatMensajeCliente', (datos) => {
console.log(datos);
//io.sockets.emit('chatMensajeServidor', datos);//Enviando datos a todos los Clientes/Usuarios
});
});
Archivo chat.js
const socket = io()
//Elementos del DOM
let mensaje = document.getElementById('mensaje');
let usuario = document.getElementById('usuario');
let enviar = document.getElementById('enviar');
let salida = document.getElementById('salida');
let acciones = document.getElementById('acciones');
//Enviar Mensaje al servidor
enviar.addEventListener('click', function(){
//Enviando Datos al Servidor
console.log(usuario.value, mensaje.value);
socket.emit('chatMensajeCliente', {
usuario : usuario.value,
mensaje : mensaje.value
});
});
Cabe resaltar que estoy usando Apache para mi plataforma. No se si interfiren los puertos. Espero me puedan ayudar. Gracias! :)