JS / HTML / PHP в одной PHP программе и MYSQL обновления через отправленные сервером события - PullRequest
Новая
       13

JS / HTML / PHP в одной PHP программе и MYSQL обновления через отправленные сервером события

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

Я создаю приложение двустороннего чата, которое сохраняет сообщения в базе данных MySQL. Я хотел бы использовать отправленные сервером события и иметь PHP и HTML все на одной странице, но проблема, с которой я сталкиваюсь, заключается в том, что заголовок не может быть установлен как text / event-stream, или я сломаю HTML .

Мой вопрос: как я могу разместить PHP, JS и HTML на одной странице при использовании событий, отправленных сервером?

Вот мое открытие JS. Я установил EventSource на index. php, хотя это может быть неправильно. 

<html>
        <head>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <script>
        if(typeof(EventSource) !== "undefined") {
          var source = new EventSource("index.php");
          source.onmessage = function(event) {
           document.getElementsByClassName("message").innerHTML = event.data;
         };
        }else {
         document.getElementsByClassName("message").innerHTML = "Sorry, your browser does not support server-sent events...";
        }
        </script>
        <h1>LoRa Chat</h1>
        <?php
           $SSE = (@$_SERVER["HTTP_ACCEPT"] == "text/event-stream");
           if($SSE){
            header('Cache-Control: no-cache');
            header("Content-Type: text/event-stream");
           }
           else {
            header("Content-Type: text/html");
           }

            //Database Stuff
            $connect = mysqli_connect('localhost', 'user', 'Pass');
            mysqli_select_db($connect,"allmessages");
            $sql = "SELECT *, if(mymessages > yourmessages, mymessages, yourmessages) FROM lora_messages";
            $results = mysqli_query($connect, $sql);
            while($row = mysqli_fetch_array($results)) {
                if ($row ['mymessages'] > $row ['yourmessages']){
        ?>
        <div class='chat'>
        <div class='mine messages'>
        <div class='message'>
        <?php echo "data: ".$row['mymessages']; flush();?>
        </div>
        </div>
        <?php
            }
               elseif ($row ['mymessages'] < $row ['yourmessages']){
        ?>
        <div class='chat'>
        <div class='yours messages'>
        <div class='message'>
        <?php echo "data: ".$row['yourmessages']; flush();?>
        </div>
        </div>
        <?php
            }
        }
        ?>
        <div class="fixed">
        <form action="<?php echo $_SERVER['PHP_SELF']; ?>" Method="POST">
        <input type="text" id="body" name="mymessage">
        <input type="submit" value="Submit" name="submit">
        </form>
        </div>
<br>
</body>
</html>

EDIT: я попытался отделить PHP HTML и поместить логическую часть PHP вне HTML. Я могу получить Server Sent Events через инспектор в Chrome, но не уверен, как l oop через записи в БД в JS. Мне не нравится синтаксис JS. 

<?php
$SSE = (@$_SERVER["HTTP_ACCEPT"] == "text/event-stream");
if($SSE){
   header("Content-Type: text/event-stream");
   header('Cache-Control: no-cache');
   if(isset($_POST['submit'])){
      $send = $_POST['mymessage'];
      $sendmsg = "INSERT INTO lora_messages (mymessages, yourmessages) VALUES ('".$send."', '')";
   }
   if (!empty($_GET['yourmessage'])){
       $recieve = $_GET['yourmessage'];
       $recievemsg = "INSERT INTO lora_messages (mymessages, yourmessages) VALUES ('', '".$recieve."')";
   }

   $connect = mysqli_connect('localhost', 'root', 'Walcott34');
   mysqli_select_db($connect,"allmessages");
   $sql = "SELECT *, if(mymessages > yourmessages, mymessages, yourmessages) FROM lora_messages";
   $sqlrecieve = mysqli_query($connect, $recievemsg);
   $sqlsend = mysqli_query($connect, $sendmsg);
   $results = mysqli_query($connect, $sql);
   while($row = mysqli_fetch_array($results)) {
       if ($row ['mymessages'] > $row ['yourmessages']){
          echo "data: ".$row['mymessages']."\n\n";
       }
       elseif ($row ['mymessages'] < $row ['yourmessages']){
          echo "data: ".$row['yourmessages']."\n\n";
       }
   ob_flush();
   flush();
  }
}

else {

?>

<html>
        <head>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <script>
        if(typeof(EventSource) !== "undefined") {
          var source = new EventSource("index2.php");
          source.onmessage = function(e){
              document.getElementById("mymessages").innerHTML = event.data;
              document.getElementById("yourmessages").innerHTML = event.data;

         };
        }else {
         document.getElementsById('message').innerHTML = "Sorry, your browser does not support server-sent events...";
        }
        </script>
        <h1>LoRa Chat</h1>
        <div class='chat'>
        <div class='mine messages'>
        <div class='message'>
        <div id='mymessage'>
        </div>
        </div>
        </div>
        <div class='chat'>
        <div class='yours messages'>
        <div class='message'>
        <div id='yourmessage'>
        </div>
        </div>
        </div>
        <div class="fixed">
        <form action="<?php echo $_SERVER['PHP_SELF']; ?>" Method="POST">
        <input type="text" id="body" name="mymessage">
        <input type="submit" value="Submit" name="submit">
        </form>
        </div>
<br>
</body>
</html>

<?php } ?>

Ответы [ 2 ]

0 голосов
/ 05 апреля 2020

Почему бы не использовать AJAX вместо этого? Мой PHP Приложение чата использует AJAX, и это очень эффективно. Мои чаты хранятся в БД аккуратно и правильно! Тебе нужна помощь? Ответить на мой комментарий LOL. Хотите увидеть видео демонстрацию того, как это работает? Нажмите здесь

0 голосов
/ 01 апреля 2020

Если вы после того, как он находится в одном файле, вам нужен только один внешний оператор if, который разделяет две логические части. 

<?php
if ($_SERVER["HTTP_ACCEPT"] === 'text/event-stream') {
 // event stream code

  ...

  while (true) {

  ...

} else {
// client side code
?>
 <head>
        <meta name="viewport" content="w
 ...

<?php }

Вы не можете переплетать две части так, как делаете: 

<div class='message'>
 <?php echo "data: $row['mymessages']"; flush();?>
</div>

Ваша серверная часть неполна, но это выходит за рамки вопроса, я прокомментировал ссылку на рабочий пример.

...