From ec7da903335baef8e8cc72bfa1dffe521891e3ec Mon Sep 17 00:00:00 2001 From: leejeongjun Date: Fri, 24 May 2024 06:53:48 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9E=84=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 임시 --- .../kr/co/ssalon/chat/ChatPreHandler.java | 5 + .../kr/co/ssalon/domain/entity/Message.java | 7 +- .../co/ssalon/domain/service/ChatService.java | 4 +- .../ssalon/web/controller/ChatController.java | 3 +- .../java/kr/co/ssalon/web/dto/MessageDTO.java | 3 + back-end/src/main/resources/static/app.js | 104 ++++++++++++++++++ back-end/src/main/resources/static/chat.html | 53 +++++++++ 7 files changed, 175 insertions(+), 4 deletions(-) create mode 100644 back-end/src/main/resources/static/app.js create mode 100644 back-end/src/main/resources/static/chat.html diff --git a/back-end/src/main/java/kr/co/ssalon/chat/ChatPreHandler.java b/back-end/src/main/java/kr/co/ssalon/chat/ChatPreHandler.java index af9e9b0d..067b7d92 100644 --- a/back-end/src/main/java/kr/co/ssalon/chat/ChatPreHandler.java +++ b/back-end/src/main/java/kr/co/ssalon/chat/ChatPreHandler.java @@ -35,6 +35,11 @@ public Message preSend(Message message, MessageChannel channel) { String username = jwtUtil.getUsername(accessToken); accessor.getSessionAttributes().put("username", username); + if (StompCommand.SEND.equals(accessor.getCommand())) { + String messageType = accessor.getNativeHeader("MessageType").get(0); + accessor.getSessionAttributes().put("messageType", messageType); + } + if (StompCommand.CONNECT.equals(accessor.getCommand())) { String moimId = accessor.getFirstNativeHeader("moimId"); memberToChatRoomIdMap.put(username, moimId); diff --git a/back-end/src/main/java/kr/co/ssalon/domain/entity/Message.java b/back-end/src/main/java/kr/co/ssalon/domain/entity/Message.java index 0e4c4b12..f6dc3648 100644 --- a/back-end/src/main/java/kr/co/ssalon/domain/entity/Message.java +++ b/back-end/src/main/java/kr/co/ssalon/domain/entity/Message.java @@ -13,11 +13,15 @@ @Builder @AllArgsConstructor public class Message { + @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "message_id") private Long id; + @Column(name = "message_type") + private String messageType; + @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "member_meeting_id") private MemberMeeting memberMeeting; @@ -37,13 +41,14 @@ public class Message { protected Message() {} - public static Message createMessage(MemberMeeting memberMeeting, String message) { + public static Message createMessage(MemberMeeting memberMeeting, String message, String messageType) { return Message.builder() .memberMeeting(memberMeeting) .meetingId(memberMeeting.getMeeting().getId()) .memberId(memberMeeting.getMember().getId()) .message(message) .sentAt(LocalDateTime.now()) + .messageType(messageType) .build(); } } diff --git a/back-end/src/main/java/kr/co/ssalon/domain/service/ChatService.java b/back-end/src/main/java/kr/co/ssalon/domain/service/ChatService.java index e1ea2db5..e1aa279e 100644 --- a/back-end/src/main/java/kr/co/ssalon/domain/service/ChatService.java +++ b/back-end/src/main/java/kr/co/ssalon/domain/service/ChatService.java @@ -22,9 +22,9 @@ public class ChatService { private final MessageRepository messageRepository; @Transactional - public MessageDTO saveMessage(Member member, Meeting meeting, String message) throws BadRequestException { + public MessageDTO saveMessage(Member member, Meeting meeting, String message, String messageType) throws BadRequestException { MemberMeeting memberMeeting = memberMeetingService.findByMemberAndMeeting(member, meeting); - Message messageEntity = Message.createMessage(memberMeeting, message); + Message messageEntity = Message.createMessage(memberMeeting, message, messageType); messageEntity = messageRepository.save(messageEntity); return new MessageDTO(messageEntity); diff --git a/back-end/src/main/java/kr/co/ssalon/web/controller/ChatController.java b/back-end/src/main/java/kr/co/ssalon/web/controller/ChatController.java index b72fcbbe..85847cb2 100644 --- a/back-end/src/main/java/kr/co/ssalon/web/controller/ChatController.java +++ b/back-end/src/main/java/kr/co/ssalon/web/controller/ChatController.java @@ -45,11 +45,12 @@ public class ChatController { @SendTo("/room/{roomId}") public MessageDTO chat(SimpMessageHeaderAccessor accessor, @DestinationVariable Long roomId, @Payload Map message) throws BadRequestException { String username = (String) accessor.getSessionAttributes().get("username"); + String messageType = (String) accessor.getSessionAttributes().get("messageType"); Member member = memberService.findMember(username); Meeting meeting = meetingService.findMeeting(roomId); // 채팅 메시지 저장 - MessageDTO messageDTO = chatService.saveMessage(member, meeting, message.get("message")); + MessageDTO messageDTO = chatService.saveMessage(member, meeting, message.get("message"), messageType); return messageDTO; } diff --git a/back-end/src/main/java/kr/co/ssalon/web/dto/MessageDTO.java b/back-end/src/main/java/kr/co/ssalon/web/dto/MessageDTO.java index 7a865c67..4f747591 100644 --- a/back-end/src/main/java/kr/co/ssalon/web/dto/MessageDTO.java +++ b/back-end/src/main/java/kr/co/ssalon/web/dto/MessageDTO.java @@ -14,6 +14,8 @@ @Builder public class MessageDTO { + @NotBlank + private String messageType; @NotBlank private String nickname; @NotBlank @@ -28,6 +30,7 @@ public class MessageDTO { public MessageDTO(Message messageEntity) { Member messageSendMember = messageEntity.getMemberMeeting().getMember(); + this.messageType = messageEntity.getMessageType(); this.nickname = messageSendMember.getNickname(); this.profilePicture = messageSendMember.getProfilePictureUrl(); this.message = messageEntity.getMessage(); diff --git a/back-end/src/main/resources/static/app.js b/back-end/src/main/resources/static/app.js new file mode 100644 index 00000000..7caaabab --- /dev/null +++ b/back-end/src/main/resources/static/app.js @@ -0,0 +1,104 @@ +const accessToken = "Bearer " + getCookie('access'); // header or cookie 사용 + +// 소켓 연결을 위한 객체 생성 +const stompClient = new StompJs.Client({ + brokerURL: 'wss://ssalon.co.kr/ws-stomp', + connectHeaders: { + Authorization: accessToken, + }, +}); + +// 소켓 연결 시도 +function connect() { + stompClient.activate(); +} + +// 소켓 연결이 된 직후 채팅방 구독(subscribe) +stompClient.onConnect = (frame) => { + setConnected(true); + console.log('Connected: ' + frame); + stompClient.subscribe('/room/1', (greeting) => { // 특정 모임 아이디로 설정 + showMessage(JSON.parse(greeting.body)); + }); + stompClient.publish({ + destination: "/send/1", // 특정 모임 아이디로 설정 + headers: { + "Authorization": accessToken, + "MessageType": "ENTER", + }, + body: JSON.stringify({ + 'message': "입장하였습니다.", + }) + }); +}; + +// 메시지 전송(publish) +function sendMessage() { + stompClient.publish({ + destination: "/send/1", // 특정 모임 아이디로 설정 + headers: { + "Authorization": accessToken, + "MessageType": "TALK", + }, + body: JSON.stringify({ + 'message': $("#message").val(), + }) + }); +} + +// 메시지를 html에 출력 +function showMessage(messageObj) { // messageObj = nickname, message, profilePicture, date + $("#greetings").append("" + messageObj.nickname + " : " + messageObj.message + ""); +} + +// 기존 채팅 불러오기 +function loadChat(chatList) { + // GET /api/chat/{moimId} API 호출 +} + +// 소켓 연결 여부에 따른 UI 변경 +function setConnected(connected) { + $("#connect").prop("disabled", connected); + $("#disconnect").prop("disabled", !connected); + if (connected) { + $("#conversation").show(); + } + else { + $("#conversation").hide(); + } + $("#greetings").html(""); +} + +// 소켓 연결 해제 +function disconnect() { + stompClient.deactivate(); + setConnected(false); + console.log("Disconnected"); +} + +// 에러 핸들링 +stompClient.onWebSocketError = (error) => { + console.error('Error with websocket', error); +}; + +// 에러 핸들링 +stompClient.onStompError = (frame) => { + console.error('Broker reported error: ' + frame.headers['message']); + console.error('Additional details: ' + frame.body); +}; + +// 버튼 클릭에 따른 함수 실행 +$(function () { + $("form").on('submit', (e) => e.preventDefault()); + $( "#connect" ).click(() => connect()); + $( "#disconnect" ).click(() => disconnect()); + $( "#send" ).click(() => sendMessage()); +}); + +// 쿠키 가져오기 +function getCookie(name) { + let matches = document.cookie.match(new RegExp( + "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" + )); + return matches ? decodeURIComponent(matches[1]) : undefined; +}; diff --git a/back-end/src/main/resources/static/chat.html b/back-end/src/main/resources/static/chat.html new file mode 100644 index 00000000..abbcb610 --- /dev/null +++ b/back-end/src/main/resources/static/chat.html @@ -0,0 +1,53 @@ + + + + Hello WebSocket + + + + + + + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+ +
+
+
+
+
+ + + + + + + + + +
Greetings
+
+
+
+ +