1.29 (tiles-채팅 상세보기 폼 UI 수정)

 

 

 

<복습>

 

 

채팅순서

TalkMapper.java

1. 채팅방 번호 생성 (pk 생성)

2. 채팅방 생성 (1 pk 전달-> 생성)

3. 채팅방 멤버 등록

talkroom_num=수신그룹

room_name=basic_name or 수동설정한 이름

mem_num=개설자

 

---

 

 

<채팅방 상세보기>

 

 

 

TalkMapper.xml

<!--채팅 메시지 읽기-->
<select id="selectTalkDetail" parameterType="integer" resultType="talkVO">
    SELECT
        <![CDATA[
        REPLACE(REPLACE(message,'<','&lt;'),'>','&gt;') message,
        ]]>
        chat_date,
        read_count,
        mem_num,
        id
    FROM sptalk
    LEFT OUTER JOIN(SELECT
        talk_num,
        count(*) read_count
    FROM sptalk_read
    GROUP BY talk_num) USING(talk_num)
    JOIN spmember USING(mem_num)
    WHERE talkroom_num=#{talkroom_num}
    AND chat_date >= (SELECT
                            member_date
                        FROM sptalk_member
                        WHERE talkroom_num=#{talkroom_num}
                        AND mem_num=#{mem_num}) /*멤버 등록일 이후의 정보만 읽어옴*/
    ORDER BY chat_date ASC
</select>

1.

talkSub의 sptalk_read >> 읽지않은 메시지 sql문 나타냄

 

2.

map.put("mem_num", user.getMem_num());

사용자 본인 채팅목록만 빼내기 위해 본인이 들어가있는 채팅방만 보여줌

 

 

 

 

스타일 파일 생략

 

 

 

 

읽지않은 채팅 기록 저장

TalkMapper.java

//읽지 않은 채팅 기록 저장
@Insert("INSERT INTO sptalk_read (talkroom_num,talk_num,mem_num) VALUES (#{talkroom_num},#{talk_num},#{mem_num})")
public void insertTalkRead(@Param(value="talkroom_num") int talkroom_num,
                           @Param(value="talk_num") int talk_num,
                           @Param(value="mem_num") int mem_num);

 

 

 

 

 

 

TalkServiceImpl

@Override
public void insertTalk(TalkVO talkVO) {
    talkVO.setTalk_num(talkMapper.selectTalkNum()); //pk 구하기
    talkMapper.insertTalk(talkVO);

    //채팅 멤버가 읽지 않은 채팅 정보 저장
    for(TalkMemberVO vo : talkMapper.selectTalkMember(talkVO.getTalkroom_num())) {
        talkMapper.insertTalkRead(talkVO.getTalkroom_num(),
                                  talkVO.getTalk_num(),
                                  vo.getMem_num());
    }
}

 

 

 

 

 

 

 

TalkController

//채팅 메시지 읽기 (ajax통신)
@RequestMapping("/talk/talkDetailAjax")
@ResponseBody
public Map<String,Object> talkDetailAjax(@RequestParam int talkroom_num,
                                         HttpSession session){

    Map<String,Object> mapAjax = new HashMap<String,Object>();

    MemberVO user = (MemberVO)session.getAttribute("user");
    if(user==null) { //로그인이 되지 않은 경우
        mapAjax.put("result", "logout");
    }else {//로그인된 경우
        Map<String,Integer> map = new HashMap<String,Integer>(); //데이터 담아서 보낼 준비
        map.put("talkroom_num", talkroom_num);
        map.put("mem_num", user.getMem_num());
        List<TalkVO> list = talkService.selectTalkDetail(map);

        mapAjax.put("result", "success");
        mapAjax.put("list", list);
        mapAjax.put("user_num", user.getMem_num());
    }
    return mapAjax;
}

 

 

 

 

 

 

 

 

message.talk.js

/*--------------------------
*	채팅하기
* --------------------------*/	
//채팅 데이터 읽기
function selectMsg(){
    //서버와 통신
    $.ajax({
        url:'../talk/talkDetailAjax',
        type:'post',
        data:{talkroom_num:$('#talkroom_num').val()},
        dataType:'json',
        success:function(param){
            if(param.result == 'logout'){
                alert('로그인 후 사용하세요!');
            }else if(param.result == 'success'){

                //메시지 표시 UI 초기화
                $('#chatting_message').empty();

                let chat_date = '';
                $(param.list).each(function(index,item){
                    let output = '';
                    //날짜 추출
                    if(chat_date != item.chat_date.split(' ')[0]){
                        chat_date = item.chat_date.split(' ')[0];
                        output += '<div class="date-position"><span>'+chat_date+'</span></div>';
                    }

                    if(item.message.indexOf('@{member}@')>=0){//멤버등록 메시지 처리
                        //신규 회원 메시지
                        output += '<div class="member-message">';
                        output += item.message.substring(0,item.message.indexOf('@{member}@'));
                        output += '</div>';
                    }else{
                        //멤버등록 메시지가 아닌 일반 메시지
                        if(item.mem_num == param.user_num){
                            output += '<div class="from-position">'+item.id;
                            output += '<div>';
                        }else{
                            output += '<div class="to-position">';
                            output += '<div class="space-photo">';
                            output += '<img src="../member/viewProfile?mem_num='+item.mem_num+'" width="40" height="40" class="my-photo">';
                            output += '</div><div class="space-message">';
                            output += item.id;
                        }

                        output += '<div class="item">';
                        output += item.read_count + '<span>' + item.message + '</span>';
                        //시간 추출
                        output += '<div class="align-right">'+item.chat_date.split(' ')[1]+'</div>';
                        output += '</div>';
                        output += '</div><div class="space-clear"></div>';
                        output += '</div>';
                    }

                    //문서 객체에 추가
                    $('#chatting_message').append(output);
                    //스크롤을 하단에 위치시킴
                    $('#chatting_message').scrollTop($('#chatting_message')[0].scrollHeight);					
                });
            }else {
                alert('채팅 메시지 읽기 오류 발생');
            }
        },
        error:function(){
            alert('네트워크 오류 발생');
        }
    });
}

//초기 데이터 호출
selectMsg();

1.
$(param.list).each(function(index,item){
여러번이라 반복문을 사용해서 그 안에 다 넣어야함

2.
if(item.message.indexOf('@{member}@')>=0){//멤버등록 메시지 처리
>> 초대메시지 (정중앙 배치)
일반 메시지 (좌우 배치)는 else로 빠져서 처리

3.
if(item.mem_num == param.user_num){
mem_num == user_num (작성자)
오른쪽 배치 from-position
else 타인은 프로필 사진 + 메시지 왼쪽 to-position 배치

 

4.
일단 실행되는걸 봐야하니까 맨 아래에
//초기 데이터 호출
selectMsg(); 를 넣어서 실행되는지 확인

 

 

 

 

[실행결과]