📍 STOMP를 이용한 Socket 통신 구현

---

💡 STOMP (Simple Text Oriented Messaging Protocol)

• 메세징 전송을 효율적으로 하기 위해 탄생한 프로토콜
• Text 지향 프로토콜이나, Message Payload에는 Text or Binary 데이터를 포함할 수 있음
• 메세지 브로커를 사용하여 pub / sub 구조로 되어있어 메세지를 전송하고 메세지를 받아 처리하는 부분이 확실함
  ➡ pub / sub (발행 및 구독) : 메세지를 발행하는 주체와 소비하는 주체를 분리하여 제공하는 메세징 방법
• 개발자 입장에서 명확하게 인지하고 개발할 수 있음
• 이전에는 WebSocketSession에 직접 메세지를 전달했지만, STOMP는 특정 패턴(문자열) 구독을 통해 WebSocketSession에 직접 다루지 않고, 컨트롤러로 요청
  ➡ 소켓과 느슨한 연결로 가벼워짐

  Websocket 위에서 동작하는 프로토콜로써 클라이언트와 서버가 전송할 메세지의 유형, 형식, 내용을 정의하는 메커니즘.

✔ Spring 에서 지원하는 STOMP

• Spring에서 STOMP가 내장하고 있는 Broker의 역할
  - 클라이언트가 서버에 메세지를 보내면 구독 주소를 Broker에게 전달
  - Broker는 해당 주소를 구독하고 있는 클라이언트들에게 메세지 전달
  ➡ HTTP 기반의 보안 설정과 공통된 검증 등 적용 가능

✔ STOMP 흐름

1. 클라이언트가 서버에게 악수 요청 (소켓, 토큰 보내기)
2. 서버가 커넥션 열어줌 (소켓 연결 ➡ 해당 구독 주소 통신 가능한 상태)
3. 발행 주소(컨트롤러)로 클라이언트가 서버에 요청하면, 서버에서 해당 구독 주소로 메세지 전송

---

💻 Spring + STOMP를 이용한 Socket 통신 구현

✔ bulil.gradle에 추가

	implementation 'org.springframework.boot:spring-boot-starter-websocket'
	implementation 'org.webjars:sockjs-client:1.1.2'
	implementation 'org.webjars:stomp-websocket:2.3.3-1'

✔ WebSocketConfig 파일

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

	@Override
  	public void registerStompEndpoints(StompEndpointRegistry registry) {
    	// websocket에 접속하기 위한 endpoint 설정, 도메인이 다른 서버에서도 접속 가능하도록 CORS 설정
    	registry.addEndpoint("/ws-stomp") // WebSocket 또는 SockJS Client가 웹소켓 핸드셰이크 커넥션을 생성할 경로
        .setAllowedOriginPatterns("*")
        .withSockJS(); // sockJS 등록
  }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {

        registry.setApplicationDestinationPrefixes("/pub"); //client에서 SEND 요청 처리 (수신)
        registry.enableSimpleBroker("/sub"); //해당 경로로 SimpleBroker 등록, SimpleBroker는 해당 경로를 구독하는 client에게 메시지를 전달 (발신)


    }
     									.
										.
                                        .
}

✔ 채팅방 Entity

@Entity
@ApiModel(value = "개인 채팅룸 정보", description = "개인 채팅룸 정보를 나타낸다.")
public class ChatRoom {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  @Column(name = "CHAT_ROOM_NO")
  @ApiModelProperty(value = "개인 채팅방 번호")
  private Integer no;

  @ManyToOne(fetch = LAZY)
  @JoinColumn(name="PUBLISHER_NO")
  @ApiModelProperty(value = "보내는 사람")
  private User publisher;

  @ManyToOne(fetch = LAZY)
  @JoinColumn(name="SUBSCRIBER_NO")
  @ApiModelProperty(value = "받는 사람")
  private User subscriber;

}

✔ 채팅 메세지 Entity

@Entity
@ApiModel(value = "채팅 메세지 정보", description = "채팅 메세지 정보를 나타낸다.")
public class ChatMessage {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  @Column(name = "CHAT_MESSAGE_NO")
  @ApiModelProperty(value = "채팅 메세지 번호")
  private Integer no;

  @ManyToOne(fetch = LAZY)
  @JoinColumn(name="PROJECT_ROOM_NO")
  @ApiModelProperty(value = "채팅방 번호")
  private ChatRoom chatRoom;

  @ManyToOne(fetch = LAZY)
  @JoinColumn(name="USER_NO")
  @ApiModelProperty(value = "유저 번호")
  private User user;

  @ApiModelProperty(value = "채팅 내용")
  private String content;

  @ApiModelProperty(value = "전송 시간")
  private LocalDateTime time;

}

✔ 유저 Entity

package com.ssafy.proma.model.entity.user;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Builder;
import lombok.Getter;

import javax.persistence.*;

@Getter
@Entity
@Builder
@NoArgsConstructor
@ApiModel(value = "회원정보", description = "회원의 상세 정보를 나타낸다.")
public class User {

    @Id
    @Column(name = "USER_NO", nullable = false, length = 15)
    @ApiModelProperty(value = "회원 번호")
    private String no;

    @Column(length = 15)
    @ApiModelProperty(value = "회원 닉네임")
    private String nickname;

        								.
										.
                                        .
}

✔ 채팅방 Controller

@RestController
@RequestMapping("/chat")
@RequiredArgsConstructor
public class ChatRoomController {

  private final ChatService chatService;

  @ApiOperation(value = "개인 채팅 생성 및 조회", notes = "해당 유저와 개인 채팅방 생성 및 조회")
  @GetMapping("/room/user/{subNo}")
  public ResponseEntity<Map<String, Object>> getChatRoom(@PathVariable String subNo
  	, @RequestParam(required = false) Integer lastMsgNo) {
    
    Map<String, Object> result = new HashMap<>();
    HttpStatus status = HttpStatus.ACCEPTED;

    try{
      result = chatService.getChatRoom(subNo, lastMsgNo);

      if(result.get("message").equals(CHATROOM_SUCCESS_MESSAGE)) {
        status = HttpStatus.OK;
      }
    } catch (Exception e) {
      result.put("message", CHATROOM_ERROR_MESSAGE);
      status = HttpStatus.INTERNAL_SERVER_ERROR;
    }
    return new ResponseEntity<>(result, status);
  }
}

• 채팅방 버튼을 누르면 채팅방 생성 및 조회 (Service는 생략)

✔ 채팅 메세지 Controller

@Controller
@RequiredArgsConstructor
public class ChatMessageController {

    private final SimpMessageSendingOperations messagingTemplate;
    private final ChatService chatService;

    @ApiOperation(value = "채팅 메세지 전송", notes = "해당 채팅방으로 메세지 전송")
    @MessageMapping("/chat/msg")
    public void privateMessage(@RequestBody ChatMessageReq message) {
        ChatMessageRes response = chatService.savePrivateMessage(message);
        messagingTemplate.convertAndSend("/sub/chat/room/user/" + response.getRoomNo(), response);
    }
}

✔ 채팅 메세지 Service

@Service
@RequiredArgsConstructor
public class ChatService {

  private final UserRepository userRepository;
  private final ChatRoomRepository chatRoomRepository;
  private final ChatMessageRepository chatMessageRepository;

  public ChatMessageRes savePrivateMessage(ChatMessageReq request) {

    chatRoom chatRoom = findChatRoom(request.getRoomNo());
    User user = findUser(request.getPubNo());
    String content = request.getContent();
    LocalDateTime time = LocalDateTime.now();

    ChatMessageRes response = new ChatMessageRes(chatRoom.getNo(), user.getNo(),
            user.getNickname(), content, time);

    ChatMessage chatMessage = ChatMessageDto.toPrivateMsgEntity(chatRoom, user, content, time);
    chatMessageRepository.save(chatMessage);

    System.out.println("채팅저장완료.");

    return response;

  }
}

✔ 채팅방 화면 일부분

<div class="container" id="app" v-cloak>
    <div>
        <h2>채팅방</h2>
    </div>
    <div class="input-group">
        <div class="input-group-prepend">
            <label class="input-group-text">내용</label>
        </div>
        <input type="text" class="form-control" v-model="content" v-on:keypress.enter="sendMessage">
        <div class="input-group-append">
            <button class="btn btn-primary" type="button" @click="sendMessage">보내기</button>
        </div>
    </div>
    <ul class="list-group">
        <li class="list-group-item" v-for="message in messages">
            {{message.nickname}} - {{message.content}} {{message.time}}</a>
        </li>
    </ul>
    <div></div>
</div>

<script>
    var sock = new SockJS("http://localhost:8080/ws-stomp");
    var ws = Stomp.over(sock);
    var reconnect = 0;
    // vue.js
    var vm = new Vue({
        el: '#app',
        data: {
            roomNo: '',
            pubNo: '',
            content: '',
            messages: []
        },
        created() {
            this.roomNo = "${roomNo}";
            this.pubNo = "${userNo}";
        },
        methods: {
            sendMessage: function() {
                ws.send("/pub/chat/msg", {"JWT":""}, JSON.stringify({roomNo:this.roomNo, pubNo:this.pubNo, content:this.content}));
                this.message = '';
            },
            recvMessage: function(recv) {
                this.messages.unshift({"nickname":recv.nickname,"content":recv.content, "time":recv.time})
            }
        }
    });

    function connect() {
        // pub/sub event
        ws.connect({"JWT":""}, function(frame) {
            ws.subscribe("/sub/chat/room/user/"+vm.$data.roomNo, function(message) {
                var recv = JSON.parse(message.body);
                vm.recvMessage(recv);
            });
        }, function(error) {
            if(reconnect++ <= 5) {
                setTimeout(function() {
                    console.log("connection reconnect");
                    sock = new SockJS("http://localhost:8080/ws-stomp");
                    ws = Stomp.over(sock);
                    connect();
                },10*1000);
            }
        });
    }
    connect();
</script>