14 Jul 2020

spring boot + Rabbitmq + stomp

기본 설정

======

rabbitmq cmd에 접속하여 stomp plugins 활성화

rabbitmq-plugins enable rabbitmq_stomp 을 입력한다


application.yml 설정


spring:
    rabbitmq:
        host: localhost
        port: 5672 //ampq프로토콜연결 : 5672, stomp 프로토콜 연결 61613
        username: rabbitmq아이디
        password: rabbitmq비밀번호
        virtual-host: /


build.gradle 설정

dependencies 추가


//rabbitmq
implementation 'org.springframework.boot:spring-boot-starter-amqp'    implementation 'com.fasterxml.jackson.core:jackson-databind'

implementation 'org.springframework.boot:spring-boot-starter-reactor-netty'

//websocket
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'


config 설정

setSystemLogin, setSystemPasscode, setClientLogin, setClientPasscode

위의 set에서 4개다 꼭 해줘야 되고 rabbitmq접속 아이디,비밀번호다

아이디,비밀번호 설정을 안했다면 guest,guest해라

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Value("${spring.rabbitmq.host}")
    private String host;

    @Value("${spring.rabbitmq.username}")
    private String username;

    @Value("${spring.rabbitmq.password}")
    private String password;

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        System.out.println("host : "+host+" username : "+username+" password : "+password);
        registry.addEndpoint("websocketApp").setAllowedOrigins("*")
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableStompBrokerRelay("/topic")
                .setRelayHost(host)
                .setRelayPort(61613)
                .setSystemLogin(username)
                .setSystemPasscode(password)
                .setClientLogin(username)
                .setClientPasscode(password);

    }
}


유저가 나갔을때 들어왔을 때 처리


@Component
@RequiredArgsConstructor
public class WebSocketChatEventListener {
    private static final Logger log= LoggerFactory.getLogger(WebSocketChatEventListener.class);

    private final SimpMessageSendingOperations messagingTemplate;

    @Value("${spring.rabbitmq.username}")
    private String username;

    @Value("${spring.rabbitmq.password}")
    private String password;

    @EventListener
    public void handleWebSocketConnectListener(SessionConnectEvent event){
        log.info("===========");
        log.info("new web socket connection");
        log.info("===========");
    }

    @EventListener
    public void handleWebSocketDisconnectListener(SessionDisconnectEvent event){
        StompHeaderAccessor headerAccessor=StompHeaderAccessor.wrap(event.getMessage());
        String username=(String)headerAccessor.getSessionAttributes().get("username");
        if(username != null) {
            CustomMessage chatMessage = new CustomMessage("Leave",username,"나감");
            messagingTemplate.convertAndSend("/topic/public", chatMessage);
        }
    }
}



@Controller

메세지 전달과 새로운 유저가 들어왔을 때 메세지 전달


@Controller
public class WebSocketChatController {
    @MessageMapping("/chat.sendMessage")
    @SendTo("/topic/javainuse")
    public CustomMessage sendMessage(@Payload CustomMessage webSocketChatMessage) {
        return webSocketChatMessage;
    }

    @MessageMapping("/chat.newUser")
    @SendTo("/topic/javainuse")
    public CustomMessage newUser(@Payload CustomMessage webSocketChatMessage,
                                        SimpMessageHeaderAccessor headerAccessor) {
        headerAccessor.getSessionAttributes().put("username", webSocketChatMessage.getSender());
        return webSocketChatMessage;
    }
}


frontend

connect, receive, send

var stompClient = null;
var name = null;

function connect(event) {
	name = '홍길동';

	if (name) {
        //WebSocketConfig의 EndPoint
		var socket = new SockJS('/websocketApp'); 
		stompClient = Stomp.over(socket);

		stompClient.connect({}, connectionSuccess);
	}
	event.preventDefault();
}

function connectionSuccess() {
    var str='<div>'+'연결성공' +'</div>'
    $('#messageList').prepend(str);

    //sendTo("/topic/javainuse") 로 들어오는 메세지를 받겠다
	stompClient.subscribe('/topic/javainuse', onMessageReceived);

	stompClient.send("/app/chat.newUser", {}, JSON.stringify({
		sender : name,
		type : 'newUser'
	}))

}

function sendMessage(event) {
	var messageContent = $('#content').val();

	if (messageContent && stompClient) {
		var chatMessage = {
			sender : name,
			content : messageContent,
			type : 'CHAT'
		};

		stompClient.send("/app/chat.sendMessage", {}, JSON
				.stringify(chatMessage));
		$('#content').val('');
	}
	event.preventDefault();
}

function onMessageReceived(payload) {
	var message = JSON.parse(payload.body);
    var msgList=$('#messageList');
	if (message.type === 'newUser') {
        msgList.prepend('<div>'+'새로운 유저 입장 '+message.sender +'</div>');
	} else if (message.type === 'Leave') {
        msgList.prepend('<div>'+' 유저 떠남 '+message.sender +'</div>');
	} else {
        msgList.prepend('<div>'+message.content +'</div>');
	}

}

Tags:
0 comments