Spring 4 WebSocket 앱

이 예제를 스프링 사이트에서 실행하려고 시도했다. 튜토리얼 Spring Boot 부분을 제외하고.

웹

<web-app>
    <display-name>Archetype Created Web Application</display-name>

    <servlet>
        <servlet-name>sample</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextClass</param-name>
            <param-value>
                org.springframework.web.context.support.AnnotationConfigWebApplicationContext
            </param-value>
        </init-param>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>
                com.evgeni.websock.WebSocketConfig
            </param-value>
        </init-param>
    </servlet>

    <servlet-mapping>
        <servlet-name>sample</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

Java 구성 :

@Configuration
@ComponentScan(basePackages = {"com.evgeni.controller"})
@EnableWebSocketMessageBroker
@EnableWebMvc
public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketMessageBrokerConfigurer  {

    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/hello").withSockJS();
    }

    public void configureClientInboundChannel(ChannelRegistration registration) {
        // TODO Auto-generated method stub

    }

    public void configureClientOutboundChannel(ChannelRegistration registration) {
        // TODO Auto-generated method stub

    }

    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app"); 
    }
     @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/css/**").addResourceLocations("/css/").setCachePeriod(31556926);
            registry.addResourceHandler("/img/**").addResourceLocations("/img/").setCachePeriod(31556926);
            registry.addResourceHandler("/js/**").addResourceLocations("/js/").setCachePeriod(31556926);
        }

}

제어 장치:

@Controller
public class GreetingController {


    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
        Thread.sleep(3000); // simulated delay
        System.out.println(message.getName());
        return new Greeting("Hello, " + message.getName() + "!");
    }

}

index.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <script src="<c:url value='/js/sockjs-0.3.js'/>"></script>
    <script src="<c:url value='/js/stomp.js'/>"></script>
    <script type="text/javascript">
        var stompClient = null;

        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            document.getElementById('response').innerHTML = '';
        }

        function connect() {
            var socket = new SockJS("<c:url value='/hello'/>");
            stompClient = Stomp.over(socket);
            stompClient.connect('', '', function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe("<c:url value='/topic/greetings'/>", function(greeting){
                    showGreeting(JSON.parse(greeting.body).content);
                });
            });
        }

        function disconnect() {
            stompClient.disconnect();
            setConnected(false);
            console.log("Disconnected");
        }

        function sendName() {
            var name = document.getElementById('name').value;
            stompClient.send("<c:url value='/app/hello'/>", {}, JSON.stringify({ 'name': name }));
        }

        function showGreeting(message) {
            var response = document.getElementById('response');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }
    </script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <div id="conversationDiv">
        <label>What is your name?</label><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">Send</button>
        <p id="response"></p>
    </div>
</div>
</body>
</html>

Everithing은 web.xml과 2-3 c : url에서 jsp로로드되어 프로젝트의 루트를 추가한다는 점을 제외하고는 자습서와 동일합니다.

연결을 클릭하고 보내기를 클릭하면 브라우저 콘솔에서 다음을 얻습니다.

Opening Web Socket... stomp.js:122
Web Socket Opened... stomp.js:122
>>> CONNECT
login:
passcode:
accept-version:1.1,1.0
heart-beat:10000,10000

 stomp.js:122
<<< ERROR
message:Illegal header\c 'login\c'. A header must be of the form <name>\c<value>
content-length:0

 stomp.js:122
>>> SEND
destination:/websock/app/hello
content-length:14

{"name":"asd"}

문제는 Sock js의 연결 함수에 있다고 생각합니다.

stompClient.connect('', '', function(frame) {...

로그인 및 패스 코드에 ''을 (를) 전달 중입니다.

편집하다: connect 함수를 stompClient.connect ( 'random', 'random')로 변경하면 콘솔의 응답은 다음과 같습니다.

Opening Web Socket... stomp.js:122
Web Socket Opened... stomp.js:122
>>> CONNECT
login:asd
passcode:asd
accept-version:1.1,1.0
heart-beat:10000,10000

 stomp.js:122
<<< CONNECTED
heart-beat:0,0
version:1.1

 stomp.js:122
connected to server undefined stomp.js:122
Connected: CONNECTED
version:1.1
heart-beat:0,0

 (index):23
>>> SUBSCRIBE
id:sub-0
destination:/websock/topic/greetings

 stomp.js:122
>>> SEND
destination:/websock/app/hello
content-length:14

{"name":"asd"}

메시지는 컨트롤러에 전달되지 않습니다.

해결법

==============================

1.실수는 잘못된 컨트롤러 매핑이었습니다. 나는 가지고있다:

실수는 잘못된 컨트롤러 매핑이었습니다. 나는 가지고있다:

  @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception

그리고 JSP에서 :

stompClient.subscribe("<c:url value='/topic/greetings'/>", function(greeting){...

과

stompClient.send("<c:url value='/app/hello'/>", {}, JSON.stringify({ 'name': name }));

올바른 것들은 :

stompClient.subscribe('/topic/greetings', function(greeting){...
stompClient.send('/app/hello', {}, JSON.stringify({ 'name': name }));

c : url은 프로젝트 루트를 추가합니다. 제거하면 앱이 작동합니다. 그러나 여기에 SockJs로 새로운 소켓을 만들 때 c : url (루트)이 필요합니다 :

var socket = new SockJS("<c:url value='/hello'/>");

==============================
2.또한 서버에 로그인 / 패스워드를 전달하지 않으려면 (스프링 보안에 의존하기 때문에)

또한 서버에 로그인 / 패스워드를 전달하지 않으려면 (스프링 보안에 의존하기 때문에)
```
stompClient.connect('', '', function(frame) {
```
대신에
```
stompClient.connect({}, function(frame) {
```
여기를보십시오 : https://github.com/spring-guides/gs-messaging-stomp-websocket/issues/10

from https://stackoverflow.com/questions/20740956/spring-4-websocket-app by cc-by-sa and MIT license

'SPRING' 카테고리의 다른 글

[SPRING] 스프링 MVC; URL에서 파일 확장을 피 하시겠습니까? (0)	2019.03.22
[SPRING] spring-mvc-chat github 애플리케이션 컨텍스트에서 Spring MVC의 DeferredResult 클래스 이해하기 (0)	2019.03.22
[SPRING] Hibernate 4의 Integrator 패턴과 Spring의 의존성 주입 사용하기 (0)	2019.03.22
[SPRING] Spring 보안 지원되지 않는 구성 속성 (0)	2019.03.22
[SPRING] 점프 나머지 템플릿 URL 인코딩 (0)	2019.03.22

복붙노트

[SPRING] Spring 4 WebSocket 앱

Spring 4 WebSocket 앱

해결법

1.실수는 잘못된 컨트롤러 매핑이었습니다. 나는 가지고있다:

2.또한 서버에 로그인 / 패스워드를 전달하지 않으려면 (스프링 보안에 의존하기 때문에)

'SPRING' 카테고리의 다른 글

티스토리툴바