SSE를 사용하여 mysql select의 응답 받기

Question

EventSource를 사용하여 1 : 1로 실시간 연결을 생성하려고합니다. 내 이벤트 소스가 설정되어 있으며 개발자 도구에서 공개하고 응답하지만 작동합니다 데이터가 PHP 파일에서 표시되지 않습니다.

PHP :

<?php 
header('Content-Type: text/event-stream'); 
header('Cache-Control: no-cache'); 

session_start(); // Starting Session 
include 'dbconnect.php'; 
include 'Session.php'; 

$messageuserid = $_GET['messageuserid']; 

$RunSqlGM = "SELECT * FROM messages WHERE (SUsername = '$Session_Username' AND RUsername = '$messageuserid') OR (SUsername = '$messageuserid' AND RUsername = '$Session_Username')"; 
$getmessagethread = mysqli_query($con,$RunSqlGM)or die(mysqli_error()); 

while($MessageRows = mysqli_fetch_array($getmessagethread)) { 
    $MSUsername = $MessageRows['SUsername']; 
    $MRUsername = $MessageRows['RUsername']; 
    $MSender = $MessageRows['Sender']; 
    $MessageContent = $MessageRows['Message']; 
    $TimeStamp = date("g:ia \o\\n l jS F Y", strtotime($MessageRows["Time"])); 


    if ($MSender === $Session_Username) { 
     echo "<table class='messagebubbleright'>"; 
      echo "<tr><th></th></tr>"; 
      echo "<tr>"; 
       echo "<td class='inforight'>$MSender<br>$TimeStamp</td>"; 
      echo "</tr>"; 
      echo "<tr>"; 
       echo "<td class='bubbleright'>$MessageContent</td>"; 
      echo "</tr>"; 
     echo "</table>"; 
     flush(); 
    } else { 
     echo "<table class='messagebubbleleft'>"; 
      echo "<tr><th></th></tr>"; 
      echo "<tr>"; 
       echo "<td class='infoleft'>$MSender<br>$TimeStamp</td>"; 
      echo "</tr>"; 
      echo "<tr>"; 
       echo "<td class='bubbleleft'>$MessageContent</td>"; 
      echo "</tr>"; 
     echo "</table>"; 
     flush(); 
    } 
} 
mysqli_close($con); // Connection Closed 
?> 

그리고 이벤트 소스는 버튼 클릭으로 시작되는이 기능에 포함되어 호출 JS.

JS :

function GetMessages(GetMUserID) { 
    if (typeof(EventSource) !== "undefined") { 
     var source = new EventSource("db/getmessages.php?messageuserid=" + GetMUserID); 
     source.addEventListener("open", function() { 
      $("#readmessagearea").html("Getting server updates"); 
     }); 

     source.addEventListener("message", function(event) { 
      $("#readmessagearea").html(event.data); 
     }); 

    } else { 
     $("#readmessagearea").html("Sorry, your browser does not support server-sent events..."); 
    } 
} 

어떤 도움이나 지침은 크게 감상 할 수있다. 나는 SSE에 비교적 새로운 것이지만 이것이 작동해야한다는 것을 알 수 있습니다.

Answer 1

PHP 코드에 몇 가지 문제점이 있습니다. 수정하기 쉬운 것은 flush()을 @ob_flush();@flush()으로 변경하는 것이 가장 좋습니다. ob_flush()은 PHP가 버퍼링하지 않는 것을 확인하고, @ 표지판은 버퍼링을 사용하지 않을 경우 경고 메시지를 표시하지 않도록합니다.

두 번째 문제는 SSE 프로토콜이 최소이지만, 이 아니고,이 최소한이라는 것입니다. 메시지 앞에 "data :"를 붙이고 "\ n \ n"을 접미사로 사용해야합니다. 귀하의 HTML은 자신의 라인 피드를 포함하고 있지 않기 때문에 그것이 효과가있을 것이라고 생각합니다. ($MessageContent이나 다른 동적 데이터에 줄 바꿈이없는 한 ... 캐리지 리턴뿐만 아니라 HTML 태그도 필터링하는 것이 좋습니다. 현재 코드는 HTML 공격에 취약합니다.)

또 다른 방법 :이 대안이 $MessageRows["Time"], $MSender, $MessageContent 등을 포함, 단지 JSON 객체를 전송하고 자바 스크립트 클라이언트가 HTML을 만들도록하는 것입니다. 이렇게하면 융통성이 있습니다 (예 : 다른 국가의 고객이 자체 날짜 기록 형식을 가질 수 있고 레이아웃을 변경할 수 있음).하지만 더 많은 작업을 프런트 엔드로 이동합니다.