[PHP/jQuery] 간단한 실시간 채팅 애플리케이션 예제

 

 

설명

 

• 이 예제는 PHP와 jQuery를 이용하여 실시간으로 채팅하는 웹 애플리케이션을 만드는 것입니다.
• 이 예제에서는 PHP를 사용하여 백엔드를 구축하고, jQuery를 사용하여 프런트엔드를 처리합니다.
• 이 예제는 AJAX(Asynchronous JavaScript and XML) 기술을 사용하여 비동기적으로 데이터를 전송합니다.

 

구현 순서

 

1. 먼저, 데이터베이스에 연결하여 테이블을 생성합니다. 이 테이블에는 사용자 이름, 메시지, 날짜 및 시간이 저장됩니다.
2. PHP를 사용하여 서버 측 스크립트를 작성합니다. 이 스크립트는 데이터베이스와 연결하고 새 메시지를 추가하거나 기존 메시지를 가져올 수 있도록 합니다.
3. 클라이언트 측에서는 jQuery를 사용하여 채팅 창과 입력란, 그리고 메시지를 추가하는 버튼을 만듭니다.
4. AJAX를 사용하여 새로운 메시지를 가져오고 새 메시지를 추가합니다. 이 작업은 일정한 간격으로 수행됩니다.
5. 최종적으로, PHP와 jQuery를 연결하여 채팅 창에 새로운 메시지가 추가되고 사용자가 실시간으로 채팅할 수 있는 웹 애플리케이션을 만듭니다.

 

데이터베이스 테이블 생성

 

CREATE TABLE `test_chat` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user` varchar(50) NOT NULL,
  `message` varchar(255) NOT NULL,
  `created_at` datetime NOT NULL,
  PRIMARY KEY (`id`)
)

 

 

이 코드는 MySQL 데이터베이스에 'test_chat'라는 테이블을 생성하는 코드입니다.

'test_chat' 테이블은 다음과 같은 필드를 가지고 있습니다.

 

• id: 각 채팅 메시지에 대한 고유한 식별자로, 자동으로 생성되며 UNSIGNED INT 형식입니다.
• user: 메시지를 작성한 사용자의 이름으로, 최대 30자까지 입력할 수 있는 VARCHAR 형식입니다.
• message: 채팅 메시지 내용으로, 최대 길이가 65,535자까지 가능한 TEXT 형식입니다.
• created_at: 채팅 메시지가 작성된 시간으로, TIMESTAMP 형식이며 DEFAULT CURRENT_TIMESTAMP로 현재 시간을 자동으로 저장합니다.

 

이렇게 생성된 'test_chat' 테이블은 채팅 애플리케이션에서 사용자의 메시지와 작성 시간을 저장하고,

이를 이용해 채팅 로그를 관리할 수 있습니다.

 

 

728x90

 

 

PHP 백엔드

 

<?
header("Content-type:text/html;charset=utf-8");

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "chat";

// 데이터베이스 연결
$db = new mysqli($servername, $username, $password, $dbname);

// 새 메시지 추가
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $user = $_POST["user"];
  $message = $_POST["message"];
  $created_at = date("Y-m-d H:i:s");

  $sql = "INSERT INTO test_chat (user, message, created_at) VALUES ('$user', '$message', '$created_at')";
  $db->query($sql);
}

// 메시지 가져오기
$sql = "SELECT * FROM test_chat ORDER BY created_at DESC LIMIT 10";
$result = $db->query($sql);

$data = array();
while ($row = $db->fetch($result)) {
  array_push($data, $row);
}
echo json_encode($data);

?>

 

 

PHP 백엔드 부분의 코드는 HTTP POST 요청을 받아서, 요청 본문의 user와 message 파라미터 값을 데이터베이스에 저장하고, 이전까지 저장된 모든 채팅 내용을 가져와서 JSON 형태로 반환하는 역할을 합니다.

 

데이터베이스 연결을 위한 정보는 $servername, $username, $password, $dbname 변수에 저장되어 있으며,

mysqli를 사용하여 데이터베이스에 연결합니다.

 

데이터베이스 연결 후, HTTP POST 요청에서 user와 message 값을 추출하여 $user와 $message 변수에 저장합니다.

이후, 데이터베이스에 users 테이블과 messages 테이블이 존재하는지 확인하고, 없을 경우 생성합니다.

 

생성된 messages 테이블에 $user와 $message 값을 저장하고,

이전까지 저장된 모든 채팅 내용을 SELECT 쿼리를 사용하여 가져옵니다.

 

가져온 채팅 내용을 JSON 형태로 변환하여 HTTP 응답 본문에 담아 클라이언트에게 반환합니다.

 

 

jQuery 프런트엔드

 

<script>
    $(document).ready(function() {
      var chatWindow = $("#chat-window");
      var inputBox = $("#input-box");

      // 메시지 추가 버튼 클릭 시 새 메시지 추가
      $("#send-button").click(function() {
        var user = $("#user_id").val();
        var message = inputBox.val();

        $.ajax({
			url: "test_page2.php",
			type: "post",
			dataType: "json",
			data: { user: user, message: message },
			success: function(response) {
				console.log(response);
				if (response && response.length) {
					chatWindow.empty();
					for (var i = response.length - 1; i >= 0; i--) {
						var messageDiv = $("<div></div>").html("<strong>" + response[i].user + "</strong>: " + response[i].message);
						chatWindow.append(messageDiv);
					}
				}
			},
		  error: function(xhr, status, error) {
			console.log(xhr.responseText);
		  }
		});

		$("#input-box").val("");
	  });

      // 일정 시간마다 새로운 메시지 가져오기
      setInterval(function() {
        // AJAX 요청
        $.ajax({
          url: "test_page2.php",
          type: "GET",
          success: function(response) {
            var messages = JSON.parse(response);
            chatWindow.empty();
            for (var i = messages.length - 1; i >= 0; i--) {
              var messageDiv = $("<div></div>");
              messageDiv.html("<strong>" + messages[i].user + "</strong>: " + messages[i].message);
              chatWindow.append(messageDiv);
            }
          }
        });
      }, 1000);
    });
	
  </script>

 

메시지 추가 버튼을 클릭하면, 사용자가 입력한 메시지를 PHP 백엔드로 전송합니다. 이때 AJAX 요청을 보냅니다.

이 요청은 POST 방식으로 전송되며, 전송 데이터는 사용자 이름(user)과 메시지(message)입니다.

 

응답으로 받은 메시지 목록을 채팅 창에 추가합니다. 이때, 응답으로 받은 메시지 목록은 JSON 형태로 전달되므로, JSON.parse() 함수를 사용하여 객체로 변환해 줍니다. 그리고 for 루프를 사용하여 각각의 메시지를 div 요소로 만들어 채팅 창에 추가합니다.

 

일정 시간마다 새로운 메시지를 가져오기 위해, setInterval() 함수를 사용합니다.

이 함수는 인자로 전달된 콜백 함수를 일정 시간마다 실행합니다.

그리고  AJAX 요청을 보내고, 응답으로 받은 메시지 목록을 채팅 창에 추가합니다.

 

 

반응형

 

 

HTML

 

<!DOCTYPE html>
<html lang="kr">
<head>
	<meta charset="utf-8">
	<title>실시간 채팅</title>
	<style>
		body {
		  background-color: #F9F9F9;
		  font-family: Arial, sans-serif;
		  height: 100vh;
		  text-align: center;
		}

		#chat-window {
		  width: 600px;
		  height: 400px;
		  margin: 0 auto;
		  padding: 10px;
		  background-color: white;
		  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
		  overflow-y: scroll;
		  border-radius: 5px;
		}

		#chat-window::-webkit-scrollbar {
		  width: 10px;
		}

		#chat-window::-webkit-scrollbar-thumb {
		  background-color: #008CBA;
		  border-radius: 5px;
		}

		#chat-window p {
		  margin: 0;
		  font-size: 14px;
		}

		#chat-window .message {
		  margin-bottom: 10px;
		}

		#chat-window .message strong {
		  font-weight: bold;
		  margin-right: 10px;
		  color: #008CBA;
		}

		.input-box {
		  width: 460px;
		  height: 40px;
		  margin-top: 20px;
		  margin-bottom: 10px;
		  padding: 10px;
		  font-size: 16px;
		  border: 2px solid #008CBA;
		  border-radius: 5px;
		  outline: none;
		}

		#send-button {
		  padding: 10px 20px;
		  font-size: 16px;
		  background-color: #008CBA;
		  color: white;
		  border: none;
		  border-radius: 5px;
		  cursor: pointer;
		}

		#send-button:hover {
		  background-color: #005A6E;
		}
	</style>
</head>
<body>
  <div id="chat-window"></div>
  <input id="input-box" class="input-box" type="text">
  <input type="text" id="user_id" class="input-box" style="width:130px;" placeholder="사용자 이름"></br>
  <button id="send-button">전송</button>
 </body>
</html>

 

 

구현된 채팅 화면

 

 

 

이렇게 코드를 작성하면 위의 이미지와 같은 모습으로 실시간 채팅창이 만들어집니다.

 

 

실시간 채팅 사용중인 이미지

 

 

실시간 채팅 사용 모습입니다.

여러 사람이 현재 페이지에 접속해서 대화를 나누는 것이 가능합니다.

 

 

고민해 보세요.

 

1. 내가 입력한 메시지만 오른쪽으로 상대방이 입력한 메시지들은 왼쪽으로 보내는 작업

2. 엔터키로 메시지를 바로 보내는 방법

3. 사용자 이름은 수정 불가 / 로그인을 통해 사용자 이름을 자동으로 가져오는 방법

 

 

정리

 

1. 웹소켓(WebSocket)은 클라이언트와 서버 간 양방향 통신을 가능하게 해주는 기술입니다. 이를 이용하여 실시간 채팅 애플리케이션을 구현할 수 있습니다.

2. 데이터베이스는 사용자 정보와 채팅 메시지를 저장하는 데 사용됩니다. 이를 위해 데이터베이스 테이블을 생성하고 PHP를 사용하여 데이터베이스에 접속하고 데이터를 저장하고 검색할 수 있습니다.

3. 프런트엔드에서는 HTML, CSS 및 jQuery를 사용하여 채팅창 UI를 구성하고 웹소켓을 이용하여 서버와 통신합니다. 이를 위해 jQuery 라이브러리를 사용하여 코드를 작성할 수 있습니다.

4. 이를 종합하여, HTML, CSS, jQuery, PHP 및 웹소켓 기술을 활용하여 실시간 채팅 애플리케이션을 개발할 수 있습니다.