Tengo una app muy básica en la que al pulsar un botón en el cliente se hace una petición al server con socket.io para que se ponga un mensaje en un h1 de todos los clientes conectados.
El problema es que solo funciona para ese mismo cliente y los cambios no se relfejan para todos.
Este es el código del server:
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
const cors = require('cors');
const path = require('path');
const os = require('os')
const port = process.env.PORT || 3000;
app.use(cors());
app.use(express.static(path.join(__dirname, '/public/')));
io.on('connection', (socket) => {
socket.on('pulsado', (msg) => {
socket.emit('alertAll', msg)
})
})
server.listen(port, () => {
const interfaces = os.networkInterfaces();
const localAddr = Object.values(interfaces).flatMap((ifaces) => ifaces.filter((info) => info.family === 'IPv4' && !info.internal)).map((info => info.address));
console.log(`Server running on http://${localAddr}:${port}`)
})
Y este es el código del cliente:
const socket = io.connect('http://192.168.1.74:3000');
socket.on('alertAll', (msg) => {
document.querySelector('h1').innerText = msg
})
document.querySelector('button').onclick = () => {
socket.emit('pulsado', 'He sido pulsado por un cliente');
}
El html es este:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>CLICK ME</button>
<h1></h1>
<script src="/socket.io/socket.io.js"></script>
<script src="main.js"></script>
</body>
</html>