me encuentro aquí en esta oportunidad para plantear un pequeño problema que me vienen dando vuelta hace tiempo.
Resulta que estoy desarrollando un pequeño chat, privado, 1 a 1. La interfaz es sencilla y cuenta con un select y option para cambiar de usuario.
Utilice websocket, pero para guardar e insertar los datos correspondientes utilizo ajax.
El problema es que al momento de cambiar de canal (al cambiar una opción distinta), no reconoce el cambio de opción.
Les dejo una imagen: Imagen de diseño para entender mejor
Luego al enviar cualquier mensaje se hace una petición a "pagina.php" en el cual se guardan, pero el problema radica en que no reconoce el chat_room id, que es importante para diferenciar los canales existentes.
Les dejo el código aquí:
index.php (al seleccionar la opción "1", pagina.php recibe correctamente el valor, pero al seleccionar "2" sigue reconociendo "1"). favor vean la petición ajax hecha en
var cod = $('#cod').val();
$.post('pagina.php',{name:mensaje,cr:cod},function(){
})
ahora si, el index.php:
<?php
session_start();
if(!isset($_SESSION["user"])){
header("location:../login.php");
}
<html lang="en">
<head>
<?php
header("Access-Control-Allow-Origin: *");
?>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<title>Chat con nodejs + socket.io</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2>Websocket & Socket.io Chat</h2>
</div>
<script type="text/javascript">
var socket = io.connect( 'http://localhost:1334' );
//var socket = io();
$(function(){
$("form").submit(function(){
var mensaje = $("#msg").val();
if(mensaje=='') return false;
if(mensaje==' ') return false;
//evento message en el server nodejs
console.log(mensaje)
var cod = $('#cod').val();
$.post('pagina.php',{name:mensaje,cr:cod},function(){
})
socket.emit('message',mensaje);
$("#msg").val('').focus();
return false;
});
$("#channel").change(function(){
socket.emit('change channel',$("#channel").val());
});
});
socket.on('message',function(msg){
$('#message').append($('<p><strong>' + '<?echo $_SESSION["user"]?>' + ': </strong>' + msg + '</p>'));
$('.chat-window').scrollTop($('#message').height());
});
socket.on('change channel',function(channel){
$("#message").html('').append($('<li>').text('system : Bienvenido al Canal '+channel+' !'));
});
</script>
<div class="col-md-12">
<div class="chat-window">
<div id="message">
</div>
</div>
<div id="controls">
<form action="" id="form" method="POST">
<select name="channel" id="channel">
<div class="col-md-12">
<option id="cod" name="cr" value="1">1</option>
<option id="cod" name="cr" value="2">2</option>
</select>
<div class="col-md-12">
<div class="input-group enter-chat-message">
<input type="text" id="msg" name="name" class="form-control" placeholder="Chat Message...">
<input class="input-group-addon submit-chat-message" type="submit" id="btn" name="submit" value="Enviar">
</div>
</div>
</div>
</form>
</div>
</div></div></div></div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
pagina.php (cuando le hago un echo al $_POST['cr'];
independientemente si en el index selecciono el 1 o el 2, siempre reconoce el "1")
<?
session_start();
if(!isset($_SESSION["user"])){
header("location:../login.php");
}
require "../config.php";
$conn = mysqli_connect($hostname,$username,$passw,$database);
$q1 = mysqli_query($conn,"SELECT * FROM usuario2 WHERE Usuario = '".$user."'");
while($row = mysqli_fetch_assoc($q1)){
$id = mysqli_real_escape_string($conn, $row['ID']);
}
$user=$_SESSION["user"];
$cod = $_POST['cr'];
$mensaje = $_POST['name'];
echo $cod;
$sql4 = "INSERT INTO chat2 (cr_id, username, mensaje) VALUES('$cod', '$user', '$mensaje')";
$resultado = mysqli_query($conn, $sql4);
?>
chat.js (esta es la esencia para que funcione el websocket).
var express = require( 'express' );
var http = require('http');
var socket = require('socket.io');
var bodyParser = require('body-parser')
var PORT = process.env.PORT || 8080;
var fs= require('fs');
var app = express();
var server = http.createServer( app );
var io = socket.listen( server );
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
io.on('connection',function(socket){
console.log("usuario id : %s",socket.id);
var channel = 'channel-a';
//socket.broadcast.emit('message','El usuario '+socket.id+' se ha conectado!','System');
socket.join(channel);
socket.on('message',function(msj){
//io.emit('message',msj,socket.id); //envia a todos los usuarios,canales...
io.sockets.in(channel).emit('message',msj,socket.id); //enviar a todos del canal
//socket.broadcast.to(channel).emit('message',msj,socket.id); //enviar a todos del canal menos a mi
});
socket.on('disconnect',function(){
console.log("Desconectado : %s",socket.id);
});
socket.on('change channel',function(newChannel){
socket.leave(channel);
socket.join(newChannel);
channel = newChannel;
socket.emit('change channel',newChannel);
});
});
server.listen( 1334, function() {
console.log('lisning to port 1334');
});
Toda ayuda es recibida, muchas gracias! Probablemente el error sea algo básico pero admito que me ha superado.
<option id="cod" name="cr" value="1">1</option> <option id="cod" name="cr" value="2">2</option>
en el DOM no puede haber dos elementos con el mismo id. Y además nunca te tomará el valor correcto, toma el valor del primerid="cod"
que encuentra. Puedes quitarle los id a losoption
y ponerselo alselect
, entonces te debería funcionar:<select name="channel" id="cod"> <div class="col-md-12"> <option name="cr" value="1">1</option> <option name="cr" value="2">2</option> </select>
o bien usaschannel
. – A. Cedano el 21 jun. 18 a las 1:56