고래씌

1. 채팅방 나가기 ▶ chat.js// 채팅방 나가기 let exitBtn = document.querySelector("#exit-btn"); exitBtn.onclick = function() { location.href = `${contextPath}/chat/chatRoom/${chatRoomNo}/exit`; } ▶ ChatController.java ☞ 채팅방 나가기 → 만약 채팅방에 마지막으로 나간 인원이 본인이라면 채팅방 삭제처리//채팅방 나가기 @GetMapping("/chatRoom/{chatRoomNo}/exit") public String exitChatRoom( @ModelAttribute("loginUser") Member loginUser, @PathVariable("chat..

1. 채팅방 메세지 실시간 전송(F5를 누르지않아도 바로 생성되도록 작업) ☞ 메시지를 db에 성공적으로 저장했다면, 전달받은 메시지를 같은방에 접속중인 클라이언트들에게 전달 ☞ ChatWebSocket.java에 추가 ☞ public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {} 메소드 안에 추가 ☞ 참여한 인원이 중복되지 않도록 DB에 제약조건 추가 ALTER TABLE CHAT_ROOM_JOIN ADD PRIMARY KEY(USER_NO, CHAT_ROOM_NO); ▶ ChatWebSocket.java /* 클라이언트로부터 메시지(message)가 도착했을 시 실행되는 함수 */ @Ov..

1. 채팅방 통신 ▶ chatRoom.jsp => 다음과 같이 수정 WebSocket 이란? - 브라우저와 웹서버간의 통신을 지원하는 프로토콜 * 전이중통신(Full Duplex) : 두대의 단말기가 데이터를 송수신하기위해, 각각 독립된 회선을 사용하는 방식 ex) 전화기 - HTML5부터 지원 - JAVA에서는 7버전부터 지원(8이상부터 사용 권장) - Spring Framework 4버전 이상부터 지원 => 맨아래에 스크립트 추가 ▶ chat.js => 반드시 JSON 형식으로 보내야한다!!!(문자열 형태로 보내야함) => send(값) : 웹소켓 핸들러로 값을 보내는 역할을 하는 함수. send로 전달된 데이터는 웹소켓핸들러 내부의 handleTextMessage함수가 수신함// 채팅메세지 보내기 ..

1. 채팅방참여, 인원수 증가, 메세지 조회=> views/chat폴더아래에 chatRoom.jsp 파일 생성 => 채팅방 배경화면 추가를 위해 아래와 같이 추가 ▶ chatRoom.jsp ▶ ChatController.java ☞ CHAT_ROOM_JOIN안에 참여한 채팅방번호(chatRoomNo)와 현재 참여한 회원번호(userNo)를 담아서 INSERT(참여인원수 증가시키기 위해서) ☞ 채팅방 참여(isnert)후, 해당 채팅방의 채팅메세지 조회(select) => 맨위에 chatRoomNo 추가함. chatRoomNo은 세션으로 데이터 이관하기 위해서 추가한다! ▶ ChatService.javaList joinChatRoom(ChatRoomJoin join); ▶ ChatServiceImpl.ja..

1. 채팅방 서비스 하기 위한 세팅 - 메이븐 레파지토리에서 복사 => 복붙 후 일단 버전은 지워주고 ${org.springframework-version} 작성(pom.xml 맨 위에 가면 properties 에서 키값 복사) 이것은 웹소켓의 자료파일 묶음임! ▶ pom.xml org.springframework spring-websocket ${org.springframework-version} ▶ servlet-context.xml => Chat관련 클래스 추가 ▶ ChatWebsocket.java1) 동기화 처리- HashSet 같은 경우 동기화가 안되어있음 => 그래서 synchronizedSet 를 이용하면 동기화된 set 객체를 반환할 수 있음. - synchronizedSet : 동기화된 ..

1. 댓글 목록 => 다음과 같이 파일 모두 생성 ▶ Reply.vo package com.kh.spring.board.model.vo; import lombok.Getter; import lombok.NoArgsConstructor; import lombok.Setter; import lombok.ToString; @Getter @Setter @NoArgsConstructor @ToString public class Reply { private int replyNo; private String replyContent; private String refBno; private String replyWriter; private String createDate; private String status; } ▶..

1. 일반게시판 수정 => views/board/boardUpdateEnrollFrom.jsp 파일 생성 ▶ boardUpdateEnrollFrom.jsp - 사진이 없던 곳에 새롭게 추가된 경우 → INSERT - 사진이 있던 곳에 새롭게 추가된 경우 → UPDATE - 사진이 있던 곳에 삭제가 된 경우 → DELETE - 사진이 있거나, 없던 곳에 그대로 없는 경우 → X - 존재하고 있는 이미지가 제거된 경우, 해당 이미지의 pk(board_img_no)를 input태그에 저장시켜서 value값안에 있는 pk값으로 delete문의 조건식에 활용할 예정 - 만약 value값 안에 (1,3,5)라는 값이 담겨있다 → DELETE FROM BOARD_IMG WHERE BOARD_IMG_NO IN (1,3..

1. 사진 다운로드 추가 ▶ boardDetailView.jsp => 빨간 밑줄 코드 추가 ▶ BoardController.java => ResourceLoader 의존성 주입을 위해서 추가 // 사진 다운로드 @GetMapping("/fileDownload/{boardNo}") public ResponseEntity fileDownload(@PathVariable("boardNo") int boardNo) { ResponseEntity responseEntity = null; // db에서 board테이블에서 boardNo값과 일치하는 행의 파일정보 조회 BoardExt b = boardService.selectBoard(boardNo); if(b.getOriginName() == null) { ret..

1. 일반 게시판 상세보기, 조회수 증가 ▶ 게시판목록에서 클릭 시 기능 만들기 ▶ boardListView.jsp ${bt.boardName} 글쓰기 글번호 제목 작성자 조회수 작성일 게시글이 없습니다. ${board.boardNo } ${board.boardTitle } ${board.boardWriter } ${board.count} ${board.createDate } --% Previous ${p} NEXT 작성자 제목 내용 제목+내용 검색 ▶ boardDetailView.jsp => core와 functions 추가 게시글 상세보기 제목 ${board.boardTitle} 작성자 ${board.boardWriter} 작성일 ${board.createDate} 첨부파일 ${board.origin..

1. 사진 여러개를 업로드 할 때 ▶ boardEnrollForm.jsp => 사진게시판일 때는 여러개의 사진을 업로드 할 수 있도록 하는 form이 보이도록 하고 아닐 때는 첨부파일이 하나만 첨부할 수 있도록 보이도록 설정 첨부파일 업로드 이미지1 × 업로드 이미지2 × 업로드 이미지3 × 업로드 이미지4 × => 사용자가 등록한 이미지를 미리 볼 수 있도록 설정 => X 버튼을 클릭하면 사진 미리보기를 삭제하도록 설정 ☞ 사진 미리 볼수 있는 것을 확인 ☞ X 클릭시 사진 미리보기가 삭제되는 것을 확인 1) 게시판 이미지를 저장 ▶ BoardImg.java => 게시판 이미지를 저장할 vo를 만들어줌(BoardImg.java) package com.kh.spring.board.model.vo; imp..