[AJAX] AJAX와 JSON으로 실시간 익명 채팅 사이트 구현하기

Recent Posts

« 2024/12 »
일	월	화	수	목	금	토
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	31

Archives

Today

Total

관리 메뉴

MY MEMO

[AJAX] AJAX와 JSON으로 실시간 익명 채팅 사이트 구현하기 본문

STUDYING/WEB

[AJAX] AJAX와 JSON으로 실시간 익명 채팅 사이트 구현하기

l_j_yeon 2017. 6. 14. 19:09

출처 : https://www.youtube.com/watch?v=_eC_lbmoizg&list=PLRx0vPvlEmdAVcSdYgqjJ64A7ggHhorU_

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>?ㅼ떆媛??듬챸 ?ъ씠??/title>

var lastID = 0;

$(document).ready(function() {

getInfiniteChat();

});

function closePage() {

if (confirm("do you want to erase all the messages?")) {

var listType = "close";

$.ajax({

type : "POST",

url : "./ChatListServlet",

data : {

listType : listType

success : function(result) {

if (result == 1) {

} //?깃났

else {

} //?ㅽ뙣

}

});

}

//吏?쒕쾲????붾? 紐⑤몢 蹂댁뿬以?

function getInfiniteChat() {

setInterval(function() {

chatListFunction(lastID);

}, 1000);

}

function submitFunction() {

var chatName = $('#chatName').val();

var chatContent = $('#chatContent').val();

$.ajax({

type : "POST",

url : "./ChatSubmitServlet",

data : {

chatName : encodeURIComponent(chatName),

chatContent : encodeURIComponent(chatContent)

success : function(result) {

if (result == 1) {

autoClosingAlert('#successMessage', 2000);

} else if (result == 0) {

autoClosingAlert('#dangerMessage', 2000);

} else {

autoClosingAlert('#warningMessage', 2000);

}

});

$('#chatContent').val('');

}

function autoClosingAlert(selecter, delay) {

var alert = $(selecter).alert();

alert.show();

//?뱀젙???쒓컙?숈븞留??섏삱 ???덈룄濡?

//windows媛 ?꾨땲??window..

window.setTimeout(function() {

alert.hide()

}, delay);

}

function chatListFunction(type) {

var chatName = $('#chatName').val();

var chatContent = $('#chatContent').val();

$.ajax({

type : "POST",

url : "./ChatListServlet",

data : {

listType : type,

success : function(data) {

if (data == "")

return;

var parsed = JSON.parse(data);

var result = parsed.result;

for (var i = 0; i < result.length; i++) {

addChat(result[i][0].value, result[i][1].value,

result[i][2].value);

}

lastID = Number(parsed.last);

}

});

}

function addChat(chatName, chatContent, chatTime) {

$('#chatList')

.append(

'<div class="row">'

+ '<div class="col-lg-12">'

+ '<div class="media">'

+ '<a class="pull-left" href="#">'

+ '<img class="media-object img-circle" src = "images/icon.jpg" alt="">'

+ '</a>' + '<div class="media-body">'

+ '<h4 class="media-heading">' + chatName

+ '<span class="small pull-right">' + chatTime

+ '</span>' + '</h4>' + '<p>' + chatContent

+ '</p>' + '</div>' + '</div>' + '</div>'

+ '</div>' + '<br>');

$('#chatList').scrollTop($('#chatList')[0].scrollHeight);

}

</script>

</head>

<h4>

</h4>

</div>

</div>

<div id="chatList" class="portlet-body chat-widget"

style="overflow-y: auto; width: auto; height: 300px;">

</div>

<input style="height: 40px;" type="text" id="chatName"

class="form-control" placeholder="name" maxlength="20">

</div>

<textarea style="heigh: 80px" ; id="chatContent"

class="form-control" placeholder="Message" maxlength="100"></textarea>

</div>

<button type="button" class="btn btn-default pull-right"

onClick="submitFunction();">Submit</button>

</div>

<div class="alert alert-success" id="successMessage"

style="display: none;">

<strong>Successfully send the message</strong>

</div>

<div class="alert alert-danger" id="dangerMessage"

style="display: none;">

<strong>Fill out all the blanks</strong>

</div>

<div class="alert alert-warning" id="warningMessage"

style="display: none;">

<strong>DATABASE ERROR</strong>

</div>

</body>

</html>

web.xml

Chat.java

ChatDAO.java

package chat;

import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;

import com.mysql.jdbc.Connection;

public class ChatDAO {

private Connection conn;

public ChatDAO() {
		try {
			String dbURL = "jdbc:mysql://localhost:3306/chat";
			String dbID = "root";
			String dbPassword = "비밀번호"; 
			Class.forName("com.mysql.jdbc.Driver");
			conn = (Connection) DriverManager.getConnection(dbURL, dbID, dbPassword);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

public ArrayList<Chat> getChatListByRecent(String chatID) {
		ArrayList<Chat> chatList = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String SQL = "select * from chat where chatID > ? order by chatTime";
		try {
			pstmt = conn.prepareStatement(SQL);
			pstmt.setInt(1, Integer.parseInt(chatID));
			rs = pstmt.executeQuery();
			chatList = new ArrayList<Chat>();
			while (rs.next()) {
				Chat chat = new Chat();
				chat.setChatID(rs.getInt("chatID"));
				chat.setChatName(rs.getString("chatName"));
				chat.setChatContent(rs.getString("chatContent").replaceAll(" ", " ").replaceAll("<", "<")
						.replaceAll(">", ">").replaceAll("\n", "<br>"));
				chat.setChatTime(rs.getString("chatTime"));
				chatList.add(chat);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return chatList;
	}

public int submit(String chatName, String chatContent) {
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String SQL = "insert into chat values (NULL,?,?,now())";
		try {
			pstmt = conn.prepareStatement(SQL);
			pstmt.setString(1, chatName);
			pstmt.setString(2, chatContent);
			return pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return -1;
	}

public int eraseDB() {
		PreparedStatement pstmt = null;
		String SQL = "delete from chat";
		try {
			pstmt = conn.prepareStatement(SQL);
			return pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (pstmt != null)
					pstmt.close();
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return -1;
	}
}

ChatListServlet.jsp

package chat;

import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ChatListServlet
 */

@WebServlet("/ChatListServlet")
public class ChatListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		// 어떠한 list인지 그 Type을 나타내줌
		String listType = request.getParameter("listType");
		// 만약 없다면 공백 출력
		if (listType == null || listType.equals(""))
			response.getWriter().write("");
		
		else if (listType == "close" || listType.equals("close")) {
			ChatDAO chatDAO = new ChatDAO();
			response.getWriter().write(chatDAO.eraseDB());
		} 
		
		else {
			try {
				Integer.parseInt(listType);
				response.getWriter().write(getID(listType));
			} catch (Exception e) {
				response.getWriter().write("");
			}
		}
	}

public String getID(String chatID) {

StringBuffer result = new StringBuffer("");
		result.append("{\"result\":[");
		ChatDAO chatDAO = new ChatDAO();
		// SimpleDateFormat (현재 날짜를 나타내는 format)
		ArrayList<Chat> chatList = chatDAO.getChatListByRecent(chatID);

// 결과가 있을 때 즉 오늘에 시작한 메시지를 모두 담아와서 보내줌
		for (int i = 0; i < chatList.size(); i++) {
			result.append("[{\"value\":\"" + chatList.get(i).getChatName() + "\"},");
			result.append("{\"value\":\"" + chatList.get(i).getChatContent() + "\"},");
			result.append("{\"value\":\"" + chatList.get(i).getChatTime() + "\"}]");
			// i 가 마지막원소가 아니라면 뒤에 더 있다는 의미
			if (i != chatList.size() - 1)
				result.append(",");
		}
		result.append("],\"last\":\"" + chatList.get(chatList.size() - 1).getChatID() + "\"}");
		return result.toString();
	}
}

ChatSubmitServlet.jsp

package chat;

import java.io.IOException;
import java.net.URLDecoder;

@WebServlet("/ChatSubmitServlet")
public class ChatSubmitServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		
		String chatName = URLDecoder.decode(request.getParameter("chatName"),"UTF-8");
		String chatContent = URLDecoder.decode(request.getParameter("chatContent"),"UTF-8");
		
		if (chatName == null || chatName.equals("") || chatContent == null || chatContent.equals("")) {
			response.getWriter().write("0");
		}
		else{
			//DATABASE에 삽입
			response.getWriter().write(new ChatDAO().submit(chatName,chatContent)+"");
		}
	}
}

custom.css

.portlet {
    margin-bottom: 15px;
}

.btn-white {
    border-color: #cccccc;
    color: #333333;
    background-color: #ffffff;
}

.portlet {
    border: 1px solid;
}

.portlet .portlet-heading {
    padding: 0 15px;
}

.portlet .portlet-heading h4 {
    padding: 1px 0;
    font-size: 16px;
}

.portlet .portlet-heading a {
    color: #fff;
}

.portlet .portlet-heading a:hover,
.portlet .portlet-heading a:active,
.portlet .portlet-heading a:focus {
    outline: none;
}

.portlet .portlet-widgets .dropdown-menu a {
    color: #333;
}

.portlet .portlet-widgets ul.dropdown-menu {
    min-width: 0;
}

.portlet .portlet-heading .portlet-title {
    float: left;
}

.portlet .portlet-heading .portlet-title h4 {
    margin: 10px 0;
}

.portlet .portlet-heading .portlet-widgets {
    float: right;
    margin: 8px 0;
}

.portlet .portlet-heading .portlet-widgets .tabbed-portlets {
    display: inline;
}

.portlet .portlet-heading .portlet-widgets .divider {
    margin: 0 5px;
}

.portlet .portlet-body {
    padding: 15px;
    background: #fff;
}

.portlet .portlet-footer {
    padding: 10px 15px;
    background: #e0e7e8;
}

.portlet .portlet-footer ul {
    margin: 0;
}

.portlet-green,
.portlet-green>.portlet-heading {
    border-color: #16a085;
}

.portlet-green>.portlet-heading {
    color: #fff;
    background-color: #16a085;
}

.portlet-orange,
.portlet-orange>.portlet-heading {
    border-color: #f39c12;
}

.portlet-orange>.portlet-heading {
    color: #fff;
    background-color: #f39c12;
}

.portlet-blue,
.portlet-blue>.portlet-heading {
    border-color: #2980b9;
}

.portlet-blue>.portlet-heading {
    color: #fff;
    background-color: #2980b9;
}

.portlet-red,
.portlet-red>.portlet-heading {
    border-color: #e74c3c;
}

.portlet-red>.portlet-heading {
    color: #fff;
    background-color: #e74c3c;
}

.portlet-purple,
.portlet-purple>.portlet-heading {
    border-color: #8e44ad;
}

.portlet-purple>.portlet-heading {
    color: #fff;
    background-color: #8e44ad;
}

.portlet-default,
.portlet-dark-blue,
.portlet-default>.portlet-heading,
.portlet-dark-blue>.portlet-heading {
    border-color: #34495e;
}

.portlet-default>.portlet-heading,
.portlet-dark-blue>.portlet-heading {
    color: #fff;
    background-color: #34495e;
}

.portlet-basic,
.portlet-basic>.portlet-heading {
    border-color: #333;
}

.portlet-basic>.portlet-heading {
    border-bottom: 1px solid #333;
    color: #333;
    background-color: #fff;
}

@media(min-width:768px) {
    .portlet {
        margin-bottom: 30px;
    }
}

.text-green {
    color: #16a085;
}

.text-orange {
    color: #f39c12;
}

.text-red {
    color: #e74c3c;
}

그냥 Chat은 데이터를 얻어올때 쓰인다

DAO는 데이터 베이스에서 무언가를 가져올 때 쓰인다.

Servlet은 말그대로 ajax를 구현하기 위한 것이다.

web.xml에서 servlet을 정의하고 servlet을 경로를 지정해놓는다.

ListServlet을 보면 servlet형태와 맞게 HttpServletRequest HttpServletResponse함수가 정의도어있다.

do post는 post형식으로 받는 다는 것이다.

SubmitServlet도 마찬가지이다 하지만 둘의 차이는

ListServlet은 dopost로 받아온 값을 분석하고 JSON으로 대화 내용을 받는 것이다.

request로 index.jsp로부터 넘겨온 값을 받고 response로 다시 index.jsp로 넘겨준다.

넘겨줄때는 getWriter().write("넘겨줄 내용"); 이렇게 넘겨준다.

getID에서 마지막에 last에 마지막 charID를 받아오는데 최신의 대화만 받아올 수 있도록 하기 위해서이다.

SubmitServlet은 dopost로 받아온 값이 빈것인지 아닌지를 확인한 후 insert를 해주는 것이고

insert는 database를 건들이므로 DAO함수에 들어가야한다.

DAO함수에는 여러가지 함수가 정의되어있다

먼저 최신의 값을 List로 받아오는 getChatListByRecent가 있다.

이렇게 받아온 값을 json으로 변형시켜 index.jsp에 넘겨주는 것이다.

또한 submit함수가 잇다 이 함수는 insert를 위한 함수이다.

이후 eraseDB라는 함수를 추가하였다.

window를 끝낼때 자동으로 DB를 비우고 새로운 대화를 시작하도록 하는 것이다.

web.xml을 보면

servlet-name과 servlet-class만 존재한다

하지만 url-pattern을 쓰지 않았는데 쓰지 않아서..돌아갔기 때문이다..ㅎㅎ

css는 미리 만들어놓은 bootstrap의 디자인을 사용하였다. => https://bootdey.com/snippets/view/Chat-box

이후 index.jsp를 보자 여기가 핵심 부분이다.

lastID는 지금까지 출력한 대화의 ID이다.

mysql에 auto-increment로 설정했기 때문에 자동으로 1씩증가하여 최신것일수록 값이 크다

아래 ready함수는 window를 시작할때 세팅해줘야하는 함수이다

getInfiniteChat인데 채팅한 내용을 받아오겠다는 것이다.

이 함수아래에는 setInterval함수가 있다 1000초 즉 1초마다 값을 갱신하겠다는 것이다.

그 이후 chatListFunction을 가져온다.

그럼 이 함수는 무엇일까 바로 Servlet으로 json을 가져온 함수이다.

즉 servlet이 ChatListServlet을 실행한다 그럼 ChatListServlet에서 Chat list값을 가져온다

그럼 그걸 서블릿 페이지에서 json으로 변경시켜주고 chatListFunction으로 온다

여기서는 josn을 parsing한다 즉 묶인 json 데이터를 쪼개겠다는 뜻이다.

그럼 데이터가 나오는데 이 데이터를 대화의 형태로 html에 추가해야한다.

그렇다면 addChat이라는 함수를 이용한다.

가져온 데이터를 이용하여 html의 코드를 사용해서 데이터를 넣는 것이다.

여기서 submit function은 당연히 알것이다.

insert를 수행하기 위한 ajax이다.

그럼 autoClosingAlert은 무엇일까

이 함수를 알려면 아래의 html 코드를 뜯어봐야하는데 일단 이 함수부터 설명하자면

serlector(선택한) alert을 변수에 저장하고 그것을 실행시키되 2000즉 2초동안 수행시키고 사라지게 하는 거이다.

그래서 autoClosingAlert..

마지막으로 closingPage이다.

이 페이지가 나올때는 body에 있는 onUnload가 실행될때이고 이 것은 window가 종료될때에 일어난다.

closePage가 실행되면 마찬가지로 servlet에가서 다시 DAO로 가고 DB를 건들인 후 돌아온다.

그럼 아래를 보자 아래에는 채팅이 들어갈 위치의 위의 태그에 chatList라고 되어있다

이 아래에 채팅이 계속해서 들어갈 것이다.

그리고 받아올 id값도 잘 저장되어있다.

가장 특이한건 바로 alert일 것이다.

alert이 success danger warning이렇게 3개로 나누어져있다

그리고 display:non즉 보이지 않게 설정되어있다

만약 데이터 베이스에 잘 저장되었다면 이 알림이 success가 되어 이 공간에서 2초동안 나타난 후 사라질 것이다.

그럼 어떤 알림이 나타날지는 어떻게 구별하는가

그것은 바로 id이다

기승전id

id를 이용하여 알맞게 alert을 실행시켜준다.

저작자표시 비영리 변경금지

'STUDYING > WEB' 카테고리의 다른 글

[WEB] speech to text 예제 (chrome browser) (0)	2017.07.03
[WEB] Naver Login api (0)	2017.06.17
[AJAX] AJAX와 Servlet 개념잡기 (0)	2017.06.13
[AJAX] AJAX로 회원가입 페이지 만들기 (0)	2017.06.13
[WEB HACKING] XSS, XST, Cross site request forgery,역공학 (0)	2017.06.12

공유하기 링크

페이스북
카카오스토리
트위터

'STUDYING/WEB' Related Articles

Comments

MY MEMO

[AJAX] AJAX와 JSON으로 실시간 익명 채팅 사이트 구현하기 본문

[AJAX] AJAX와 JSON으로 실시간 익명 채팅 사이트 구현하기

'STUDYING > WEB' 카테고리의 다른 글

티스토리툴바