Spring Boot 채팅 구현(SockJS,Stomp) 1. 환경 설정 및 기본 동작 구현

Dependency

패키지 구조

Config.java

package com.velog.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class Config implements WebSocketMessageBrokerConfigurer{

	@Override
	public void configureMessageBroker(MessageBrokerRegistry registry) {
		//subscribe url
		registry.enableSimpleBroker("/topic");
		//publish url
		registry.setApplicationDestinationPrefixes("/app");
	}
	@Override
	public void registerStompEndpoints(StompEndpointRegistry registry) {
		//SockJs 생성 url
		
		registry.addEndpoint("/chat").withSockJS();
	}
	

	
}

configureMessageBroker()
subscribe, publish url을 설정합니다.
registerStompEndpoints()
SockJS 생성 endpoint를 지정합니다.

chat.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="UTF-8">
	<title>Chating</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.container{
			width: 500px;
			margin: 0 auto;
			padding: 25px
		}
		.container h1{
			text-align: left;
			padding: 5px 5px 5px 15px;
			color: #FFBB00;
			border-left: 3px solid #FFBB00;
			margin-bottom: 20px;
		}
		.chating{
			background-color: #000;
			width: 500px;
			height: 500px;
			overflow: auto;
		}
		.chating p{
			color: #fff;
			text-align: left;
		}
		input{
			width: 330px;
			height: 25px;
		}
	</style>
</head>
<script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>
<script type="text/javascript">

	var sender = 1;   //사용자
	var chatRoom_id = 1;    // 채팅방 id
	
	//sockJs connect
	function connect() {
    	//Config.java에서 지정한 endpoint로 SockJS 객체 생성
	    var socket = new SockJS('/chat');
	    stompClient = Stomp.over(socket);
	    
	    
	    stompClient.connect({}, function () {
        	//subscribe(subcribe url,데이터 수신시 실행할 함수)
	        stompClient.subscribe('/topic/'+chatRoom_id, function (e) {
	            showMessage(JSON.parse(e.body));
	        });
	    });
	}
	
	connect();
	
	//메시지를 보낼때 호출할 함수
	function send() {
	    data = {
	    		'chatRoom_id': chatRoom_id, 
	    		'sender' :sender,
	    		'contents': $("#chatting").val(),
	    		};
         // 파라미터 -> (destination, headers = {}, body = '')
	    stompClient.send("/app/chat/send", {}, JSON.stringify(data));
        //input 값 비우기
	    $("#chatting").val('');
	}

	// msg 화면에 표시
	function showMessage(msg){
			$("#chating").append("<p>" + msg.sender +" : "+ msg.contents + "</p>");
	}
</script>
<body>
	<div id="container" class="container">
		<h1>채팅</h1>
		<div id="chating" class="chating">
		</div>
		
		<div id="yourMsg">
			<table class="inputTable">
				<tr>
					<th>메시지</th>
					<th><input id="chatting" placeholder="보내실 메시지를 입력하세요."></th>
					<th><button onclick="send()" id="sendBtn">보내기</button></th>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>

채팅창 화면과 스크립트 코드입니다.

SockJSController.java

package com.velog.controller;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

import com.velog.dto.MessageDTO;

import lombok.RequiredArgsConstructor;

@Controller
@RequiredArgsConstructor
public class SockJSController {
	private final SimpMessagingTemplate simpMessagingTemplate;
    
    @MessageMapping("/chat/send")
    public void sendMsg(MessageDTO message) throws Exception {
        simpMessagingTemplate.convertAndSend("/topic/" + message.getChatRoom_id(),message);
    }
}

화면에서 보낸 JSON data를 파라미터(MessageDTO)를 통해 받을수있습니다.
convertAndSend() 메소드를 통해 첫번째 파라미터의 값(/topic/....)을 subcribe한 SockJS 세션에 message 객체를 전송합니다.

MessageDTO.java

package com.velog.dto;

import lombok.Getter;

@Getter
public class MessageDTO {
	private Long chatRoom_id;
	private String contents;
	private Long sender;
}

스크립트의 send() 함수의 data값과 매핑시켜줄 클래스입니다. 데이터 타입에 유의해주세요

실행결과

개발자 도구로 오른쪽 브라우저의 sender값을 2로 설정하고 진행했습니다.

Reference

Author And Source

이 문제에 관하여(Spring Boot 채팅 구현(SockJS,Stomp) 1. 환경 설정 및 기본 동작 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kmh916/Spring-Boot-채팅-구현SockJSStomp1.-환경-설정

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)