hi friends I'm creating a chat in php and nodejs everything works very well so the messages are sent in real time and everything, now what I want to achieve is that when I send the message in Real time show dereho on my screen and on the client's side that my message is displayed on the left side, more or less like facebook or whatssapp, NOTE : in the codigp php I can do it when the page is already loaded but when I send the messages in real time with javascript and the sockets I do not know how to get it to show on the left or right side depending on the case, any help or plis tips !!
THIS IS MY CODE
nodejs server
const http = require('http');
const path = require('path');
const express = require('express');
const connect = require('connect');
const app = express();
const server = app.listen(3000);
const io = require('socket.io').listen(server);
io.on('connection',socket=>{
console.log('usuarios conectados con io');
//esta es la accion que se recive desde el cliente
socket.on('mensaje-cliente',function (data){
console.log(data);
//aqui el servidor la emite el mensaje a todos los clientes
io.sockets.emit('mensaje-servidor', data);
})
})
//voy a establecer un puerto si no tomas el 3000
app.set('port' , process.env.PORT || 3000)
//voy a recivir el puerto
server.listen(app.get('port') ,()=>{
console.log('conectado con el servidor '+app.get('port'))
})
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chat websocket</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<nav class="navbar navbar-light bg-primary">
<a href="" class="navbar-brand mx-auto">WebsocketChat</a>
</nav>
<div class="container">
<div class="col-md-6 mt-4">
<div class="card">
<div class="card-header">
<h4>lets Chat</h4>
</div>
<div id="chat" class="card-body">
<!--AQUI MUESTRO LOS MENSAJES-->
<?php
$amigo_select=mysqli_query($conexion,"SELECT * FROM amigos WHERE de="$yo" ");
$row1=mysqli_fetch_array($amigo_select);
$amigo=$row['para'];
$query=mysqli_query($conexion,"SELECT * FROM mensajes WHERE de="$amigo" ");
while($row=mysqli_fetch_array($query)){?>
<div id="listen">
<?php
if($row['para']==$yo){
//si soy yo que el mensaje se muestre a la derecha
echo"<div syle="float:right;">
$row['mensaje'];?>
<div>";
}else{
//si el mi amigo a la isquierda porfavor
echo"<div syle="float:left;">
$row['mensaje'];?>
<div>"; }
?>
</div>
<?php } ?>
</div>
<form class="card-footer" action="insertar_msg.PHP" method="post" id="message-form">
<div class="input-group">
<input type="text" name="" id="message" class="form-control">
<div class="input-group-append">
<input type="submit" class="btn btn-primary send" name="enviar" id="enviar">
</div>
</div>
</form>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
cliente.js
$(function () {
var sockets = io.connect( 'http://localhost:' );
//obteniendo los elementos del Dom
var formulario = $("#message-form");
var mensajebox = $("#chat");
var mensaje = $("#message");
var enviar = $("#enviar");
formulario.submit( e =>{
e.preventDefault();
//console.log(mensaje.val());
//emitimos mensaje al servidor
socket.emit('mensaje-cliente',mensaje.val());
//limpiar input despues de enviar
mensaje.val("");
});
/*aqui nos toca escuchar el mensaje atraves de la palabra clave del servidor*/
socket.on('mensaje-servidor',function(data){
//aqui elegimos donde mostrar el mensaje del servidor
mensajebox.append(data+'<br>');
});
})