Spring 4 WebSocket应用程序 [英] Spring 4 WebSocket app

查看:248
本文介绍了Spring 4 WebSocket应用程序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我尝试从spring网站运行此示例:教程
除了Spring Boot部分。

I tried to run this example from the spring site: tutorial except the Spring Boot part.

Web.xml

<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

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加载的confi和2 -3 c:jsp中的url添加项目的根。

Everithing is the same as the tutorial, except that the conf i loaded from the web.xml and 2-3 c:url in the jsp to add the root of the project.

当我点击连接然后发送时,在浏览器控制台中我得到:

When I click the connect and then send, in the browser console I get:

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的连接函数中

I think that th problm is in the connect function of Sock js

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

我正在传递''用于登录和密码。

I'm passing '' for login and passcode.

编辑:
当我将connect函数更改为 stompClient.connect('random','random',控制台中的响应是:

When I change the connect function to stompClient.connect('random', 'random', the response in the console is:

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"} 

但消息未传递给控制器​​。

but the message is not delivered to the controller.

推荐答案

错误是控制器映射错误。
我有:

The mistake was wrong controller mapping. I have:

  @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添加项目的根,当我删除它的应用程序工作。但是c:url(根)是在这里创建带有SockJs的新套接字时获得的:

The c:url adds the root of the project, when I removed it the app worked. However c:url(the root) is rquired when create new socket with SockJs here:

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

这篇关于Spring 4 WebSocket应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆