I just started in the world of websockets, my project is pure php I'm trying to integrate nodejs in my application by the question of websockets so I have some doubts, I've been reading and practicing and I was developing in small and simple chat all iva of wonders elchat worked very well until I try to change the extension to my index.html to index.php, it shows me the browser in white with can not ge /. if I change it to index.html it works immediately but if I change it to index.php it does not read it I do not understand why I was looking for tutorials how to solve it but I still do not solve the problem I am using XAMPP in my project, a hand help for this newbie plis !
and this is my code:
// my server in nodejs
const http = require('http');
const path = require('path');
const express = require('express');
const connect = require('connect');
const app = express();
const server = app.listen(3000);
const io = require('socket.io').listen(server);
//aqui estan los sockets desde otro archivo js para dejar el codigo de el servidor mas limpio
require('./socket')(io);
app.use(express.static(path.join(__dirname,'public')));
//voy a establecer un puerto si no tomas el 3000
app.set('port' , process.env.PORT || 3000)
//voy a recivir el puerto
server.listen(app.get('port') ,()=>{
console.log('conectado con el servidor '+app.get('port'))
})
// the sockets
module.exports= function(io){
io.on('connection',socket=>{
console.log('usuarios conectados con io');
//esta es la accion que se recive desde el cliente
socket.on('mensaje-cliente',function (data) {
console.log(data);
//aqui el servidor la emite el mensaje a todos los clientes
io.sockets.emit('mensaje-servidor', data);
})
})
}
my index.html // if I change it to index.php nothing at all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chat websocket</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<nav class="navbar navbar-light bg-primary">
<a href="" class="navbar-brand mx-auto">WebsocketChat</a>
</nav>
<div class="container">
<div class="col-md-6 mt-4">
<div class="card">
<div class="card-header">
<h4>lets Chat</h4>
</div>
<div id="chat" class="card-body">
</div>
<form class="card-footer" action="index.html" method="post" id="message-form">
<div class="input-group">
<input type="text" name="" id="message" class="form-control">
<div class="input-group-append">
<input type="submit" class="btn btn-primary" name="" id="enviar">
</div>
</div>
</form>
</div>
</div>
</div>
//ya intente cambiarlo a http://localhost:3000 pero nada de nada
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
micliente main.js
$(function () {
var socket=io();
//intente poner esta linea en el cliente pero tampoco
//var sockets = io.connect( 'http://localhost:' );
//obteniendo los elementos del Dom
var formulario = $("#message-form");
var mensajebox = $("#chat");
var mensaje = $("#message");
var enviar = $("#enviar");
formulario.submit( e =>{
e.preventDefault();
//console.log(mensaje.val());
//aquii con socket.io le damos un nombre al evento y capturamos el mensaje y *
socket.emit('mensaje-cliente',mensaje.val());
//limpiar input despues de enviar
mensaje.val("");
});
/*aqui nos toca escuchar el mensaje atraves de la palabra clave del servidor*/
socket.on('mensaje-servidor',function(data){
//aqui elegimos donde mostrar el mensaje del servidor
mensajebox.append(data+'<br>');
});
})