Como usar WEBSOCKET em um chat PHP MYSQL

Boa noite, comecei a pesquisar e querer trabalhar com websocket para atualizar em tempo real um chat que possuo no meu codigo, mas não consegui entender direito o websocket pra fazer a implementação, se alguém puder me ajudar agradeço…Possuo essa parte do codigo que envia a mensagem para outro usuario:

right-col.php

      <?php         $  no_message = false ;      if(isset ($  _GET ['user'])){       $  _GET['user'] = $  _GET['user'] ;   }else{       //user variable is not in the url bar       //so  select the last user, you have sent message     $  q= 'SELECT sender_name, reciever_name FROM messages        WHERE sender_name = "'.$  _SESSION['login'].'"       or reciever_name = "'.$  _SESSION['login'].'"       ORDER BY date_time DESC LIMIT 1';          $  r = mysqli_query($  con, $  q) ;         if($  r){               if(mysqli_num_rows($  r)>0){                   while($  row =mysqli_fetch_assoc($  r)){                        $  sender_name = $  row['sender_name'] ;                        $  reciever_name = $  row['reciever_name'] ;                         if($  _SESSION['login'] == $  sender_name){                             $  _GET['user'] = $  reciever_name ;                        }else{                             $  _GET['user'] = $  sender_name;                        }                   }               }else{                 //this user havent sent any message                 echo 'Não existe menssagens para você' ;                  $  no_message = true;               }         }else{           //query problem           $  q ;         }    }          if($  no_message == false){         $  q="SELECT * FROM messages WHERE              sender_name = '".$  _SESSION ['login']."'             AND reciever_name = '".$  _GET ['user']."'             OR               sender_name = '".$  _GET ['user']."'              AND reciever_name = '".$  _SESSION ['login']."' ";          $  r = mysqli_query($  con, $  q) ;          if($  r){             //query seccessfull           while($  row = mysqli_fetch_assoc($  r)){               $  sender_name = $  row['sender_name'] ;               $  reciever_name = $  row['reciever_name'] ;               $  message = $  row['message_text'] ;                 //check who is the sender of the message               if($  sender_name == $  _SESSION['login']){                  //show the message with grey back                ?>                  <div class="grey-message">                   <a href="#">Eu:</a>                    <p><?php echo $  message; ?></p>                  </div>                 <?php                 }else{                 // show the message with white back                 ?>                  <div class="white-message">                   <a href="#"><?PHP echo $  sender_name;?></a>                    <p><?php echo $  message; ?></P>                </div>                  <?php                }           }          }else{            //query problem           echo $  q ;         }          //end of message        }       ?> <style> #message_text{width: 570px; height: 50px; resize: none;margin-left: 1%;margin-top:1%;} .hid {width:80px;height:50px;background:#233070;border:2px solid #233070;float:right;color:white;margin-right: 3%;margin-top:-50px;}  </style>         <!-- end of messages container //input {padding: 10px 5px; width: 50%;}-->    </div>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    <form method='post' id="message-form">   <textarea class="form-control" id="message_text" placeholder="Escreva sua mensagem aqui!"></textarea>   <button type="submit" class="hid">Enviar</button>   </form>             <!--end of right-col-container --> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="sub_file/jquery-3.1.1.min.js"></script>  <script>   jQuery(document).ready(function($  ) {   $  (document).on('submit', '#message-form', function (e) {     // Importante para previnir o comportamente default de submit do form     // e evitar o reload da página e possiveis duplicidades em requisições     e.preventDefault();      // debug    // alert('Form enviado com ENTER, preparando ajax.');      var url = "sub_file/sending_process.php?user=<?php echo $  _GET['user'];?>";     var data = { message: $  .trim($  ('#message_text').val()) };      $  .post(url, data, function (response) {       $  ("#message_text").val("");        // agora adicione os dados dentro       // o contêiner de mensagens       document.getElementById("messages-container").innerHTML += response;     })     .fail(function () {       alert('Erro ao enviar a mensagem');     });   }); }); </script> 

o sending_process.php

<?php      session_start() ;      require_once("../connection.php");     if(isset($  _SESSION['login']) and isset($  _GET['user'])){          if(isset($  _POST['message'])){             //now check for empty message              if($  _POST['message'] !=''){             //now from here we can insert             //data into the database              $  sender_name = $  _SESSION['login'];             $  reciever_name = $  _GET['user'];             $  message = $  _POST['message'] ;              $  date = date("Y-m-d h:i:sa") ;              $  q = "INSERT INTO messages                (sender_name, reciever_name, message_text, date_time)               VALUES('$  sender_name','$  reciever_name','$  message', '$  date')";               $  r = mysqli_query($  con, $  q) ;                if($  r){                 //message sent                  ?>                  <div class="grey-message">                   <a href="#">Eu:</a>                    <p><?php echo $  message; ?></p>                  </div>                 <?php                 }else{                   //problem in query                   echo $  q;               }               }else{                 echo 'please write something first' ;             }            }else{             echo 'problem with text';          }     }else{          echo 'please login or select a user to send a message';     }   ?> 

eu achei esse trecho utilizando o websocket, tentei implementar no meu, mas não deu certo..

aplicacao.js

<script> window.onload = function() {      // Pegando as referências para os elementos da página.     var form = document.getElementById('mensagem-formulario');     var mensagemTexto = document.getElementById('mensagem');     var listaMensagem = document.getElementById('mensagens');     var socketStatus = document.getElementById('status');     var btnFechar = document.getElementById('close');       // Criando uma nova WebSocket.     var socket = new WebSocket('ws://echo.websocket.org');       // segurando os erros que ocorrerem.     socket.onerror = function(error) {       console.log('erros do WebSocket: ' + error);     };       // Mostrando a mensagem de Conectado quando o WebSocket for aberto.     socket.onopen = function(event) {       socketStatus.innerHTML = 'Conectado com: ' + event.currentTarget.URL;       socketStatus.className = 'open';     };      // Pegando as mensagens enviadas pelo servidor.     socket.onmessage = function(event) {       var mensagem = event.data;       listaMensagem.innerHTML += '<li class="recebida"><span>Recebida:</span>' +                                  mensagem + '</li>';     };      //Mostrando a mensagem de desconectado quando o websocket for fechado.     socket.onclose = function(event) {       socketStatus.innerHTML = 'Disconectando o WebSocket.';       socketStatus.className = 'closed';     };      //Enviando uma mensagem quando o formulário for submetido.     form.onsubmit = function(e) {       e.preventDefault();        // Recuperando a mensagem do textarea.       var mensagem = mensagemTexto.value;        // Enviando a mensagem através do WebSocket.       socket.send(mensagem);        //Adicionando a mensagem para a lista de mensagens.       listaMensagem.innerHTML += '<li class="envia"><span>Enviada:</span>' + mensagem +                                 '</li>';        // Limpando o campo de mensagem.       mensagemTexto.value = '';       return false;     };     //Fechando a conexão WebSocket quando o botão for clicado.     btnFechar.onclick = function(e) {       e.preventDefault();        // Fechando o WebSocket.       socket.close();       return false;     };   };   <script> 

Só quero que essa parte da pagina atualize em tempo real..sou iniciante, já li varios arquivos explicando sobre o websockets mas ta confuso ainda..me ajudem pfv