0

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! :)

2
  • tienes el socket.io descargado? y el raiz de tu proyecto??
    – Bryro
    Commented el 1 sept. 2019 a las 19:07
  • Si, ahí está. He conseguido que funcione cambiando en el chat.js la primera línea de código a : const socket = io('localhost:3000/aitasc/chat.php') Pero solo me funciona la conexion. los demás métodos como el on() y el emit() no lo hacen. Pienso que es por el 3000. Pero no estoy my seguro :( Commented el 1 sept. 2019 a las 19:24

1 respuesta 1

0

Prueba esto.

NodeJS:

  const express = require('express');//Servidor Express
  const app = express();
  const http = require(‘http’).Server(app);
  const io = require(‘socket.io’)(server);
  const path = require('path');

  // Settings
  app.set('port', process.env.PORT || 3000);//Usar el puerto

  // <!-- Esto no es necesario ya que estas sirviendo estos archivos de php con php, valga la redundancia.
  //app.use(express.static(path.join(__dirname, 'chat.php')));
  // -->

  //WebSockets
  io.on('connection', (socket) =>{
    //Escuchando el evento del Cliente Mensaje
    socket.on('chatMensajeCliente', (datos) => {
        io.sockets.emit('chatMensajeServidor', [datos, {usuario: 'Server', mensaje: '¡Hello!'}]);//Enviando datos a todos los Clientes/Usuarios
  });


  //Iniciando el Servidor
  http.listen(app.get('port'), () => {//leer puerto utilizado
    console.log('Puerto: ', app.get('port'));
  }); 
});

JS:

const socket = io() // Por defecto socket se conecta al puerto 3000.

//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
    });    
});

socket.on('chatMensajeServidor', (messages) => console.log(messages)

Aquí puedes ver mas información sobre Socket.io

2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.