샘플앱 spring-talk

1 개요[ | ]

SpringTalk, spring-talk
스프링-토크, 스프링톡

SpringBoot 기반으로 작성한 채팅 웹애플리케이션 (샘플)
웹소켓 활용

2 Message.java[ | ]

package com.example.springtalk;

import lombok.Data;

@Data
public class Message {
	private String username;
    private String content;
}

3 MessageController.java[ | ]

package com.example.springtalk;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class MessageController {

    @MessageMapping("/message")
    @SendTo("/topic/messages")
    public Message transfer(Message message) throws Exception {
        Thread.sleep(200);
        return message;
    }
}

4 WebScoketConfig.java[ | ]

package com.example.springtalk;

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

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket-endpoint").withSockJS();
    }
}

5 app.js[ | ]

var stompClient = null;
var username = null;
var last_sender = null;

function randomUsername() {
	var text = "";
	var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	for( var i=0; i < 5; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length));
	return text;
}

function connect() {
	var socket = new SockJS('/websocket-endpoint');
	stompClient = Stomp.over(socket);
	stompClient.connect({}, function (frame) {
		console.log('Connected: ' + frame);
		stompClient.subscribe('/topic/messages', function (message) {
			showMessage(JSON.parse(message.body));
		});
	});
}

function send() {
	if( $("#content").val() == '' ) return;
	stompClient.send("/app/message", {}, JSON.stringify({
		'username': $("#username").val(),
		'content': $("#content").val()
	}));
}

function showMessage(message) {
	var hash = CryptoJS.MD5(message.username).toString();
	var img_data = new Identicon(hash, 50).toString();
	var colorHash = new ColorHash({
	      lightness: 0.5,
	      saturation: 0.7
	    });
    var color = colorHash.hex(message.username);
    var initial = message.username.charAt(0);
	    
	var message_class = ( $("#username").val() == message.username )? 'message-mine' : 'message-others';
	var sender_class = ( last_sender == message.username )? 'sender-hidden' : 'sender-show';
	$("#conversation")
	.append("<div class='message "+message_class+" "+sender_class+"'>" +
			//"<div class='photobox'><img class='photo' src='data:image/png;base64," + img_data + "'></div>" +
			"<div class='photobox'><div class='photo lavatar' style='background:" + color + "'>" + initial + "</div></div>" +
			"<div class='textbox'>" +
			"<div class='username'>"+message.username+"</div>" +
			"<div><span>" + message.content + "</span></div></div></div>");
	$("#conversation")[0].scrollTop = $("#conversation")[0].scrollHeight;
	last_sender = message.username;
}

$(function () {
	$("form").on('submit', function (e) { e.preventDefault(); });
	connect();
	$( "#username" ).val( randomUsername() );
	$( "#send" ).click(function() { send(); });
});

6 같이 보기[ | ]

7 참고[ | ]

https://github.com/jmnote/spring-talk