programing

Jquery/PHP를 이용한 채팅방 구현 방법은?

topblog 2023. 9. 25. 22:10

Jquery/PHP를 이용한 채팅방 구현 방법은?

그룹채팅과 개인채팅 기능을 모두 갖춘 PHP/Javascript(Jquery)를 이용한 채팅방을 구현하려고 합니다.

문제는 인터페이스를 자연스러운 방식으로 지속적으로 업데이트하는 방법과 'X가 타이핑하고 있다'를 표시하는 방법입니다.' 개인 채팅의 메시지.

분명한 방법은 X초/밀리초마다 자바스크립트가 서버에 ping을 하고 마지막 ping과 지금 사이에 새로운 메시지 목록을 가져오는 것입니다.하지만 갑자기 채팅방에 5개의 메시지가 쇄도하면 인터페이스가 다소 부자연스러워 보일 수 있습니다.저는 각 메시지가 타이핑된 그대로 나타나는 것이 좋습니다.

javascript가 서버에 지속적으로 연결을 유지하고 서버가 이 연결에 새로운 메시지를 푸시하고 javascript가 인터페이스에 추가하여 서버가 거의 수신하자마자 동시에 나타나는 방법이 있습니까?

일부 아파치 모듈 등을 설치해야 하는 폴링 옵션이 있다는 것을 알고 있지만, 저는 sysadmin을 매우 못해서 공유 호스팅 계정에 설치하기 쉬운 솔루션이나 php/mysql 전용 솔루션이 있으면 좋겠습니다.

PHP/AJAX/JSON과 채팅

이 책/자습서를 사용하여 채팅 애플리케이션을 작성했습니다.

AJAX 및 PHP: 응답형 웹 애플리케이션 구축: 5장: AJAX 채팅과 JSON

처음부터 완전한 채팅 스크립트를 작성하는 방법을 보여줍니다.

혜성 기반 채팅

Comet을 PHP와 함께 사용할 수도 있습니다.

보낸 사람: 자이툰:

Comet은 웹 서버가 클라이언트에게 데이터를 요청할 필요 없이 클라이언트에게 데이터를 전송할 수 있게 해줍니다.따라서, 이 기법은 기존의 AJAX보다 더 반응이 좋은 애플리케이션을 생산할 것입니다.기존의 AJAX 애플리케이션에서는 웹 브라우저(클라이언트)는 서버 데이터 모델이 변경되었음을 실시간으로 알릴 수 없습니다.사용자가 요청을 생성하거나(예를 들어 링크를 클릭하여) 서버에서 새 데이터를 가져오려면 주기적인 AJAX 요청이 발생해야 합니다.

Comet을 PHP로 구현하는 두 가지 방법을 보여드리겠습니다.예를 들어,

숨겨진 것을 기준으로<iframe>
기존의 AJAX 미반환 요청에 근거하여

첫 번째는 클라이언트에서 실시간으로 서버 날짜를 표시하고, 에서는 미니 채팅을 표시합니다.

방법 1: iframe + 서버 타임스탬프

필요한 항목:

인 http PHP를 backend.php
HTML index.html
프로토타입 JS 라이브러리, 하지만 jQuery를 사용할 수도 있습니다.

()backend.php 한 은 무한 루프를 수행하고 클라이언트가 연결되어 있는 한 서버 시간을 반환합니다.

<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sun, 5 Mar 2012 05:00:00 GMT");
flush();
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Comet php backend</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<script type="text/javascript">
// KHTML browser don't share javascripts between iframes
var is_khtml = navigator.appName.match("Konqueror") || navigator.appVersion.match("KHTML");
if (is_khtml)
{
  var prototypejs = document.createElement('script');
  prototypejs.setAttribute('type','text/javascript');
  prototypejs.setAttribute('src','prototype.js');
  var head = document.getElementsByTagName('head');
  head[0].appendChild(prototypejs);
}
// load the comet object
var comet = window.parent.comet;
</script>

<?php
while(1) {
    echo '<script type="text/javascript">';
    echo 'comet.printServerTime('.time().');';
    echo '</script>';
    flush(); // used to send the echoed data to the client
    sleep(1); // a little break to unload the server CPU
}
?>
</body>
</html>

()index.html)는 백엔드 스크립트를 시간 컨테이너 태그에 연결할 "comet" 자바스크립트 객체를 만듭니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Comet demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="prototype.js"></script>

</head>
<body>
  <div id="content">The server time will be shown here</div>

<script type="text/javascript">
var comet = {
connection   : false,
iframediv    : false,

initialize: function() {
  if (navigator.appVersion.indexOf("MSIE") != -1) {

    // For IE browsers
    comet.connection = new ActiveXObject("htmlfile");
    comet.connection.open();
    comet.connection.write("<html>");
    comet.connection.write("<script>document.domain = '"+document.domain+"'");
    comet.connection.write("</html>");
    comet.connection.close();
    comet.iframediv = comet.connection.createElement("div");
    comet.connection.appendChild(comet.iframediv);
    comet.connection.parentWindow.comet = comet;
    comet.iframediv.innerHTML = "<iframe id='comet_iframe' src='./backend.php'></iframe>";

  } else if (navigator.appVersion.indexOf("KHTML") != -1) {

    // for KHTML browsers
    comet.connection = document.createElement('iframe');
    comet.connection.setAttribute('id',     'comet_iframe');
    comet.connection.setAttribute('src',    './backend.php');
    with (comet.connection.style) {
      position   = "absolute";
      left       = top   = "-100px";
      height     = width = "1px";
      visibility = "hidden";
    }
    document.body.appendChild(comet.connection);

  } else {

    // For other browser (Firefox...)
    comet.connection = document.createElement('iframe');
    comet.connection.setAttribute('id',     'comet_iframe');
    with (comet.connection.style) {
      left       = top   = "-100px";
      height     = width = "1px";
      visibility = "hidden";
      display    = 'none';
    }
    comet.iframediv = document.createElement('iframe');
    comet.iframediv.setAttribute('src', './backend.php');
    comet.connection.appendChild(comet.iframediv);
    document.body.appendChild(comet.connection);

  }
},

// this function will be called from backend.php  
printServerTime: function (time) {
  $('content').innerHTML = time;
},

onUnload: function() {
  if (comet.connection) {
    comet.connection = false; // release the iframe to prevent problems with IE when reloading the page
  }
}
}
Event.observe(window, "load",   comet.initialize);
Event.observe(window, "unload", comet.onUnload);

</script>

</body>
</html>

방법 2: AJAX 미반납 요청

( 1 (data.txt)

자, 백엔드.php는 다음 두 가지를 할 것입니다.

새 메시지를 보낼 때 "data.txt"에 쓰기
"data.txt" 파일이 변경되지 않는 한 무한 루프를 수행

<?php
$filename  = dirname(__FILE__).'/data.txt';

// store new message in the file
$msg = isset($_GET['msg']) ? $_GET['msg'] : '';
if ($msg != '')
{
    file_put_contents($filename,$msg);
    die();
}

// infinite loop until the data file is not modified
$lastmodif    = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
$currentmodif = filemtime($filename);
while ($currentmodif <= $lastmodif) // check if the data file has been modified
{
    usleep(10000); // sleep 10ms to unload the CPU
    clearstatcache();
    $currentmodif = filemtime($filename);
}

// return a json array
$response = array();
$response['msg']       = file_get_contents($filename);
$response['timestamp'] = $currentmodif;
echo json_encode($response);
flush();
?>

()index.html에서 ) 를를 .<div id="content"></div> 메시지를 hat은 "data.txt"하고를s하고, t"다를할합니다.

혜성 개체는 새로운 메시지가 수신될 때마다 그리고 새로운 메시지가 게시될 때마다 AJAX 요청을 보냅니다.영구 연결은 새 메시지를 확인하는 데만 사용됩니다.타임스탬프 URL 매개 변수는 마지막으로 요청한 메시지를 식별하는 데 사용되므로, "data.txt" 타임스탬프가 클라이언트 타임스탬프보다 최신인 경우에만 서버가 반환됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Comet demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="prototype.js"></script>
</head>
<body>

<div id="content">
</div>

<p>
<form action="" method="get" onsubmit="comet.doRequest($('word').value);$('word').value='';return false;">
  <input type="text" name="word" id="word" value="" />
  <input type="submit" name="submit" value="Send" />
</form>
</p>

<script type="text/javascript">
var Comet = Class.create();
Comet.prototype = {

timestamp: 0,
url: './backend.php',
noerror: true,

initialize: function() { },

connect: function()
{
  this.ajax = new Ajax.Request(this.url, {
    method: 'get',
    parameters: { 'timestamp' : this.timestamp },
    onSuccess: function(transport) {
      // handle the server response
      var response = transport.responseText.evalJSON();
      this.comet.timestamp = response['timestamp'];
      this.comet.handleResponse(response);
      this.comet.noerror = true;
    },
    onComplete: function(transport) {
      // send a new ajax request when this request is finished
      if (!this.comet.noerror)
        // if a connection problem occurs, try to reconnect each 5 seconds
        setTimeout(function(){ comet.connect() }, 5000); 
      else
        this.comet.connect();
      this.comet.noerror = false;
    }
  });
  this.ajax.comet = this;
},

disconnect: function()
{
},

handleResponse: function(response)
{
  $('content').innerHTML += '<div>' + response['msg'] + '</div>';
},

doRequest: function(request)
{
  new Ajax.Request(this.url, {
    method: 'get',
    parameters: { 'msg' : request 
  });
}
}
var comet = new Comet();
comet.connect();
</script>

</body>
</html>

또는

또한 다른 채팅 어플리케이션을 통해 그 방법을 확인할 수도 있습니다.

http://hot-things.net/ ? q=blite - BlaB!Lite는 AJAX 기반이며 MySQL, SQLite 및 Postgre를 지원하는 브라우저 채팅 시스템으로 가장 잘 볼 수 있습니다.SQL 데이터베이스.
Gmail/Facebook Style jQuery Chat - 이 jQuery Chat 모듈을 사용하면 Gmail/Facebook 스타일의 채팅을 기존 웹사이트에 원활하게 통합할 수 있습니다.
자바스크립트/PHP 채팅 서버 작성 - 자습서
CometChat - CometChat은 표준 공유 서버에서 실행됩니다.PHP + mySQL만 필요합니다.

여론조사는 좋은 생각이 아닙니다.긴 폴링이나 웹 소켓을 사용하는 솔루션이 필요합니다.

http://hookbox.org 은 아마도 당신이 사용할 수 있는 최고의 도구일 것입니다.

서버와 브라우저 사이에 상주하며 채널(IRC 채널을 생각해 보세요)이라는 추상화를 관리하는 박스입니다.github: https://github.com/hookbox/hookbox 이 박스는 파이썬으로 작성되어 있지만 어떤 언어로도 작성된 서버와 함께 쉽게 사용할 수 있습니다.또한 브라우저에서 사용 가능한 최고의 기술을 사용하는 것을 보장하는 jsio(웹 소켓, 롱폴링 또는 브라우저에서 사용 가능한 최고의 기술을 사용하는)에 구축된 자바스크립트 라이브러리도 함께 제공됩니다.데모에서 저는 코드 라인이 거의 없는 실시간 채팅을 보았습니다.

후크박스의 목적은 기존 웹 기술과의 긴밀한 통합에 중점을 두고 실시간 웹 애플리케이션의 개발을 용이하게 하는 것입니다.간단히 말하면 후크박스는 웹 지원 메시지 큐입니다.브라우저는 후크박스에 직접 연결하여 명명된 채널을 구독하고 실시간으로 해당 채널에 메시지를 게시 및 수신할 수 있습니다.외부 응용 프로그램(일반적으로 웹 응용 프로그램 자체)은 후크박스 REST 인터페이스를 통해 채널에 메시지를 게시할 수도 있습니다.모든 인증 및 인증은 지정된 "웹 후크" 콜백을 통해 외부 웹 응용 프로그램에 의해 수행됩니다.

alt text

사용자가 채널을 연결하거나 작동할 때마다(구독, 게시, 구독 취소)Hookbox는 웹 응용 프로그램에 작업에 대한 승인을 http 요청합니다.채널을 구독하면 사용자의 브라우저는 javascript api를 통해 다른 브라우저에서 발생하는 실시간 이벤트를 수신하거나 REST api를 통해 웹 애플리케이션에서 수신합니다.

후크박스를 사용한 모든 애플리케이션 개발은 자바스크립트 또는 웹 애플리케이션 자체의 모국어(예: PHP)로 이루어진다는 것이 핵심 통찰입니다.

파이썬을 실행할 수 있는 서버가 필요하지만 파이썬을 알 필요는 없습니다.

대신 웹소켓과 PHP만 사용하고 싶다면 이것이 좋은 출발점입니다: http://blancer.com/tutorials/69066/start-using-html5-websockets-today/

liveevent와 pnctl을 적극적으로 사용하여 작성된 PHP 데몬을 살펴보셨나요?그것은 많은 기능들과 간단한 채팅 데모 어플리케이션까지 갖추고 있습니다.일부 프로덕션 구현도 있습니다.

이것은 좋은 출발점이 될 수 있습니다.

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

HTML5 WebSockets로 구현할 것을 제안합니다. 오래된 브라우저에 대한 폴링이나 코멧을 적용합니다.WebSockets는 브라우저에 대한 지속적인 연결을 엽니다.웹소켓 서버의 오픈소스 php 구현이 있습니다.

소켓을 사용해보시기를 권합니다.NodeJS와 함께 IO.소켓.IO는 멋지고 매우 쉬운 클라이언트 API를 제공하며 대부분의 최신 브라우저에서 작동하며 가능한 경우 적절한 전송(웹소켓, 롱 폴링 등)을 사용합니다.NodeJS는 HTTP 연결을 보유하는 서버측 데몬입니다.소켓의 공식 사이트입니다.IO에는 이들을 함께 사용하는 방법에 대한 정보가 포함되어 있습니다.도움이 되기를 바랍니다.

저는 당신이 보고 있는 문제가 혜성 웹 프로그래밍을 사용해야 한다고 생각합니다.위키피디아, Comet programming, Ajaxian에서 더 자세한 내용을 찾을 수 있습니다(저는 아직 이 사이트를 처음 접했고 응답에 1개 이상의 링크를 게시할 수 없습니다).

문제는 서버 쪽의 php로는 이것을 쉽게 달성할 수 없다는 것입니다.자세한 내용 : 혜성과 php 사용

또한 구글에서 'php comet'을 검색하면 원하는 효과를 얻을 수 있는 튜토리얼이 나옵니다.

나중에 편집

유인원 프로젝트

이 엔진으로 프로젝트를 구현했습니다.좋아요.

comet with php

이게 도움이 되길 바래, 가브리엘

유망해 보입니다!리스타일링이 굉장히 쉬울지도 모르겠네요 :)

http://www.php-development.ru/javascripts/ajax-chat.php

자바스크립트/PHP의 Ajax Chat 스크립트

묘사

Ajax Chat은 자바스크립트와 PHP로 구현된 경량 맞춤형 웹 채팅 소프트웨어입니다.이 스크립트에는 Java, Flash 또는 기타 플러그인이 필요하지 않습니다.

특징들

공개 채팅과 비공개 채팅.
등록된 사용자 또는 게스트로 로그인합니다.
원정 상태, 사용자 지정 색상, 스마일, 사용자 성별/상태 아이콘
Ajax Chat은 사용자 인증 루틴을 구현하여 타사 멤버십 시스템과 통합할 수 있습니다.고급 통합 옵션: 사용자가 웹사이트에 로그인되어 있는 경우 자동으로 채팅에 로그인할 수 있습니다.

Ajax lightweight chat script

*본 사이트의 복사/붙여넣기 내용임을 알려드립니다.

PHP로 해본 적은 없지만 아마도 소켓 연결 같은 것이 최선일 것입니다.소켓에 대한 PHP 매뉴얼은 여기 있습니다.

누가 튜토리얼인지는 기억이 안 나지만 클라이언트용 플래시와 서버용 자바를 이용해 당신이 원하는 채팅방을 만들었습니다.이 링크가 튜토리얼이 있었던 곳이고 도움이 될 것 같습니다.

언급URL : https://stackoverflow.com/questions/4174521/how-to-implement-a-chat-room-using-jquery-php

'programing' 카테고리의 다른 글

MVC4 - 최적화가 true로 설정된 경우 번들링이 작동하지 않습니다. (0)	2023.09.25
다른 열을 기준으로 열을 변환하는 파워 쿼리 (0)	2023.09.25
':' 문자(16진수 값 0x3A)는 이름에 포함할 수 없습니다. (0)	2023.09.20
PowerShell을 사용하여 'date-1'을 mm-dd-yyyy로 포맷하려면 어떻게 해야 합니까? (0)	2023.09.20
GSSAPI 및 SASL과 함께 C/C++를 사용하는 것에 대한 이 귀중한 문서를 보호합니다. (0)	2023.09.20

현재글Jquery/PHP를 이용한 채팅방 구현 방법은?

각종 프로그래밍 정보를 다루는 블로그입니다.

sql-server, jQuery, python, Ajax, CSS, Android, Git, Oracle, wordpress, Spring-boot, mysql, C, PowerShell, angularJS, MariaDB, reactjs, Excel, asp.net, MongoDB, json,

Today :
Yesterday :

topblog

Jquery/PHP를 이용한 채팅방 구현 방법은?

Jquery/PHP를 이용한 채팅방 구현 방법은?

PHP/AJAX/JSON과 채팅

혜성 기반 채팅

방법 1: iframe + 서버 타임스탬프

방법 2: AJAX 미반납 요청

또는

자바스크립트/PHP의 Ajax Chat 스크립트

묘사

특징들

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Jquery/PHP를 이용한 채팅방 구현 방법은?

Jquery/PHP를 이용한 채팅방 구현 방법은?

PHP/AJAX/JSON과 채팅

혜성 기반 채팅

방법 1: iframe + 서버 타임스탬프

방법 2: AJAX 미반납 요청

또는

자바스크립트/PHP의 Ajax Chat 스크립트

묘사

특징들

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바