0

So I am making a chatroom, and the way I currently have it set up is that when someone hits the send button, it writes the message to a log file. A separate frame in the same window is set to echo the contents of log.txt via file_get_contents('log.txt') on a 2 second refresh loop (<meta http-equiv="refresh" content="2"/>). I could leave it like this, but I don't want to overload the site. I have thought of a better solution and that is to reload the messages window for all connected users whenever someone hits the send button.

Here is the code that controls that button:

<?php
session_start();
echo "<html>";
echo "<head></head> <body>";
echo "<form action='newmessage.php', method='POST'>";
echo "<input type='text' name='message' style='background-color:#202020; color:#FFFFFF;' required minlength='1' maxlength='5000' size='125'/>";
echo "<input type='submit' name='Send' value='Send' style='background-color:#4a4a4a; color:#FFFFFF;'/>";
echo "</form>";
if (ISSET($_POST['message'])) {
$file = "log.txt";
$handle = fopen($file, "a");
fwrite($handle, $_POST['message']);
//
//
//
//
// Insert global page reload code here
//
//
//
//
}
echo "</form>";
echo "</body>";
echo "</html>";
?>

So how would I do this? I am basically a complete php noob, so if I am missing something obvious, please let me know.

Best regards,

Adi

Adi B.
  • 37
  • 4
  • 3
    It would be less of a server load issue, and more of a UI issue. Do you really want the user's browser to refresh every 2 seconds? That would upset the user. Instead, look into ajax calls, where you can poll the server every 2 seconds, get only the data you need, and have it update the page for you. Ajax involves javascript, and there are a lot of tutorials out there. – aynber Aug 20 '21 at 16:46
  • 1
    There's almost no situation where you'd want to refresh a user's page for them. What if someone was in the middle of typing a message? Definitely look into AJAX and potentially WebSockets if you want updates to happen in real time instead of polling on a timer. – Jon Uleis Aug 20 '21 at 17:02

1 Answers1

0

There is a lot to improve on your current concept and code as displayed.

As mentioned in comment two clear concepts should be employed:

1) Use a Database

A Database is a far more efficient and economical way of handing sortage of arbitary data.

1 a) So, database, when a message is "sent" you can save it to the database table with a set of columns something like:

chat_id | sender_id | date_sent           | message      | deleted
--------------------------------------------------------------
    1   |      1    | 2021-08-20 14:45:23 | Hey this     |  <null> 
                                            is my first 
                                            message

1 b) Once you have a system storing the messages you can then look into a system to detect when new messages (which are not marked as deleted) are found and to update accordingly, this is where the AJAX Javascript/JQuery comes in as a replacement to refreshing your page:

2) Don't refresh Your Whole Page

There is some nuance to this advice, but it goes like this -- You should be using JQuery and AJAX to refresh only the part of the page that has changed. This means when your end user is writing a message they don't loose it when you refresh the page, it also means you are minimising repeated overheads for data flowing backwards and forwards between the end client browser and your server.

3) Refresh Only The "chat" Area And Do This Using Asynchronous Querying (AJAX)

Create some AJAX query to check with the server every X seconds (typically every 2-5 seconds) and see if the data in the database has changed. Typically you can use MySQL next auto-increment tester to do this, so your JQuery holds a variable with the next auto_increment value and then when this test returns a value higher it means that at least one new message has been saved to the database and so you can then run a further piece of PHP/MySQL to extract these new messages and display them :-)

So you have a HTML code block called, for instance <div id='conversation'></div> and then use JQuery to full this block with formatted chat text from your MySQL table, and every 3 seconds (for example) test the table to see if there's changes and grab all rows higher or equal to the variable number from the auro_increment.

I won't go too far into this as this is just a generalised overview but this concept will be a far, far better approach than your current rather cumbersome system. Good luck.

Martin
  • 22,212
  • 11
  • 70
  • 132