쌍용교육 -JSP수업 102일차 ch15SpringPage(13)

채팅기능 만들기

tabel.sql

/*그룹채팅*/
create table sptalkroom(
  talkroom_num number not null,
  basic_name varchar2(900) not null, -- 채팅 멤버를 추가할 때 채팅방 이름를 basic_name에서 가져다 씀
  talkroom_date date default sysdate not null,
  constraint sptalkroom_pk primary key (talkroom_num)
);

create sequence sptalkroom_seq;

create table sptalk_member(
  talkroom_num number not null,
  mem_num number not null,
  room_name varchar2(900) not null,
  member_date date default sysdate not null, 
  constraint sptalkmember_fk1 foreign key (talkroom_num) references sptalkroom (talkroom_num),
  constraint sptalkmember_fk2 foreign key (mem_num) references spmember (mem_num)
);

create table sptalk(
  talk_num number not null,
  talkroom_num number not null,  -- 수신그룹
  mem_num number not null, -- 발신자
  message varchar2(4000) not null,
  chat_date date default sysdate not null,
  constraint sptalk_pk primary key (talk_num),
  constraint sptalk_fk1 foreign key (talkroom_num) references sptalkroom (talkroom_num),
  constraint sptalk_fk2 foreign key (mem_num) references spmember (mem_num)
);

create sequence sptalk_seq;

create table sptalk_read(
  talkroom_num number not null,
  talk_num number not null,
  mem_num number not null,
  constraint read_fk foreign key (talkroom_num) references sptalkroom (talkroom_num),
  constraint read_fk2 foreign key (talk_num) references sptalk (talk_num),
  constraint read_fk3 foreign key (mem_num) references spmember (mem_num)
);

talk.css

0.00MB

시간 단축을 위해 파일을 받아서 사용

kr.spring.talk.vo => TalkRoomVO

빨간줄이 있어도 그냥 냅둠 다음 VO만들면 사라짐

package kr.spring.talk.vo;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class TalkRoomVO {
	private long talkroom_num;		//채팅방 번호
	private String basic_name;		//기본 방이름
	private String talkroom_date;	//생성일
	
	private long[] members;			//채팅 멤버
	private long mem_num;			//채팅방 생성자
	private int room_cnt;			//읽지 않은 메시지수
	
	private TalkVO talkVO;
	private TalkMemberVO talkMemberVO; 
}

kr.spring.talk.vo => TalkVO

package kr.spring.talk.vo;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class TalkVO {
	private long talk_num;			//채팅번호
	private long talkroom_num;		//채팅방 번호(수신그룹)
	private long mem_num;			//발신자
	private String message;			//메시지
	private String chat_date;		//작성일
	
	private int read_count;			//일지 않은 메시지수
	private String id;
}

kr.spring.talk.vo => TalkMemberVO

package kr.spring.talk.vo;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class TalkMemberVO {
	private long talkroom_num;		//채팅방 멤버관리 번호
	private long mem_num;			//멤버 회원번호
	private String room_name;		//채팅방 이름
	
	private String id;				//멤버 아이디
}

kr.spring.talk.dao => TalkMapper

package kr.spring.talk.dao;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;

import kr.spring.talk.vo.TalkMemberVO;
import kr.spring.talk.vo.TalkRoomVO;
import kr.spring.talk.vo.TalkVO;

@Mapper
public interface TalkMapper {
	//채팅방 목록
	public List<TalkRoomVO> selectTalkRoomList(Map<String,Object> map);
	public Integer selectRowCount(Map<String,Object> map);
	//채팅방 번호 생성
	public Integer selectTalkRoomNum();
	//채팅방 생성
	public void insertTalkRoom(TalkRoomVO talkRoomVO);
	//채팅방 멤버 읽기
	public List<TalkMemberVO> selectTalkmember(Long talkroom_num);
	//채팅 메시지 번호 생성
	public Integer selectTalkNum();
	//채팅 메시지 등록
	public void insertTalk(TalkVO talkVO);
	//채팅 메시지 읽기
	public List<TalkVO> sleectTalkDetail(Map<String,Long> map);
	//읽은 채팅 기록 삭제
	public void deleteTalkRead(Map<String,Long> map);
	
}

kr.spring.talk.service => TalkService

package kr.spring.talk.service;

import java.util.List;
import java.util.Map;

import kr.spring.talk.vo.TalkMemberVO;
import kr.spring.talk.vo.TalkRoomVO;
import kr.spring.talk.vo.TalkVO;

public interface TalkService {
	//채팅방 목록
	public List<TalkRoomVO> selectTalkRoomList(Map<String,Object> map);
	public Integer selectRowCount(Map<String,Object> map);
	//채팅방 생성
	public void insertTalkRoom(TalkRoomVO talkRoomVO);
	//채팅방 멤버 읽기
	public List<TalkMemberVO> selectTalkmember(Long talkroom_num);	
	//채팅 메시지 등록
	public void insertTalk(TalkVO talkVO);
	//채팅 메시지 읽기
	public List<TalkVO> sleectTalkDetail(Map<String,Long> map);

}

kr.spring.talk.service =>TalkServiceImpl

package kr.spring.talk.service;

import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;


import kr.spring.talk.vo.TalkMemberVO;
import kr.spring.talk.vo.TalkRoomVO;
import kr.spring.talk.vo.TalkVO;

@Service
@Transactional
public class TalkServiceImpl implements TalkService{

	@Override
	public List<TalkRoomVO> selectTalkRoomList(Map<String, Object> map) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public Integer selectRowCount(Map<String, Object> map) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public void insertTalkRoom(TalkRoomVO talkRoomVO) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public List<TalkMemberVO> selectTalkmember(Long talkroom_num) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public void insertTalk(TalkVO talkVO) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public List<TalkVO> sleectTalkDetail(Map<String, Long> map) {
		// TODO Auto-generated method stub
		return null;
	}

}

kr.spring.talk.controller => TalkController

package kr.spring.talk.controller;

import javax.servlet.http.HttpSession;
import javax.websocket.Session;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

import kr.spring.member.service.MemberService;
import kr.spring.talk.service.TalkService;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
public class TalkController {
	@Autowired
	private TalkService talkService;
	@Autowired
	private MemberService memberService;
	
	/*===================
	 * 채팅방 목록
	 ====================*/
	@GetMapping("/talk/talkList")
	public String chatList(@RequestParam(defaultValue = "1") 
								int pageNum, String keyword,HttpSession Session, Model model) {
		
		
		return "talkList";
	}
}

kr.spring.config =>AppConfig.java

												.addPathPatterns("/talk/talkRoomWrite")
												.addPathPatterns("/talk/talkList")
												.addPathPatterns("/talk/talkDetail");

"/WEB-INF/tiles-def/talk.xml"

tiles-def => talk.xml

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">

<tiles-definitions>
	<definition name="talkList" extends="mypage">
		<put-attribute name="title" value="게시판 목록"/>
		<put-attribute name="css" value="/WEB-INF/views/talk/talkCSS.jsp"/>
		<put-attribute name="body" value="/WEB-INF/views/talk/talkList.jsp"/>
	</definition>
	
</tiles-definitions>

views => talk => talkCSS.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/talk.css">

talkList.jsp

talkList.jsp

0.00MB

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 

<!-- 중앙 컨텐츠 시작 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/talk.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.min.css">
<div class="page-main">
	<h2>채팅리스트</h2>
	<form action="talkList" id="search_form" method="get">
		<ul class="search">
			<li>
				<input type="search" name="keyword" id="keyword" value="${param.keyword}">
			</li>
			<li>
				<input type="submit" value="찾기">
				<input type="button" value="목록" onclick="location.href='talkList'">
			</li>
		</ul>
	</form>
	<div class="align-right">
		<input type="button" value="채팅방 생성" onclick="location.href='talkRoomWrite'">
	</div>
	<c:if test="${count==0}">
	<div class="result-display">표시할 채팅방이 없습니다.</div>
	</c:if>
	<c:if test="${count>0}">
	<table class="striped-table">
		<c:forEach var="talk" items="${list}">
		<tr>
			<td style="text-align:left;">
				<a href="talkDetail?talkroom_num=${talk.talkroom_num}">
					<b>${talk.talkMemberVO.room_name}(${talk.room_cnt})</b>
					<br>	
					<span>${fn:substring(talk.talkVO.message,0,45)}</span>
				</a>
				</td>
			<td>
				<c:if test="${!empty talk.talkVO.chat_date}">${talk.talkVO.chat_date}</c:if>
				<c:if test="${empty talk.talkVO.chat_date}">${talk.talkroom_date}</c:if>
			</td>
		</tr>
		</c:forEach>
	</table>
	<div class="align-center">${page}</div>
	</c:if>
</div>

nav_mypage.jsp

<li><input type="button" class="menu-btn" value="채팅"
			onclick="location.href='${pageContext.request.contextPath}/talk/talkList'">
		</li>

기존 css가 안먹힘

 

talkCSS.jsp 파일을 삭제하고 memberCSS.jsp에 기존에 있는 코드 내용추가

memberCSS랑 겹쳐서 충돌나기 때문

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/member.css" type="text/css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/talk.css">

 

talk.xml도 수정

<tiles-definitions>
	<definition name="talkList" extends="myPage">
		<put-attribute name="title" value="게시판 목록"/>
		<put-attribute name="body" value="/WEB-INF/views/talk/talkList.jsp"/>
	</definition>

memberCSS와 충돌이 해제되어 css가 잘 적용된 모습

talkRoomWrite.jsp

talkRoomWrite.jsp

0.00MB

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> 
<!-- 채팅방 생성 시작 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/message.talk.js"></script>
<div id="talkWrite" class="page-main">
	<h2>채팅방 생성</h2>
	<form action="talkRoomWrite" method="post" id="talk_form">
		<input type="hidden" name="members" id="user" data-id="${user.id}" value="${user.mem_num}">
		<ul>
			<li>
				<label for="basic_name">채팅방 이름</label>
				<input type="hidden" name="basic_name" id="basic_name">
				<span id="name_span"></span>
				<input type="checkbox" checked id="name_checked">(자동생성)
			</li>
			<li>
				<label>채팅회원검색</label>
				<input type="text" id="member_search" autocomplete="off">
				<ul id="search_area"></ul>
				<div id="talk_member"></div>
			</li>
		</ul>
		<div class="align-center">
			<input type="submit" value="전송">
			<input type="button" value="목록" onclick="location.href='talkList'">
		</div>
	</form>
</div>
<!-- 채팅방 생성 끝 -->

TalkController

/*===================
	 * 채팅방 생성 폼 호출
	 ====================*/
	@GetMapping("/talk/talkRoomWrite")
	public String talkRoomWrite() {
		return "talkRoomWrite";
	}

talk.xml 추가

<definition name="talkRoomWrite" extends="myPage">
		<put-attribute name="title" value="채팅방 생성"/>
		<put-attribute name="body" value="/WEB-INF/views/talk/talkRoomWrite.jsp"/>
	</definition>

채팅방 생성 버튼을 누를시 나오는 창

message.talk.js

talkRoomWrite.jsp 파일에 있던 링크값의 js파일 만들기

 

MemberMapper.java

//채팅 회원 정보 검색
	@Select("SELECT mem_num,id,nick_name FROM spmember WHERE auth >=2 AND id LIKE '%' || #{id} || '%'")
	public List<MemberVO> selectSerchmember(String id);

MemberService

//채팅 회원 정보 검색
	public List<MemberVO> selectSerchmember(String id);

MemberServiceImpl

@Override
	public List<MemberVO> selectSerchmember(String id) {
		
		return memberMapper.selectSerchmember(id);
	}

TalkController

//채팅 회원 검색
	@GetMapping("/talk/memberSerchAjax")
	@ResponseBody
	public Map<String,Object> meberSearchAjax(
								String id, HttpSession session){
		Map<String,Object> mapJson = new HashMap<String, Object>();
		
		MemberVO user = (MemberVO)session.getAttribute("user");
		if(user==null) {
			//로그인이 되지 않은 경우
			mapJson.put("result","logout");
		}else {
			//로그인 된 경우
			List<MemberVO> member = memberService.selectSerchmember(id);
			
			mapJson.put("result","success");
			mapJson.put("member",member);
		}
		
		return mapJson;
	}

message.talk.js

$(function(){
	let message_socket; //웹소켓 식별자
	
	/*--------------------
	 * 채팅 회원 저장
	 *--------------------*/
	
	/*--------------------
	 * 웹소켓 연결
	 *--------------------*/
	
	/*--------------------
	 * 채팅방 생성하기
	 *--------------------*/
	//회원 정보 검색
	$('#member_search').keyup(function(){
		if($('#member_search').val().trim()==''){
			$('#search_area').empty();
			return;
		}
		//서버와 통신
		
	});
	/*--------------------
	 * 채팅하기
	 *--------------------*/
});