¿Qué debo utilizar en socket.io y node.js para ver en tiempo real cuando un usuario presiona cualquier tecla?, hasta ahora vengo emitiendo mensajes a todos los usuarios mediante un botón que dispara un evento, ahora quisiera hacer que el evento se emita cada vez que una tecla es presionada sin necesidad de un boton que emita el evento.
2 respuestas
Servidor
En primer lugar, debes configurar tu servidor SocketIO:
let server = /* puede ser express, koa, o vanilla Node.js */
let socket = io(server);
let connectedUsers = {};
socket.on('connection', socket => {
connectedUsers[socket.id] = { letters: [] };
});
socket.on('key', ({ id, key } => {
connectedUsers[id].letters.push(key);
console.log(`El usuario ${id} ha pulsado ${key}`);
});
Cliente
En el lado cliente, debes hacer dos cosas:
- Escuchar al servidor.
- Añadir un handler para el evento
keypress
del elemento a escuchar. - Enviar el id de usuario en cada emisión.
Primero escuchamos al servidor:
let socket = io('//localhost:9000');
Luego, añadimos un handler para el evento keypress
del elemento que será escuchado.
let input = document.getElementById('source');
input.addEventListener('keypress', send);
Finalmente, enviamos la letra pulsada junto con el id del cliente:
function send (e) {
socket.emit('key', { id: socket.id, key: e.key });
}
Cada vez que se escriba una letra, el servidor imprimirá lo siguiente:
El usuario "id del cliente" ha pulsado "letra"
-
Gracias!! ni bien pueda probaré el código y te cuento... Commented el 14 mar. 2017 a las 1:27
-
Cual sería la diferencia usando broadcast en vez de emit?– ffflabsCommented el 15 mar. 2017 a las 2:38
-
Broadcast envía un mensaje a todos los clientes de un mismo canal. Emit, por otro lado, emite un mensaje al otro extremo de la comunicación.– gugadevCommented el 15 mar. 2017 a las 2:42
Para saber que tecla fue presionada del lado del cliente puedes hacer esto:
$(document).ready(function(){
$(document).keypress(function (e){
var pressedKey = String.fromCharCode(e.which);
console.log('Tecla presionada: ' + pressedKey);
});
});
input{
width: 100%;
height: 30px;
font-family: Arial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Escribe un mensaje..." />
Ya precisamente para envíarlo y recibirlo por medio de tus emit
y on
respectivamente, simplemente puedes hacer lo siguiente:
Lado del cliente
$(document).ready(function(){
$(document).keypress(function (e){
var pressedKey = String.fromCharCode(e.which);
// Aquí hacemos nuestro emit y envíamos la tecla presionada
// al lado del servidor... :D !
socket.emit('pressedKey', {'pressedKey': pressedKey});
});
});
Lado del servidor
io.on('connection', function (socket) {
// Aquí recibimos nuestra tecla presionada en el lado del servidor
socket.on('pressedKey', function (data) {
console.log('Tecla presionada: ' + data.pressedKey);
});
});