2012-09-27 7 views
0

내 웹 사이트에 PHP/JavaScript 채팅 시스템을 만들려고합니다. 페이지를 새로 고치지 않고 어떻게합니까?PHP 자바 스크립트 채팅룸 만들기

JavaScript가 : - 동적으로 텍스트 상자에 텍스트를 추가하십시오.

PHP 수 : - 채팅 로그 파일을 저장하고 모든 사람이 볼 수 있도록 대화방을 업데이트하십시오.

두 번째 부분은 페이지를 새로 고쳐야하는 것 같습니다. 사용자가 무엇인가를 말할 때마다 페이지를 새로 고치고 싶지 않습니다. POST 또는 GET을 수행하지 않고 백그라운드에서 PHP를 실행할 수 있습니까? 파이썬이나 루비와 같은 다른 서버 측 언어를 사용해야합니까? 어떤 도움을 주시면 감사하겠습니다.

+0

안녕하세요! 전통적인 대답은 Ajax (Asynchronous Javascript)입니다. interwebs에는 문자 그대로 수천 개의 Ajaxified PHP chatroom 튜토리얼이 있습니다. 앞으로는 웹 소켓이 대신되지만 그 날은 아직 여기에 없습니다. –

+0

실시간 채팅은 엔지니어가 구현하는 복잡한 시스템입니다. 특히 기본 기술이 어떻게 작동하는지 잘 이해하지 못하는 경우가 많습니다. 가장 좋은 조언은 통합 할 준비가 된 제 3 자 채팅 시스템을 검색하는 것입니다. –

+0

php + js가이 작업에 가장 적합한 스택이 아닙니다. [node.js + js] (http://chat.nodejs.org/)입니다. – moonwave99

답변

0

페이지를 새로 고치지 않으려면 Ajax 게시물을 사용할 수 있습니다. 다음은 구현입니다. 그것은 작은 규모의 사이트 인 경우

http://css-tricks.com/jquery-php-chat/

는 괜찮아. 그렇지 않으면 Erlang 또는 Go 프로그래밍을 사용하여 채팅을 강화할 것을 권장합니다!

0

자바 스크립트와 PHP와 함께이 작업을 수행 할 수있는 몇 가지 방법이 있습니다 . 가장 기본적인 것은 Javascript의 XMLHttpRequest 함수를 통해 Javascript POST 요청을 보내는 것입니다. 이렇게하면 페이지를 다시로드하지 않고도 데이터를 보내고받을 수 있습니다. 그 방법으로 데이터를 보내고 결과를 처리하는 방법에 대한 정보는 Google "AJAX"를 참조하십시오.

PHP는 이것을 정규 POST 요청으로 사용하므로 반환하는 데이터의 관점에서 백엔드에서 원하는대로 할 수 있습니다. 그러나 PHP를 사용하여 데이터를 반환하고 새 웹 페이지를 보내지 않으므로 가장 간단한 방법으로 텍스트를 전송할 수 있습니다.

chatroom의 목적을 위해 AJAX는 새로운 채팅이 왔는지 확인하기 위해 자바 스크립트 코드를 몇 초마다 폴링해야합니다. 그다지 효과적이지 않습니다. 정말로 원하는 것은 서버에서 클라이언트에게 연결을 유지하고 무엇인가가 변경되었을 때 알려줄 수있는 것입니다. 이를 위해서는 자바 스크립트에서 웹 소켓을 사용하고 PHP 소켓 서버를 만들어야합니다. 이 두 가지를 실제로하는 방법은이 답변의 범위를 벗어납니다. 그러나 당신이 말하는 기술을 사용하는 것이 가능합니다.

1

msg.php 파일에서 채팅 메시지를 검색하고이를 새로 고치기 위해 jQuery를 사용하여 기본 파일에 포함시킬 수 있습니다 (기본 페이지는로드되지만 새로 고침). 프로토 타입을 jQuery와 비슷하지만 매우 사용하기 쉽도록 사용할 수 있습니다.

+4

그리고 우리는 더 이상 각 단어를 대문자로 쓸 필요가 없다고 희망합니다! – moonwave99

1

하나의 로그 파일 만 사용하는 대화방 응용 프로그램 (예 : 사이트의 모든 사용자가 같은 방에 로그인 한 경우)을 사용하려는 경우 php 및 ajax를 일부 jquery와 함께 사용하면 어렵지 않습니다. 이 과정은 다음과 같습니다. 사용자가 메시지를 입력하고 보내면 좋습니까?

형태의 마크 업이다
<form name="message" action=""> 
    <input name="usermsg" type="text" id="usermsg" size="63" /> 
    <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> 
</form> 

가, 다음, 당신은 완벽하게 사용자 입력에 소요 뭔가를해야합니다, 사용자가 텍스트 상자에 입력하고 전송 어떤 : 해당위한 양식이 필요합니다 아약스는 어디에서 오는 스크립트에, 그건 :이 작업을 수행 한 후

<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script type="text/javascript" > 
//when the user clicks the button with the id submitmsg, the input is taken 
$("#submitmsg").click(function(){ 
    var clientmsg = $("#usermsg").val(); 
      //after the input's value is taken, it's sent to a script called 
      //pst.php 
    $.post("post.php", {text: clientmsg}); 
      //after the message is sent, the input's value is set to null 
      //to allow the user to type a new message    
    $("#usermsg").attr("value", ""); 
    return false; 
}); 
</script> 

, 우리는 스크립트 post.php의 모양과 용도, 기본적으로는 아약스와 통해 전송 입력을 잡고 어떻게 볼 필요가 그것을 파일에 기록한 다음 파일을 웹 페이지에로드하고 사용자간에 전송 된 모든 메시지를 볼 수 있습니다. ajax는 특정 시간 후에 파일을 다시로드하는 데 사용됩니다. R의이 포함 된 어떤 메시지와 함께 속도까지 항상, 여기에 PHP 스크립트입니다 : 내가 세션을 사용했습니다

<? 
session_start(); 
if(isset($_SESSION['name'])){ 
$text = $_POST['text']; 

$fp = fopen("log.html", 'a'); 
fwrite($fp, "<div class='msgln'><b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>"); 
fclose($fp); 
} 
?> 

노트, 이것은 로그인 한 사용자의 이름과에 그것은 또한 출력을 얻을 수 있습니다

<div id="chatbox"> 
<?php 
if(file_exists("log.html") && filesize("log.html") > 0){ 
    $handle = fopen("log.html", "r"); 
    $contents = fread($handle, filesize("log.html")); 
    fclose($handle); 

    echo $contents; 
} 
?> 
</div> 

이 부문의 그 : 당신이 로그인 시스템이 파일에 데이터를 작성 후, 어쨌든,이에 딱 맞는 방법을 볼 수 있는지 로그 도저히 안 믿기는, 우리는 사용자가 볼 수 있도록 업로드해야 이제 로그 파일을로드 할 위치가 남아 있습니다. 일정 시간이 지나면 파일을 다시로드하고 자동 스크롤 기능을 추가해야합니다.

//Load the file containing the chat log 
function loadLog(){  
    var oldscrollHeight = $("#inner").attr("scrollHeight") - 20; 
    $.ajax({ 
     url: "log.html", 
     cache: false, 
     success: function(html){   
      $("#inner").html(html); //Insert chat log into the #chatbox div    
      var newscrollHeight = $("#inner").attr("scrollHeight") - 20; 
      if(newscrollHeight > oldscrollHeight){ 
       $("#inner").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div 
      }    
     }, 
    }); 
} 
setInterval (loadLog, 2500); //Reload file every 2.5 seconds 

그리고 이것이 도움이 될 것입니다. 유용한 답을 얻지 못했다면 도움이되기를 바랍니다. 오랜 시간 기다려야 할 것입니다.

+0

이것은 채팅방을 사용하지 않는 방법입니다. 당신은 직접 HTML 파일에 쓰고 있습니까? 왜 TXT를 사용하지 않았습니까? 또는 mysql을 사용해야합니다. AJAX 대화방을 사용하면 서버 문제에 대한 여러 번 호출을 피하는 방법, 표시하지 않을 수 있습니다. 또한 서버를 이중 호출하는 것을 중단하는 이유는 무엇입니까? –

+0

글쎄, 갈 길이 멀지는 않지만 잘 작동합니다. 그리고이 질문을 읽으면서 그는 로그 파일을 사용하기를 원했습니다. "PHP는 : - 채팅 로그 파일에 채팅을 저장하고 모든 사람이 볼 수 있도록 대화방을 업데이트합니다." 그래서 나는 그 접근법을 사용할 대답을했습니다. 가장 좋은 방법은 웹 소켓을 사용하는 것이지만, 다시 한 번 나는 그가 찾고 있던 것을 기반으로 대답을했다. 파일을 사용한 접근법. TXT로 저장하려면 확장자를 html에서 txt로 변경하십시오. –