카테고리 없음
ajax를 이용한 실시간알람 코드
[czar]
2009. 8. 25. 16:12
www.dbtool.co.kr에서 현재 사용하고 있는 ajax를 이용한 실시간알람 코드를 설명하겠습니다.
코드를 보시고 여러분들 환경에 맞게 수정하여 사용하시면 될 것 같습니다.
1. 모든페이지에서 알람을 컨트롤하는 페이지를 3초마다 호출한다.
<html>
<head>
----- 생략 -----
<script language="javascript">
//실시간알람
function alram_access(){
var xmlhttp = getXmlHttpRequest();
var url = '/ajax/alram_access.jsp';
if(url){
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
var alram_msg = trim(xmlhttp.responseText);
if(alram_msg!=''){
view_msg(alram_msg);
}
} else {
//alert("Error loading "+url+", "+xmlhttp.status+"("+xmlhttp.statusText+")");
}
}
}
xmlhttp.send(null);
}
setTimeout("alram_access()", 3000);//3초 마다 서버와 통신함
return false;
}
function view_msg(msg){
var width = 350;
var height = 150;
var left = (document.body.clientWidth-width)/2;
var top = (document.body.clientHeight-height)/2;
var alram_win = window.open('/ajax/alram_view.jsp?msg='+msg, '', 'left='+left+',top='+top+',width='+width+',height='+height+',toolbar=no ,directories=no,menubar=no,location=no,scrollbars=no,resizable=yes,status=no');
</script>
</head>
<body>
----- 생략 -----
<script language="javascript">
alram_access();
</script>
</body>
</html>
2. 알람 컨트롤 페이지를 구성한다.(/ajax/alram_access.jsp)
<%@ page language="java" contentType="text/html;charset=euc-kr"%>
<%@ page import="java.util.*" %>
<%
response.setHeader("Pragma","No-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0);
response.setHeader ("Cache-Control", "no-cache");
%>
<jsp:useBean id="alram_list" class="java.util.ArrayList" scope="application" />
<%
//실시간 알람기능 : application에서 가져와 해당자에게 뿌려주고 제거한다.
String access_session = session.getId()+"";
int remove_alram_no = -1;
for(int i=0;i<alram_list.size();i++){
Map map = (Map)alram_list.get(i);
String who = map.get("who")==null?"":map.get("who")+"";
String msg = map.get("msg")==null?"":map.get("msg")+"";
long msg_time = map.get("msg_time")==null?System.currentTimeMillis():Long.parseLong(map.get("msg_time")+"");
if(access_session.equals(who)) {
out.print(java.net.URLEncoder.encode(msg, "euc-kr"));//알람전송
remove_alram_no = i;//전송후 제거
}else if((System.currentTimeMillis()-msg_time)>10*1000) {
remove_alram_no = i;//10초 지난메세지 제거
}else{//아무것도하지않음
}
}
//알람을 읽었으면 제거
if(remove_alram_no>-1){
alram_list.remove(remove_alram_no);
}
%>
3. 알람 view 페이지를 구성한다.(/ajax/alram_view.jsp)
<%@ page language="java" contentType="text/html;charset=euc-kr"%>
<%
response.setHeader("Pragma","No-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0);
response.setHeader ("Cache-Control", "no-cache");
%>
<%
String msg = (request.getParameter("msg")==null)? "":java.net.URLDecoder.decode(request.getParameter("msg"), "euc-kr");
%>
<html>
<head>
<title>Alram</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
a { text-decoration:none; color: black; font-size: 12px;}
a:Visited {}
a:Active {}
a:Hover { text-decoration:none; color:black;font-size: 12px;}
body,table,td { font-family: ""; font-size: 12px; }
.button_normal {font-family:"";font-size:12px;}
</style>
<script language="javascript">
function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}
function Init() {
document.body.onkeypress = _CloseOnEsc;
}
function Set(url) {
if(opener!=null){
opener.location.href = url;
}else{
var opener_win = dialogArguments;
opener_win.location.href = url;
}
window.close();
}
function popupResize(){
var pop_width = document.body.scrollWidth + 30;
var pop_height = document.body.scrollHeight + 60;
if(pop_width>800) pop_width = 800;
if(pop_height>500) pop_height = 500;
window.resizeTo(pop_width,pop_height);
}
</script>
</head>
<body bgcolor="buttonface" onload="popupResize();Init();window.focus();">
<center>
<table border=0 cellspacing=0 cellpadding=0 width="95%">
<tr height="10">
<td align=center>
</td>
</tr>
<tr height="30">
<td align=center>
<%=msg%>
</td>
</tr>
</table>
</center>
</body>
</html>
4. 게시물을 처리(insert)할 때 알람메세지를 alram_list 객체에 입력한다.
----- 생략 -----
<jsp:useBean id="access_list" class="java.util.ArrayList" scope="application" />
<jsp:useBean id="alram_list" class="java.util.ArrayList" scope="application" />
<%
StringBuffer sb = new StringBuffer();
sb.append("<b>새로운 게시물이 작성 되었습니다.</b><br>");
sb.append("<br>");
sb.append("보낸사람: <b>디비툴</b><br>");
sb.append("보낸시간: <b>"+Helper.getToday("yyyy-MM-dd HH:mm:ss")+"</b><br>");
sb.append("<br>");
sb.append("확인 하시겠습니까?<br>");
sb.append("<input type=button value=\" 확 인 \" onclick=\"Set('/board/board_view.jsp?topmenu="+topmenu+"&leftmenu="+leftmenu+"&no="+no+"');\">");
sb.append("<input type=button value=\" 취 소 \" onclick=\"window.close();\">");
sb.append("");
String msg = sb.toString();
//접속중인자 전체
for(int i=0;i<access_list.size();i++){
Map map = (Map)access_list.get(i);
String session_id = map.get("session_id")+"";
if(!session_id.equals(session.getId()+"")){//나는 제외
HashMap alram_info = new HashMap();
alram_info.put("who",session_id);
alram_info.put("msg",msg);
alram_info.put("msg_time",System.currentTimeMillis()+"");
alram_list.add(alram_info);
}
}
%>
----- 생략 -----
5. 댓글을 처리(insert)할 때 알람메세지를 alram_list 객체에 입력한다.
----- 생략 -----
<jsp:useBean id="access_list" class="java.util.ArrayList" scope="application" />
<jsp:useBean id="alram_list" class="java.util.ArrayList" scope="application" />
<%
StringBuffer sb = new StringBuffer();
sb.append("<b>새로운 댓글이 작성 되었습니다.</b><br>");
sb.append("<br>");
sb.append("보낸사람: <b>디비툴</b><br>");
sb.append("보낸시간: <b>"+Helper.getToday("yyyy-MM-dd HH:mm:ss")+"</b><br>");
sb.append("<br>");
sb.append("확인 하시겠습니까?<br>");
sb.append("<input type=button value=\" 확 인 \" onclick=\"Set('/board/board_view.jsp?topmenu="+topmenu+"&leftmenu="+leftmenu+"&no="+board_no+"');\">");
sb.append("<input type=button value=\" 취 소 \" onclick=\"window.close();\">");
sb.append("");
String msg = sb.toString();
//접속중인자 전체
for(int i=0;i<access_list.size();i++){
Map map = (Map)access_list.get(i);
String session_id = map.get("session_id")+"";
if(!session_id.equals(session.getId()+"")){//나는 제외
HashMap alram_info = new HashMap();
alram_info.put("who",session_id);
alram_info.put("msg",msg);
alram_info.put("msg_time",System.currentTimeMillis()+"");
alram_list.add(alram_info);
}
}
%>
----- 생략 -----
코드를 보시고 여러분들 환경에 맞게 수정하여 사용하시면 될 것 같습니다.
1. 모든페이지에서 알람을 컨트롤하는 페이지를 3초마다 호출한다.
<html>
<head>
----- 생략 -----
<script language="javascript">
//실시간알람
function alram_access(){
var xmlhttp = getXmlHttpRequest();
var url = '/ajax/alram_access.jsp';
if(url){
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
var alram_msg = trim(xmlhttp.responseText);
if(alram_msg!=''){
view_msg(alram_msg);
}
} else {
//alert("Error loading "+url+", "+xmlhttp.status+"("+xmlhttp.statusText+")");
}
}
}
xmlhttp.send(null);
}
setTimeout("alram_access()", 3000);//3초 마다 서버와 통신함
return false;
}
function view_msg(msg){
var width = 350;
var height = 150;
var left = (document.body.clientWidth-width)/2;
var top = (document.body.clientHeight-height)/2;
var alram_win = window.open('/ajax/alram_view.jsp?msg='+msg, '', 'left='+left+',top='+top+',width='+width+',height='+height+',toolbar=no ,directories=no,menubar=no,location=no,scrollbars=no,resizable=yes,status=no');
</script>
</head>
<body>
----- 생략 -----
<script language="javascript">
alram_access();
</script>
</body>
</html>
2. 알람 컨트롤 페이지를 구성한다.(/ajax/alram_access.jsp)
<%@ page language="java" contentType="text/html;charset=euc-kr"%>
<%@ page import="java.util.*" %>
<%
response.setHeader("Pragma","No-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0);
response.setHeader ("Cache-Control", "no-cache");
%>
<jsp:useBean id="alram_list" class="java.util.ArrayList" scope="application" />
<%
//실시간 알람기능 : application에서 가져와 해당자에게 뿌려주고 제거한다.
String access_session = session.getId()+"";
int remove_alram_no = -1;
for(int i=0;i<alram_list.size();i++){
Map map = (Map)alram_list.get(i);
String who = map.get("who")==null?"":map.get("who")+"";
String msg = map.get("msg")==null?"":map.get("msg")+"";
long msg_time = map.get("msg_time")==null?System.currentTimeMillis():Long.parseLong(map.get("msg_time")+"");
if(access_session.equals(who)) {
out.print(java.net.URLEncoder.encode(msg, "euc-kr"));//알람전송
remove_alram_no = i;//전송후 제거
}else if((System.currentTimeMillis()-msg_time)>10*1000) {
remove_alram_no = i;//10초 지난메세지 제거
}else{//아무것도하지않음
}
}
//알람을 읽었으면 제거
if(remove_alram_no>-1){
alram_list.remove(remove_alram_no);
}
%>
3. 알람 view 페이지를 구성한다.(/ajax/alram_view.jsp)
<%@ page language="java" contentType="text/html;charset=euc-kr"%>
<%
response.setHeader("Pragma","No-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0);
response.setHeader ("Cache-Control", "no-cache");
%>
<%
String msg = (request.getParameter("msg")==null)? "":java.net.URLDecoder.decode(request.getParameter("msg"), "euc-kr");
%>
<html>
<head>
<title>Alram</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
a { text-decoration:none; color: black; font-size: 12px;}
a:Visited {}
a:Active {}
a:Hover { text-decoration:none; color:black;font-size: 12px;}
body,table,td { font-family: ""; font-size: 12px; }
.button_normal {font-family:"";font-size:12px;}
</style>
<script language="javascript">
function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}
function Init() {
document.body.onkeypress = _CloseOnEsc;
}
function Set(url) {
if(opener!=null){
opener.location.href = url;
}else{
var opener_win = dialogArguments;
opener_win.location.href = url;
}
window.close();
}
function popupResize(){
var pop_width = document.body.scrollWidth + 30;
var pop_height = document.body.scrollHeight + 60;
if(pop_width>800) pop_width = 800;
if(pop_height>500) pop_height = 500;
window.resizeTo(pop_width,pop_height);
}
</script>
</head>
<body bgcolor="buttonface" onload="popupResize();Init();window.focus();">
<center>
<table border=0 cellspacing=0 cellpadding=0 width="95%">
<tr height="10">
<td align=center>
</td>
</tr>
<tr height="30">
<td align=center>
<%=msg%>
</td>
</tr>
</table>
</center>
</body>
</html>
4. 게시물을 처리(insert)할 때 알람메세지를 alram_list 객체에 입력한다.
----- 생략 -----
<jsp:useBean id="access_list" class="java.util.ArrayList" scope="application" />
<jsp:useBean id="alram_list" class="java.util.ArrayList" scope="application" />
<%
StringBuffer sb = new StringBuffer();
sb.append("<b>새로운 게시물이 작성 되었습니다.</b><br>");
sb.append("<br>");
sb.append("보낸사람: <b>디비툴</b><br>");
sb.append("보낸시간: <b>"+Helper.getToday("yyyy-MM-dd HH:mm:ss")+"</b><br>");
sb.append("<br>");
sb.append("확인 하시겠습니까?<br>");
sb.append("<input type=button value=\" 확 인 \" onclick=\"Set('/board/board_view.jsp?topmenu="+topmenu+"&leftmenu="+leftmenu+"&no="+no+"');\">");
sb.append("<input type=button value=\" 취 소 \" onclick=\"window.close();\">");
sb.append("");
String msg = sb.toString();
//접속중인자 전체
for(int i=0;i<access_list.size();i++){
Map map = (Map)access_list.get(i);
String session_id = map.get("session_id")+"";
if(!session_id.equals(session.getId()+"")){//나는 제외
HashMap alram_info = new HashMap();
alram_info.put("who",session_id);
alram_info.put("msg",msg);
alram_info.put("msg_time",System.currentTimeMillis()+"");
alram_list.add(alram_info);
}
}
%>
----- 생략 -----
5. 댓글을 처리(insert)할 때 알람메세지를 alram_list 객체에 입력한다.
----- 생략 -----
<jsp:useBean id="access_list" class="java.util.ArrayList" scope="application" />
<jsp:useBean id="alram_list" class="java.util.ArrayList" scope="application" />
<%
StringBuffer sb = new StringBuffer();
sb.append("<b>새로운 댓글이 작성 되었습니다.</b><br>");
sb.append("<br>");
sb.append("보낸사람: <b>디비툴</b><br>");
sb.append("보낸시간: <b>"+Helper.getToday("yyyy-MM-dd HH:mm:ss")+"</b><br>");
sb.append("<br>");
sb.append("확인 하시겠습니까?<br>");
sb.append("<input type=button value=\" 확 인 \" onclick=\"Set('/board/board_view.jsp?topmenu="+topmenu+"&leftmenu="+leftmenu+"&no="+board_no+"');\">");
sb.append("<input type=button value=\" 취 소 \" onclick=\"window.close();\">");
sb.append("");
String msg = sb.toString();
//접속중인자 전체
for(int i=0;i<access_list.size();i++){
Map map = (Map)access_list.get(i);
String session_id = map.get("session_id")+"";
if(!session_id.equals(session.getId()+"")){//나는 제외
HashMap alram_info = new HashMap();
alram_info.put("who",session_id);
alram_info.put("msg",msg);
alram_info.put("msg_time",System.currentTimeMillis()+"");
alram_list.add(alram_info);
}
}
%>
----- 생략 -----
[출처] AJAX를 이용한 실시간알람(JSP)|작성자 어라