1

¿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
  • ¿Estás trabajando con jquery o puro javascript del lado del cliente?
    – Jorius
    Commented el 14 mar. 2017 a las 0:38
  • Estoy utilizando ambos Commented el 14 mar. 2017 a las 0:41

2 respuestas 2

1

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:

  1. Escuchar al servidor.
  2. Añadir un handler para el evento keypress del elemento a escuchar.
  3. 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"

3
  • 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?
    – ffflabs
    Commented 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.
    – gugadev
    Commented el 15 mar. 2017 a las 2:42
0

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);
    });
});
1
  • Gracias, en cuánto pueda probaré el código. Commented el 14 mar. 2017 a las 1:27

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.