0

¿Cuál es la mejor forma para poder unirme directamente a un chat en específico y empezar a chatear con esa persona que está unida a ese chat creado?

Mi pseudocódigo lo he pensado así:

  1. Cambiar mi index.html como lo indica la documentación y en su lugar pueda usar un archivo .php. Estuve investigando en esta pregunta pero no me fue tampoco de mucha ayuda.

  2. Notificarle a mi index.js que alguien está tratando de unirse a un chat en específico (trayendo ya el id del chat creado por la primera persona y ya guardado previamente en mi base de datos desde node.js)

  3. Ya haciendo el enlace, quiero hacerle saber a mi index.js a dónde mandar los mensajes (que sería obviamente al chat al cual le he especificado en mi paso 2).

Para crear mi chat he seguido esto de la documentación oficial de socket.io Para poder hacer la funcionalidad de crear rooms he seguido esta documentación oficial.

Mi código que tengo hasta el momento funcionando tal como lo expliqué antes es el siguiente:

index.html

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>

    </style>
  </head>
  <body>

    <ul id="messages"></ul>
    <form id="messenger" action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>      


    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>

    $(function () {
      var socket = io();
      $('form#messenger').submit(function(e){
        e.preventDefault(); // prevents page reloading
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
      });
    });
    </script>
  </body>
</html>

El cual trabaja bien y luce de la siguiente manera:

introducir la descripción de la imagen aquí

Por parte del código node.js que sirve para convivir del lado del servidor es:

index.js

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});


io.on('connection', function(socket){

  var name_room = randomstring(10);

  socket.join(name_room);

  socket.on('chat message', function(msg){
    io.to(name_room).emit('chat message', msg);
    console.log("mensajeenviado", msg);
    console.log("name_room", name_room);
  });
});

function randomstring(password_length = 25) {
    var string = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789",
        password = "";
    for ( var c = 0; c < password_length; c++ ) {
        var rand = parseInt(((Math.random()) * string.length) +1);
        password += string.charAt(rand);
    }
    return password;
}

Soy nuevo en el mundo de node.js y socket.io por lo que las preguntas y respuestas que cito a continuación no me han sido de mucha ayuda. Quisiera me pudieran orientar sobre cómo poder lograr algo así, ya que no lo he conseguido hasta el momento. Gracias.

  1. https://stackoverflow.com/questions/7444817/socket-io-chat-with-private-rooms

  2. https://stackoverflow.com/questions/28778881/socket-io-sending-parameter-to-php-file

  3. https://stackoverflow.com/questions/30435673/socket-io-send-message-to-specific-room-client-side

2
  • ¿La idea es chat uno a uno o muchos a muchos?
    – Triby
    Commented el 27 ene. 2020 a las 5:10
  • Sería de uno a uno nada más. Commented el 27 ene. 2020 a las 5:17

1 respuesta 1

1

Esto es parte de un proyecto antiguo y no estoy del todo seguro de que funcione, pero seguramente te dará la idea por dónde comenzar.

Lo primero es que vas a necesitar sesiones, tanto del lado de PHP como de Node.js para identificar usuarios y poder establecer la conversación entre ellos:

var datos = {
    id:'<?php echo $_SESSION['userid']; ?>',
    usuario:'<?php echo $_SESSION['username']; ?>',
    cuarto:'<?php echo $_SESSION['chat_room']; ?>'
    // El cuarto puede ser valor vacío, para crearlo con formulario
    // Puede provenir de $_POST (del paso anterior)
    // O puede ser de $_GET si creaste un listado de cuartos
    // Puedes agregar tantos datos como necesites
};

HTML:

        <!-- socket.io -->
        <script src="/socket.io/socket.io.js"></script>
        <!-- jquery 1.6.4 -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <!-- chat config -->
        <script src="/javascripts/chat.js"></script>
        <div class="roomsOut" id="rooms"></div>

En #rooms insertas el formulario para crear cuarto y la lista de cuartos disponibles.

El cliente (chat.js)

var chatUrl = window.location.origin + ':3200';
var socket = io.connect(chatUrl);

$(document).ready(function(){
    // Iniciar sesión de usuario
    socket.emit('adduser', datos);
    // Mantienes el mismo listener
    // Aunque probablemente debas activarlo / desactivarlo
    // Dependiendo si está en cuarto o no
    $('form#messenger').submit(function(e){
        e.preventDefault(); // prevents page reloading
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
    });
});

function join(room) {
    socket.emit('join', room);
}

function quit(room) {
    socket.emit('quit', room);
}

socket.on('update rooms', function(rooms, current) {
    foreach(rooms as room) {
        if(room == current) {
            // No mostrar enlace
            var link = '<li>' + room + '</li>';
        } else {
            // Crear enlace para unirse al cuarto
            var link = '<a href="#" onclick="join(' + "'" + room + "'" + '); return false;">' + room + '</a>';
        }
        $("#rooms").append(link);
    }
});

socket.on('update chat', function(usuario, mensaje) {
    // usuario: Quién envía el mensaje
    // mensaje: Texto
    // Nombre de quien envió el mensaje
    var texto = '<span class="chat-usuario">' + usuario + '</span>';
    // Mensaje completo
    $("#messages").append('<li>' + texto + mensaje + '</li>';
    // Hacer scroll para que el último mensaje sea visible
    // $("#messages").scrollTop = $("#messages").scrollHeight; // No recuerdo si funciona en jQuery
});

El Servidor (omito la configuración y voy directo con conexiones):

// Usuarios con sesión
var usernames = {};
// Cuartos creados
var rooms = [];


// Inicializar escucha
socket.on('connection', function(sockets) {
    // Conexión de usuario
    sockets.on('adduser', function(data){
    // Guardar datos de usuario
        sockets.username = data.usuario;
        sockets.room = data.cuarto;
        // Agregar id a lista global
        usernames[data.id] = data.usuario;
        // Verificar si existe el cuarto
        var exists = 0;
        var index = 0;
        for(index; index < rooms.length; index++){
           if(rooms[index] == data.cuarto){
               exists++;
               // Sí existe, fin del ciclo
               break;
           }
        }
        // No existe, hay que crearlo
        if(exists == 0) {
            rooms.push(data.cuarto);
        }
        // Unir cliente al cuarto
        sockets.join(data.cuarto);

        // Notificar que el usuario se conectó
        sockets.broadcast.to(cuarto).emit('update chat', 'SISTEMA', username + ' se ha conectado ');
        // Actualizar cuartos
        sockets.emit('update rooms', rooms, cuarto);
        console.log(rooms);
    });

    // Enviar mensaje
    sockets.on('chat message', function (msg) {
        socket.in(sockets.room).emit('update chat', sockets.username, msg);
    });

    // Cambiar de cuarto
    sockets.on('join', function(newroom){
        sockets.leave(sockets.room);
        sockets.join(newroom);
        sockets.emit('update chat', 'SISTEMA', 'te has conectado la sala ' + newroom);
        // Mensaje a cuarto anterior
        sockets.broadcast.to(sockets.room).emit('update chat', 'SISTEMA', sockets.username + ' ha dejado la sala');
        // Actualizar nombre del cuarto actual
        sockets.room = newroom;
        sockets.broadcast.to(newroom).emit('updatechat', 'SISTEMA', sockets.username+' se ha unido a la sala');
        sockets.emit('update rooms', rooms, newroom);
    });

    // when the user disconnects.. perform this
    sockets.on('quit', function(){
        // Eliminar sesión de usuario
        delete usernames[sockets.id];
        // Notificar que el usuario salió
        sockets.broadcast.to(sockets.room).emit('update chat', 'SISTEMA', sockets.username + ' se ha desconectado');
    // Sacar usuario del cuarto
        sockets.leave(sockets.room);
    });
});

Es probable que haya errores, porque aparte de ser un proyecto antiguo, también tuve que adaptar algunas cosas para simplificar.

1
  • Gracias por el ejemplo. Había estado fuera y no pude revisar tu respuesta. Hoy voy a probar a ver si por lo menos me da la idea de lo que necesito hacer y te platico, gracias! Commented el 28 ene. 2020 a las 13:29

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.