Зашифрованные сообщения с RSA и PHP - PullRequest
Новая
       52

Зашифрованные сообщения с RSA и PHP

0 голосов
/ 20 марта 2020

Я новичок в разработке в php, и я студент, моя цель - разработать зашифрованный чат с сервером на одной стороне, который шифрует параметры отправки сообщений через сокет, и на стороне клиента, которая дешифрует сообщение значениями.

Я уже выполнил алгоритм шифрования RSA. html, но не могу получить значение сокета на стороне клиента RSAde c. html.

На клиенте со стороны мы отправляем поля n и d и зашифрованное сообщение для серверной части.

И я знаю, как записать их значения на их расшифрованной стороне на стороне клиента, но я не сделал этого в своем коде.

Я сделал клиент только с PHP clientvxx. php В противном случае, в форме чата, это 2-й шаг. Я также нашел способ общаться в JavaScript, он работает, но вы должны получить сообщение, кодирующее и декодирующее его, я не могу этого сделать.

Я использовал: socket_send () для отправки пакета socket_recv I невозможно получить

Примечание: у вас есть право менять языки программирования, например, на JAVA или даже на JAVASCRIPT / PHP;)

Вот мои коды: RSA код части передатчика: 

<!DOCTYPE html>
<html>
 <link rel="stylesheet" type="text/css" href="css_crypto.css">
 <head>
      <title>Projet tutoré </title>
 </head>
 <body>
        <div id="page">
            <div id="entete">
                Projet tutoré du semestre 4 <br><br>
                Chiffrement d'un texte via RSA
            </div>
<div  id="rsa_titre">
</div>
<table border="0">
<tbody><tr>
<td>
<form method="POST" name="FormClef">
<table cellspacing="2" border="0">
<tbody><tr>
<td align="CENTER">p : <input type="TEXT" size="6" name="P" value="1511"></td>
<td align="CENTER">q : <input type="TEXT" size="6" name="Q" value="907"></td>
<td align="CENTER">e : <input type="TEXT" size="6" name="E" value="377"></td>
<td align="CENTER">Taille des blocs : <input type="TEXT" size="2" name="Groupage" value="3"></td>
</tr>
<tr>
<td colspan="2" align="CENTER">n = p·q : <input type="TEXT" size="12" name="N"></td>
<td align="CENTER">d : <input type="TEXT" size="12" name="D"></td>
</tr>
<tr>
<td></td>

</tr>
<tr>
<td>Table de conversion</td>
<td colspan="4">
<input type="TEXT" size="70" name="TableConv"><br>
</td>
</tr>
</tbody></table>
</form>
<form method="POST" name="FormCodage">
<table>
<tbody><tr>
<td >Message clair<br>
<br>
<td colspan="4" >
<textarea name="Texte" rows="6" cols="70" wrap="HARD">texte clair</textarea>
</td>
</tr>
<tr>
<td></td>
              <td colspan="4" align="CENTER"> 
                <table width="80%" cellspacing="1" cellpadding="1" border="0">
                  <tbody><tr>
                    <td>
                      <input type="BUTTON" name="Code" value="Chiffrer" onclick="Encode()">
                    </td>

                    <td>
                      <input type="BUTTON" value="Effacer" onclick="FormCodage.Texte.value=''; FormCodage.Crypte.value=''" name="BUTTON">
                    </td>
                  </tr>
                </tbody></table>
              </td>
</tr>
<tr>
<td>Message chiffré<br>
<br>
<td colspan="4">
<textarea name="Crypte" rows="6" cols="70" wrap="SOFT"></textarea>
</td>
</tr>
</tbody></table>
</form>
</td></tr></tbody></table>


<script>

var CodageGroupSize = 0;
var CodageTableChar = "";


    CodageTableChar = "0123456789 abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ&~#|*+-\\/=%!:;?,.<>'àâçéèêëïîöôüûù" + '"';
    FormClef.TableConv.value = CodageTableChar;

function standard(entree)
{
  alphabet= '0123456789';
  longueur = entree.length;

  entree_standard='';
  for (i=0; i<longueur; i++)
  {
    if (alphabet.indexOf(entree.charAt(i))!=-1)
    {
      entree_standard += entree.charAt(i)
    }
  }
  return entree_standard;
}


// calcul les différentes clefs nécessaires

  p = (FormClef.P.value == "") ? 0 : FormClef.P.value;
  q = (FormClef.Q.value == "") ? 0 : FormClef.Q.value;
  n = p * q;
  FormClef.N.value = parseFloat( n);
  Euler = n - p - q + 1;

  // Recherche au coup par coup
  e = (FormClef.E.value == "") ? 0 : FormClef.E.value;
  TmpNe = 1;
  d = 1;
  while
   (((d * e) % Euler) != 1)
    {
    TmpNe += 1;
    d = Math.ceil( TmpNe * Euler / e);
    };
  FormClef.D.value = parseFloat(d);

  // vérification si codage sera valable
  CodageGroupSize = FormClef.Groupage.value;
  if (CodageTableChar.length*Math.pow(100, CodageGroupSize - 1) > n)
    {
    alert("P ou Q risquent d'être trop petits pour un chiffrement valable !");
    };



function ValeurChar(Lettre)
  {
  return (CodageTableChar.indexOf(Lettre, 0));
  };


// Calcul le modulo "Modulo" de "Base" a la puissance "Exposant"
function ModuloDexpo(Base, Exposant, Modulo)
  {
  var ModuloBase2 = new Array();

  // Niveau de puissance de 2 à considérer
  ModuloLevel = Math.max(Math.floor((Math.log(Exposant) / 0.6931471805599)), 1);

  // Préparation du tableau de transcodage
  ModuloBase2[ 0] = Base % Modulo;
  for
   ( Level = 1; Level <= ModuloLevel; Level++)
     {
     ModuloBase2[ Level] = ( ModuloBase2[ Level - 1] * ModuloBase2[ Level - 1]) % Modulo;
     };

  // Utilisation pour décomposition en utilisant le tableau
  ExpoDec = Exposant;
  Valeur = 1;
  Level = ModuloLevel;
  while
   (ExpoDec > 0)
     {
     if
      (ExpoDec >= Math.pow(2, Level))
       {
       Valeur = (Valeur * ModuloBase2[ Level]) % Modulo;
       ExpoDec -= Math.pow(2, Level--);
       }
      else
       {
       Level--
       };
     }
  return Valeur
  };


function Encodage(Message, E, N)
  {
  messageNum="";
  PreSize = Math.ceil(Math.log(N) / Math.LN10);
  TailleGroupe = parseInt(FormClef.Groupage.value)
  CodageTableChar = FormClef.TableConv.value;
  for(k=0; k<Message.length; k++) {
    chiffre=ValeurChar(Message.charAt(k))
    if(parseInt(chiffre)<10) {chiffre="0"+chiffre};
    messageNum+=chiffre
    }
    while(messageNum.length%TailleGroupe>0){messageNum="0"+messageNum}
    MessageCode="";
    for(k=0; k<messageNum.length; k=k+TailleGroupe) {
        GroupeValue=parseInt(messageNum.substring(k,k+TailleGroupe),10)
        // chiffre le groupe
        GroupePreCode = ModuloDexpo(GroupeValue, E, N);
    xx=GroupePreCode.toString()
    while(xx.length<PreSize) {GroupePreCode="0"+GroupePreCode;xx=GroupePreCode.toString()}
        MessageCode += GroupePreCode
        MessageCode += " "
      };
  return MessageCode;
  };





function Encode()
  {
  FormCodage.Crypte.value = Encodage( FormCodage.Texte.value, FormClef.E.value, FormClef.N.value);
  }; 




function cadenas(reponse)
{
  if (reponse.charAt(6)==4) {document.location = "../corriges/"+reponse+".html"}
  else
  document.location = "../corriges/"+reponse+".nb"  
}

function choisir(adresse)
{ 
  document.location=adresse
}
</script>

</html>
<?php 
$sock = socket_create(AF_INET, SOCK_STREAM, SOL_TCP)
// test
$nvalue=1370477;
$dvalue=112493;
$encmsg=0582724 0218576 0007960 0218576 0700989 1259587 0030253 0767384 ;



$len = strlen($nvalue->toString(1));
$sendMsg = socket_send($sock, $nvalue->toString(1), $len, MSG_DONTROUTE);


$len = strlen($dvalue->toString(1));
$sendMsg = socket_send($sock, $dvalue->toString(1), $len, MSG_DONTROUTE);


$len = strlen($encmsg->toString(1));
$sendMsg = socket_send($sock, $encmsg->toString(1), $len, MSG_DONTROUTE);

socket_close($sock);

?>

clientvxx. php с декодируемой частью приемника RSADE C. html: получает выходные данные сокета, закодированные в php: 

<?php
    // on crée la socket
    // pour IPv4
    // pour des flux
    // pour le protocole TCP
    $socket_client = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);

    echo("La valeur de l'identifiant de la socket : <br>");
    echo($socket_client);


    // il faut faire un bind de notre socket
    $err = socket_bind($socket_client, "34.229.26.42", 23457);

    if ($err === TRUE)
    {
        echo("<br>Lien cree<br>");
    }


    // on se connecte au serveur
    $err = socket_connect($socket_client, "34.229.26.42", 23456);

    if ($err === TRUE)
    {
        echo("Connection cree<br>");
    }
    else
    {
        echo ($err);
    }

    $msg = 'test';
    $taille = strlen($msg);
    echo($taille);
    echo($nvalue);
echo "Lecture de la réponse:\n\n";
$buf = 'Ceci est mon buffer.';
if (false !== ($bytes = socket_recv($socket_client, $buf, 2048, MSG_WAITALL))) {
    echo "$bytes octets lus depuis socket_recv(). Fermeture du socket...";
} else {
    echo "socket_recv() a échoué; raison: " . socket_strerror(socket_last_error($socket)) . "\n";
}   

    if (socket_recv($sock, $buf, 2045, MSG_WAITALL) === FALSE) {
        $errorcode = socket_last_error();
        $errormsg = socket_strerror($errorcode);
        die("Could not receive data: [{$errorcode}] {$errormsg} \n");
    }
    //print the received message
    $visual = $buf;

    // ensuite on envoi le message
    // l'identifiant de la socket emetrice
    // le message
    // la longueur du message
    // les options
    // l'adresse IP destinatrice
    // le port destinnataire
    if(socket_send($socket_client, $msg, $taille, 0x100) !== FALSE)
        echo ("Message envoye correctement");

    //on ferme la socket
    socket_close($socket_client);

?>
<!DOCTYPE html>
<html>
 <head>
      <title>Projet tutoré </title>
 </head>
 <body>
        <div id="page">
            <div id="entete">
                Projet tutoré du semestre 4 <br><br>

            </div>
<div  id="rsa_titre">
Chiffrement par RSA
</div>


<table border="0">
<tbody><tr>
<td>
<form method="POST" name="FormClef">
<table cellspacing="2" border="0">
<tbody><tr>
<td align="CENTER">p : <input type="TEXT" size="6" name="P" value="1511"></td>
<td align="CENTER">q : <input type="TEXT" size="6" name="Q" value="907"></td>
<td align="CENTER">e : <input type="TEXT" size="6" name="E" value="377"></td>
<td align="CENTER">Taille des blocs : <input type="TEXT" size="2" name="Groupage" value="3"></td>
</tr>
<tr>

<td colspan="2" align="CENTER">n = p·q : <input type="TEXT" size="12" name="N"></td>
<td align="CENTER">d : <input type="TEXT" size="12" name="D"></td>
</tr>
<tr>
<td></td>

</tr>
<tr>
<td>Table de conversion</td>
<td colspan="4">
<input type="TEXT" size="70" name="TableConv"><br>
</td>
</tr>
</tbody></table>
</form>
<form method="POST" name="FormCodage">
<table>
<tbody><tr>
<td >Message clair<br>
<br>
<td colspan="4" >
<textarea name="Texte" rows="6" cols="70" wrap="HARD">texte clair</textarea>
</td>
</tr>
<tr>
<td></td>
              <td colspan="4" align="CENTER"> 
                <table width="80%" cellspacing="1" cellpadding="1" border="0">
                  <tbody><tr>

                    <td>
                      <input type="BUTTON" name="Decode" value="Déchiffrer" onclick="Decoder()">
                    </td>
                    <td>
                      <input type="BUTTON" value="Effacer" onclick="FormCodage.Texte.value=''; FormCodage.Crypte.value=''" name="BUTTON">
                    </td>
                  </tr>
                </tbody></table>
              </td>
</tr>
<tr>
<td>Message chiffré<br>
<br>
<td colspan="4">
<textarea name="Crypte" rows="6" cols="70" wrap="SOFT"></textarea>
</td>
</tr>
</tbody></table>
</form>
</td></tr></tbody></table>


<script>

var CodageGroupSize = 0;
var CodageTableChar = "";



    CodageTableChar = "0123456789 abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ&~#|*+-\\/=%!:;?,.<>'àâçéèêëïîöôüûù" + '"';
    FormClef.TableConv.value = CodageTableChar;

function standard(entree)
{
  alphabet= '0123456789';
  longueur = entree.length;

  entree_standard='';
  for (i=0; i<longueur; i++)
  {
    if (alphabet.indexOf(entree.charAt(i))!=-1)
    {
      entree_standard += entree.charAt(i)
    }
  }
  return entree_standard;
}


// calcul les différentes clefs nécessaires


function ValeurChar(Lettre)
  {
  return (CodageTableChar.indexOf(Lettre, 0));
  };


// Calcul le modulo "Modulo" de "Base" a la puissance "Exposant"
function ModuloDexpo(Base, Exposant, Modulo)
  {
  var ModuloBase2 = new Array();

  // Niveau de puissance de 2 à considérer
  ModuloLevel = Math.max(Math.floor((Math.log(Exposant) / 0.6931471805599)), 1);

  // Préparation du tableau de transcodage
  ModuloBase2[ 0] = Base % Modulo;
  for
   ( Level = 1; Level <= ModuloLevel; Level++)
     {
     ModuloBase2[ Level] = ( ModuloBase2[ Level - 1] * ModuloBase2[ Level - 1]) % Modulo;
     };

  // Utilisation pour décomposition en utilisant le tableau
  ExpoDec = Exposant;
  Valeur = 1;
  Level = ModuloLevel;
  while
   (ExpoDec > 0)
     {
     if
      (ExpoDec >= Math.pow(2, Level))
       {
       Valeur = (Valeur * ModuloBase2[ Level]) % Modulo;
       ExpoDec -= Math.pow(2, Level--);
       }
      else
       {
       Level--
       };
     }
  return Valeur
  };




function Decodage(MessageCode, D, E, N)
  {
  continu=standard(MessageCode)
  TailleGroupe = FormClef.Groupage.value;
  CodageTableChar = FormClef.TableConv.value;
  PreSize = Math.ceil(Math.log(N) / Math.LN10);
  nombre = "";
  n=0;
  while(continu.length > 0)
    {
    GroupeCode = parseInt(continu.substring(0, PreSize), 10);
    continu = continu.substring(PreSize, continu.length);
    // déchiffre le groupe
    GroupeLettre = ModuloDexpo(GroupeCode, D, N);
    if (n>0) {
       xx=GroupeLettre.toString()
       while(xx.length<TailleGroupe){
        GroupeLettre="0"+GroupeLettre;
        xx=GroupeLettre.toString()
        }
     }
    n++
    nombre += GroupeLettre;
    }
  Message="";
  for(k=0; k<nombre.length; k=k+2) {
    lettre=parseInt(nombre.substring(k,k+2),10)
    Message += CodageTableChar.charAt(lettre)
    };
  return Message;
  };




function Decoder()
  {
  FormCodage.Texte.value = Decodage( FormCodage.Crypte.value, FormClef.D.value, FormClef.E.value, FormClef.N.value);
  }; 

</script>

</html>

client.php javascript : 
<html>
<head>
    <style>
    body{width:600px;font-family:calibri;}
    .error {color:#FF0000;}
    .chat-connection-ack{color: #26af26;}
    .chat-message {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;
    }
    #btnSend {background: #26af26;border: #26af26 1px solid;    border-radius: 4px;color: #FFF;display: block;margin: 15px 0px;padding: 10px 50px;cursor: pointer;
    }
    #chat-box {background: #fff8f8;border: 1px solid #ffdddd;border-radius: 4px;border-bottom-left-radius:0px;border-bottom-right-radius: 0px;min-height: 300px;padding: 10px;overflow: auto;
    }
    .chat-box-html{color: #09F;margin: 10px 0px;font-size:0.8em;}
    .chat-box-message{color: #09F;padding: 5px 10px; background-color: #fff;border: 1px solid #ffdddd;border-radius:4px;display:inline-block;}
    .chat-input{border: 1px solid #ffdddd;border-top: 0px;width: 100%;box-sizing: border-box;padding: 10px 8px;color: #191919;
    }
    </style>    
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>  
    function showMessage(messageHTML) {
        $('#chat-box').append(messageHTML);
    }

    $(document).ready(function(){
        var websocket = new WebSocket("ws://34.229.26.42:23456/web/php-socket.php"); 
        websocket.onopen = function(event) { 
            showMessage("<div class='chat-connection-ack'>Connection is established!</div>");       
        }
        websocket.onmessage = function(event) {
            var Data = JSON.parse(event.data);
            showMessage("<div class='"+Data.message_type+"'>"+Data.message+"</div>");
            $('#chat-message').val('');
        };

        websocket.onerror = function(event){
            showMessage("<div class='error'>Problem due to some Error</div>");
        };
        websocket.onclose = function(event){
            showMessage("<div class='chat-connection-ack'>Connection Closed</div>");
        }; 

        $('#frmChat').on("submit",function(event){
            event.preventDefault();
            $('#chat-user').attr("type","hidden");      
            var messageJSON = {
                chat_user: $('#chat-user').val(),
                chat_message: $('#chat-message').val()
            };
            websocket.send(JSON.stringify(messageJSON));
        });
    });




    </script>
    </head>
    <body>
        <form name="frmChat" id="frmChat">
            <div id="chat-box"></div>
            <input type="text" name="chat-user" id="chat-user" placeholder="Name" class="chat-input" required />
            <input type="text" name="chat-message" id="chat-message" placeholder="Message"  class="chat-input chat-message" required />
            <input type="submit" id="btnSend" name="send-chat-message" value="Send" >
        </form>
</body>
</html>

phpsocket и часть обработчика сокетов обработчика классов:

phpsocket. php: 

<?php
define('HOST_NAME',"localhost"); 
define('PORT',"23456");
$null = NULL;

require_once("class.chathandler.php");
$chatHandler = new ChatHandler();

$socketResource = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_set_option($socketResource, SOL_SOCKET, SO_REUSEADDR, 1);
socket_bind($socketResource, 0, PORT);
socket_listen($socketResource);

$clientSocketArray = array($socketResource);
while (true) {
    $newSocketArray = $clientSocketArray;
    socket_select($newSocketArray, $null, $null, 0, 10);

    if (in_array($socketResource, $newSocketArray)) {
        $newSocket = socket_accept($socketResource);
        $clientSocketArray[] = $newSocket;

        $header = socket_read($newSocket, 1024);
        $chatHandler->doHandshake($header, $newSocket, HOST_NAME, PORT);

        socket_getpeername($newSocket, $client_ip_address);
        $connectionACK = $chatHandler->newConnectionACK($client_ip_address);

        $chatHandler->send($connectionACK);

        $newSocketIndex = array_search($socketResource, $newSocketArray);
        unset($newSocketArray[$newSocketIndex]);
    }

    foreach ($newSocketArray as $newSocketArrayResource) {  
        while(socket_recv($newSocketArrayResource, $socketData, 1024, 0) >= 1){
            $socketMessage = $chatHandler->unseal($socketData);
            $messageObj = json_decode($socketMessage);

            $chat_box_message = $chatHandler->createChatBoxMessage($messageObj->chat_user, $messageObj->chat_message);
            $chatHandler->send($chat_box_message);
            break 2;
        }

        $socketData = @socket_read($newSocketArrayResource, 1024, PHP_NORMAL_READ);
        if ($socketData === false) { 
            socket_getpeername($newSocketArrayResource, $client_ip_address);
            $connectionACK = $chatHandler->connectionDisconnectACK($client_ip_address);
            $chatHandler->send($connectionACK);
            $newSocketIndex = array_search($newSocketArrayResource, $clientSocketArray);
            unset($clientSocketArray[$newSocketIndex]);         
        }
    }
}

socket_close($socketResource);

обработчик классов. php: 

<?php
class ChatHandler {
    function send($message) {
        global $clientSocketArray;
        $messageLength = strlen($message);
        foreach($clientSocketArray as $clientSocket)
        {
            @socket_write($clientSocket,$message,$messageLength);
        }
        return true;
    }

    function unseal($socketData) {
        $length = ord($socketData[1]) & 127;
        if($length == 126) {
            $masks = substr($socketData, 4, 4);
            $data = substr($socketData, 8);
        }
        elseif($length == 127) {
            $masks = substr($socketData, 10, 4);
            $data = substr($socketData, 14);
        }
        else {
            $masks = substr($socketData, 2, 4);
            $data = substr($socketData, 6);
        }
        $socketData = "";
        for ($i = 0; $i < strlen($data); ++$i) {
            $socketData .= $data[$i] ^ $masks[$i%4];
        }
        return $socketData;
    }

    function seal($socketData) {
        $b1 = 0x80 | (0x1 & 0x0f);
        $length = strlen($socketData);

        if($length <= 125)
            $header = pack('CC', $b1, $length);
        elseif($length > 125 && $length < 65536)
            $header = pack('CCn', $b1, 126, $length);
        elseif($length >= 65536)
            $header = pack('CCNN', $b1, 127, $length);
        return $header.$socketData;
    }

    function doHandshake($received_header,$client_socket_resource, $host_name, $port) {
        $headers = array();
        $lines = preg_split("/\r\n/", $received_header);
        foreach($lines as $line)
        {
            $line = chop($line);
            if(preg_match('/\A(\S+): (.*)\z/', $line, $matches))
            {
                $headers[$matches[1]] = $matches[2];
            }
        }

        $secKey = $headers['Sec-WebSocket-Key'];
        $secAccept = base64_encode(pack('H*', sha1($secKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));
        $buffer  = "HTTP/1.1 101 Web Socket Protocol Handshake\r\n" .
        "Upgrade: websocket\r\n" .
        "Connection: Upgrade\r\n" .
        "WebSocket-Origin: $host_name\r\n" .
        "WebSocket-Location: ws://$host_name:$port/demo/shout.php\r\n".
        "Sec-WebSocket-Accept:$secAccept\r\n\r\n";
        socket_write($client_socket_resource,$buffer,strlen($buffer));
    }

    function newConnectionACK($client_ip_address) {
        $message = 'New client ' . $client_ip_address.' joined';
        $messageArray = array('message'=>$message,'message_type'=>'chat-connection-ack');
        $ACK = $this->seal(json_encode($messageArray));
        return $ACK;
    }

    function connectionDisconnectACK($client_ip_address) {
        $message = 'Client ' . $client_ip_address.' disconnected';
        $messageArray = array('message'=>$message,'message_type'=>'chat-connection-ack');
        $ACK = $this->seal(json_encode($messageArray));
        return $ACK;
    }

    function createChatBoxMessage($chat_user,$chat_box_message) {
        $message = $chat_user . ": <div class='chat-box-message'>" . $chat_box_message . "</div>";
        $messageArray = array('message'=>$message,'message_type'=>'chat-box-html');
        $chatMessage = $this->seal(json_encode($messageArray));
        return $chatMessage;
    }
}
?>

client. php за javascript и чат в реальном времени: 

<html>
<head>
    <style>
    body{width:600px;font-family:calibri;}
    .error {color:#FF0000;}
    .chat-connection-ack{color: #26af26;}
    .chat-message {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;
    }
    #btnSend {background: #26af26;border: #26af26 1px solid;    border-radius: 4px;color: #FFF;display: block;margin: 15px 0px;padding: 10px 50px;cursor: pointer;
    }
    #chat-box {background: #fff8f8;border: 1px solid #ffdddd;border-radius: 4px;border-bottom-left-radius:0px;border-bottom-right-radius: 0px;min-height: 300px;padding: 10px;overflow: auto;
    }
    .chat-box-html{color: #09F;margin: 10px 0px;font-size:0.8em;}
    .chat-box-message{color: #09F;padding: 5px 10px; background-color: #fff;border: 1px solid #ffdddd;border-radius:4px;display:inline-block;}
    .chat-input{border: 1px solid #ffdddd;border-top: 0px;width: 100%;box-sizing: border-box;padding: 10px 8px;color: #191919;
    }
    </style>    
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>  
    function showMessage(messageHTML) {
        $('#chat-box').append(messageHTML);
    }

    $(document).ready(function(){
        var websocket = new WebSocket("ws://34.229.26.42:23456/web/php-socket.php"); 
        websocket.onopen = function(event) { 
            showMessage("<div class='chat-connection-ack'>Connection is established!</div>");       
        }
        websocket.onmessage = function(event) {
            var Data = JSON.parse(event.data);
            showMessage("<div class='"+Data.message_type+"'>"+Data.message+"</div>");
            $('#chat-message').val('');
        };

        websocket.onerror = function(event){
            showMessage("<div class='error'>Problem due to some Error</div>");
        };
        websocket.onclose = function(event){
            showMessage("<div class='chat-connection-ack'>Connection Closed</div>");
        }; 

        $('#frmChat').on("submit",function(event){
            event.preventDefault();
            $('#chat-user').attr("type","hidden");      
            var messageJSON = {
                chat_user: $('#chat-user').val(),
                chat_message: $('#chat-message').val()
            };
            websocket.send(JSON.stringify(messageJSON));
        });
    });




    </script>
    </head>
    <body>
        <form name="frmChat" id="frmChat">
            <div id="chat-box"></div>
            <input type="text" name="chat-user" id="chat-user" placeholder="Name" class="chat-input" required />
            <input type="text" name="chat-message" id="chat-message" placeholder="Message"  class="chat-input chat-message" required />
            <input type="submit" id="btnSend" name="send-chat-message" value="Send" >
        </form>
</body>
</html>

Спасибо за все, за чтение и ответы!

...