Geek Answers Handbook

Php based query in real time chat using server sent events. (Many in one system. Not group chat)

I am trying to create a real-time request form on a website using the sent html server events.
I follow this guide as the basis for it

This is what I intend to do based on this tutorial.

On the client side, the user requests a username. This is used as the primary key to uniquely identify the chat log.

The client and server listen for events sent by the server, listening to the following php pages.

When the client presses the submit button, the chat is sent to this php page, which inserts it into the database and issues a username

Client: var serverSource = new EventSource('ServerListener.php');

Server: var clientSource= new EventSource('ClientListener.php');

  • There are two php files for pasting into the chat database from the client side and others for pasting for the response from the server

  • Both of these files also have a different function, when the user sends to chattoserver.php he also notifies the server of the new chat received with the username, he searches for unread lines and extracts it and adds it to the chat window similarly, when the server responds, it sends to chatreplyreceived.php where it writes a database and notifies the client. Therefore, in the event that several clients are listening to this file. When reading the message, the correct client with the username can search the database for replying and adding to the chat log.

Here the dates are displayed correctly on both pages of the list, but the message is not displayed. And the text file contains the sent messages. When checking packages using the Firefox network traffic analysis tool. It contains the unloaded message in the response part. who cannot detect it. What does it mean that I am doing wrong, that the messages do not repeat ?

ServerChatpage

ClientChatpage

ClientTest.php

  <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('input[type=text]').bind("enterKey",function(e){ //alert("Enter"); }); $('input[type=text]').keyup(function(e){ if(e.keyCode == 13) { $(this).trigger("enterKey"); var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementsByTagName("h1").innerHTML = xmlhttp.responseText; //alert("hello"); } } $('div.chat-box-content').append('<div class="clear"></div><span class="right">'+$(this).val()+ '</span>'); xmlhttp.open("GET", "ClientListener.php?Message='"+$(this).val()+"'" , true); xmlhttp.send(); // xmlhttp.open("POST","ClientListener.php",true); // xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // xmlhttp.send("Message='"+$(this).val()+"'"); } }); } ); if(typeof(EventSource) !== "undefined") { var source = new EventSource("ServerListner.php"); source.onmessage = function(event) { //alert("Data Received"); //alert(event.data); //alert(document.getElementsByClassName("chat-box-content").innerHTML); // document.getElementsByClassName("chat-box-content").innerHTML +='<div class="clear"></div><span class="left">'+event.data+ '</span> <br>'; //if(event.data !==''){ $('div.chat-box-content').append('<div class="clear"></div><span class="left">'+event.data+ '</span>'); //} }; } else { document.getElementById("chat-box-content").innerHTML = "Sorry, your browser does not support server-sent events..."; } </script> <style type="text/css"> body { height:3000px } .chat-box { font:normal normal 11px/1.4 Tahoma, Verdana, Sans-Serif; color:#333; width:200px; /* Chatbox width */ border:1px solid #344150; border-bottom:none; background-color:white; position:fixed; right:10px; bottom:0; z-index:9999; -webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, .2); -moz-box-shadow:1px 1px 5px rgba(0, 0, 0, .2); box-shadow:1px 1px 5px rgba(0, 0, 0, .2); } .chat-box > input[type="checkbox"] { display:block; margin:0 0; padding:0 0; position:absolute; top:0; right:0; left:0; width:100%; height:26px; z-index:4; cursor:pointer; opacity:0; filter:alpha(opacity=0); } .chat-box > label { display:block; height:24px; line-height:24px; background-color:#344150; color:white; font-weight:bold; padding:0 1em 1px; } .chat-box > label:before { content:attr(data-collapsed) } .chat-box .chat-box-content { padding:10px; display:none; } /* hover state */ .chat-box > input[type="checkbox"]:hover + label { background-color:#404D5A } /* checked state */ .chat-box > input[type="checkbox"]:checked + label { background-color:#212A35 } .chat-box > input[type="checkbox"]:checked + label:before { content:attr(data-expanded) } .chat-box > input[type="checkbox"]:checked ~ .chat-box-content { display:block } span { display: inline-block; max-width: 200px; background-color: white; padding: 5px; border-radius: 4px; position: relative; border-width: 1px; border-style: solid; border-color: grey; } left { float: left; } span.left:after { content: ""; display: inline-block; position: absolute; left: -8.5px; top: 7px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid white; } span.left:before { content: ""; display: inline-block; position: absolute; left: -9px; top: 7px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid black; } span.right:after { content: ""; display: inline-block; position: absolute; right: -8px; top: 6px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #dbedfe; } span.right:before { content: ""; display: inline-block; position: absolute; right: -9px; top: 6px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid black; } span.right { float: right; background-color: #dbedfe; } .clear { clear: both; } input[type="text"]{ width:96%; margin:1%; }/*INSERT INTO `users`( `userRole`, `userName`, `createdOn`, `emailId`, `is_active`, `password`) VALUES (1,'admin_chat',NOW(),' sdmd@sdmd.com ',1,'123456') ON DUPLICATE KEY */ </style> </head> <body> <div class="chat-box"> <input type="checkbox" /> <label data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label> <div class="chat-box-content"> <span class="left">messmessage</span> <div class="clear"></div> <span class="right">messagemessagemessage</span> <div class="clear"></div> <span class="left">messagemessagsage</span> <div class="clear"></div> <span class="right">messagemessagemessage</span> </div> <input type="text" /> </div> </body> </html>

ClientListener.php

 <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); //header("refresh: 5;"); if (ISSET($_GET['Message'])) { $msg =$_GET['Message']; if(!empty($msg)){ $fp = fopen("_chat.txt", 'a'); fwrite($fp,$msg."\n\n"); fclose($fp); } echo "data: $msg\n\n"; flush(); } ?>

ServerTestPage.php

  <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('input[type=text]').bind("enterKey",function(e){ //alert("Enter"); }); $('input[type=text]').keyup(function(e){ if(e.keyCode == 13) { $(this).trigger("enterKey"); var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementsByTagName("h1").innerHTML = xmlhttp.responseText; //alert("hello"); } } $('div.chat-box-content').append('<div class="clear"></div><span class="right">'+$(this).val()+ '</span>'); xmlhttp.open("GET", "ServerListner.php?Message='"+$(this).val()+"'" , true); xmlhttp.send(); // xmlhttp.open("POST","ServerListner.php",true); /// xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // xmlhttp.send("Message='"+$(this).val()+"'"); } }); } ); if(typeof(EventSource) !== "undefined") { var source = new EventSource("ClientListener.php"); source.onmessage = function(event) { //alert("Data Received"); alert(event.data); //alert(document.getElementsByClassName("chat-box-content").innerHTML); // document.getElementsByClassName("chat-box-content").innerHTML +='<div class="clear"></div><span class="left">'+event.data+ '</span> <br>'; // if(event.data!==''){ console.log(event.data); $('div.chat-box-content').append('<div class="clear"></div><span class="left">'+event.data+ '</span>'); // } }; } else { document.getElementById("chat-box-content").innerHTML = "Sorry, your browser does not support server-sent events..."; } </script> <style type="text/css"> body { height:3000px } .chat-box { font:normal normal 11px/1.4 Tahoma, Verdana, Sans-Serif; color:#333; width:200px; /* Chatbox width */ border:1px solid #344150; border-bottom:none; background-color:white; position:fixed; right:10px; bottom:0; z-index:9999; -webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, .2); -moz-box-shadow:1px 1px 5px rgba(0, 0, 0, .2); box-shadow:1px 1px 5px rgba(0, 0, 0, .2); } .chat-box > input[type="checkbox"] { display:block; margin:0 0; padding:0 0; position:absolute; top:0; right:0; left:0; width:100%; height:26px; z-index:4; cursor:pointer; opacity:0; filter:alpha(opacity=0); } .chat-box > label { display:block; height:24px; line-height:24px; background-color:#344150; color:white; font-weight:bold; padding:0 1em 1px; } .chat-box > label:before { content:attr(data-collapsed) } .chat-box .chat-box-content { padding:10px; display:none; } /* hover state */ .chat-box > input[type="checkbox"]:hover + label { background-color:#404D5A } /* checked state */ .chat-box > input[type="checkbox"]:checked + label { background-color:#212A35 } .chat-box > input[type="checkbox"]:checked + label:before { content:attr(data-expanded) } .chat-box > input[type="checkbox"]:checked ~ .chat-box-content { display:block } span { display: inline-block; max-width: 200px; background-color: white; padding: 5px; border-radius: 4px; position: relative; border-width: 1px; border-style: solid; border-color: grey; } left { float: left; } span.left:after { content: ""; display: inline-block; position: absolute; left: -8.5px; top: 7px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid white; } span.left:before { content: ""; display: inline-block; position: absolute; left: -9px; top: 7px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid black; } span.right:after { content: ""; display: inline-block; position: absolute; right: -8px; top: 6px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #dbedfe; } span.right:before { content: ""; display: inline-block; position: absolute; right: -9px; top: 6px; height: 0px; width: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid black; } span.right { float: right; background-color: #dbedfe; } .clear { clear: both; } input[type="text"]{ width:96%; margin:1%; }/*INSERT INTO `users`( `userRole`, `userName`, `createdOn`, `emailId`, `is_active`, `password`) VALUES (1,'admin_chat',NOW(),' sdmd@sdmd.com ',1,'123456') ON DUPLICATE KEY */ </style> </head> <body> <div class="chat-box"> <input type="checkbox" /> <label data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label> <div class="chat-box-content"> <span class="left">messmessage</span> <div class="clear"></div> <span class="right">messagemessagemessage</span> <div class="clear"></div> <span class="left">messagemessagsage</span> <div class="clear"></div> <span class="right">messagemessagemessage</span> </div> <input type="text" /> </div> </body> </html>

Serverlistener

  <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); //header("refresh: 3;"); if (ISSET($_GET['Message'])) { $msg =$_GET['Message']; if(!empty($msg)){ $fp = fopen("_chat.txt", 'a'); fwrite($fp,$msg."\n\n"); fclose($fp); } echo "data: $msg\n\n"; flush(); } ?>
+6
source share
1 answer

If you need information based on your approach at present, this is simply wrong, you should look at the WebSockets API and Tutorial

however php is the wrong language for the server system, in both cases you must have a client survey for new information, secondly, this is not the true attitude of the client server.

On the client side, the user requests a username. This is used as a primarykey to uniquely identify the chat log.

This may not be right. The primary key should never be the same, so if you use a database, the username cannot be the primary key, most people use AUTO_INCREMENT in the database for the primary key.

If you use jQuery, why are you using the native XMLHttpRequest client and not jQuery XHR ?

 var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementsByTagName("h1").innerHTML = xmlhttp.responseText; //alert("hello"); } } $('div.chat-box-content').append('<div class="clear"></div><span class="right">'+$(this).val()+ '</span>'); xmlhttp.open("GET", "ClientListener.php?Message='"+$(this).val()+"'" , true); xmlhttp.send();

Before doing something, this complex does research and, more confidently, you can use the languages ​​you need. if you are not at the point where you can read the tutorial in native JavaScript and understand how to translate it into a JavaScript framework, you are not ready to use it.

0
source

More articles:


All Articles