spring4.0之九：websocket简单应用

Spring 4.0的一个最大更新是增加了websocket的支持。websocket提供了一个在web应用中的高效、双向的通讯，需要考虑到客户端（浏览器）和服务器之间的高频和低延时消息交换。一般的应用场景有：在线交易、游戏、协作、数据可视化等。

使用websocket需要考虑的浏览器的支持（IE<10不支持），目前主流的浏览器都能很好的支持websocket。

websocket协议中有一些子协议，可以从更高的层次实现编程模型，就像我们使用HTTP而不是TCP一样。这些子协议有STOMP,WAMP等。

本教程只考虑websocket的简单实用，包含Spring对JSR-356的支持及Spring WebSocket API。

1、Java API for WebSocket(JSR-356)

Java API for WebSocket已经是Java EE 7的一部分。它定义了两类endpoit（都是EndPoint类的子类），使用注解标识@ClientEndpoint和@ServerEndpoint。

1.1 Servlet容器扫描初始化

通过Spring初始化一个endpoint，只需配置一个SpringConfigurator在类上的@ServerEndpoint注解上。

/*
 * Copyright 2002-2013 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package org.springframework.samples.websocket.config;
 
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.samples.websocket.echo.DefaultEchoService;
import org.springframework.samples.websocket.echo.EchoEndpoint;
import org.springframework.samples.websocket.echo.EchoService;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
import org.springframework.web.socket.server.standard.ServerEndpointRegistration;
 
@Configuration
public class EndpointConfig {
 
    @Bean
    public ServerEndpointExporter endpointExporter() {
        return new ServerEndpointExporter();
    }
 
    @Bean
    public ServerEndpointRegistration echo() {
        return new ServerEndpointRegistration("/echo", EchoEndpoint.class);
    }
 
    @Bean
    public ServerEndpointRegistration echoSingleton() {
        return new ServerEndpointRegistration("/echoSingleton", new EchoEndpoint(echoService()));
    }
 
//    @Bean
//    public EchoAnnotatedEndpoint echoAnnotatedSingleton() {
//        return new EchoAnnotatedEndpoint(echoService());
//    }
 
    @Bean
    public EchoService echoService() {
        return new DefaultEchoService("Did you say \"%s\"?");
    }
}

上例假设SpringContextLoaderListener用来加载配置，这是个典型的web应用。Servlet容器将通过扫描@ServerEndpoint和SpringConfigurator初始化一个新的websocket会话。

1.2 Spring 初始化

如果你想使用一个单独的实例而不使用Servlet容器扫描，将EchoEndpoint类声明称一个bean，并增加一个ServerEndpointExporter的bean：

EchoEndpoint 可以通过EndPointRegistration发布

2、Spring WebSocket API

Spring WebSocket API提供了SockJS的支持，且有些容器如Jetty 9目前还没有对JSR-356的支持，所以有Spring WebSocket API是必要的。

Spring WebSocket API的核心接口是WebSocketHandler。下面是一个处理文本消息的handler的实现：

1. import org.springframework.web.socket.adapter.TextWebSocketHandlerAdapter;
2. public class EchoHandler extends TextWebSocketHandlerAdapter {
3. @Override
4. public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
5. session.sendMessage(message);
6. }
7. }

WebSocketHandler可以通过WebSocketHttpRequestHandler插入到Spring MVC里：

1. import org.springframework.web.socket.server.support.WebSocketHttpRequestHandler;
2. @Configuration
3. public class WebConfig {
4. @Bean
5. public SimpleUrlHandlerMapping handlerMapping() {
6. Map<String, Object> urlMap = new HashMap<String, Object>();
7. urlMap.put("/echo", new WebSocketHttpRequestHandler(new EchoHandler()));
8. SimpleUrlHandlerMapping hm = new SimpleUrlHandlerMapping();
9. hm.setUrlMap(urlMap);
10. return hm;
11. }
12. }

SockJS服务器端的支持

SockJs是一个脚本框架，它提供类似于websocket的编程模式但是可以适应不同的浏览器（包括不支持websocket的浏览器）。

开启SockJS的支持，声明一个SockJsService，和一个url映射，然后提供一个WebSocketHandler来处理消息。虽然我们是哟个SockJS我们开发的方式是一样的，但是随着浏览器的不同传输的协议可以是Http Streaming，long polling等。

1. import org.springframework.web.socket.sockjs.SockJsService;
2. // ...
3. @Configuration
4. public class WebConfig {
5. @Bean
6. public SimpleUrlHandlerMapping handlerMapping() {
7. SockJsService sockJsService = new DefaultSockJsService(taskScheduler());
8. Map<String, Object> urlMap = new HashMap<String, Object>();
9. urlMap.put("/echo/**", new SockJsHttpRequestHandler(sockJsService, new EchoHandler()));
10. SimpleUrlHandlerMapping hm = new SimpleUrlHandlerMapping();
11. hm.setUrlMap(urlMap);
12. return hm;
13. }
14. @Bean
15. public ThreadPoolTaskScheduler taskScheduler() {
16. ThreadPoolTaskScheduler taskScheduler = new ThreadPoolTaskScheduler();
17. taskScheduler.setThreadNamePrefix("SockJS-");
18. return taskScheduler;
19. }
20. }

在我们实际使用中我们会使用WebSocketConfigurer集中注册WebSocket服务：

1. @Configuration
2. @EnableWebMvc
3. @EnableWebSocket//开启websocket
4. public class WebConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {
5. @Override
6. public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
7. registry.addHandler(echoWebSocketHandler(), "/echo"); //提供符合W3C标准的Websocket数据
8. registry.addHandler(snakeWebSocketHandler(), "/snake");
9. registry.addHandler(echoWebSocketHandler(), "/sockjs/echo").withSockJS();//提供符合SockJS的数据
10. registry.addHandler(snakeWebSocketHandler(), "/sockjs/snake").withSockJS();
11. }
12. @Bean
13. public WebSocketHandler echoWebSocketHandler() {
14. return new EchoWebSocketHandler(echoService());
15. }
16. @Bean
17. public WebSocketHandler snakeWebSocketHandler() {
18. return new PerConnectionWebSocketHandler(SnakeWebSocketHandler.class);
19. }
20. @Bean
21. public DefaultEchoService echoService() {
22. return new DefaultEchoService("Did you say \"%s\"?");
23. }
24. // Allow serving HTML files through the default Servlet
25. @Override
26. public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
27. configurer.enable();
28. }
29. }

SockJS客户端代码：

<script type="text/javascript">
        var ws = null;
 
        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('echo').disabled = !connected;
        }
 
        function connect() {
            var target = document.getElementById('target').value;
            if (target == '') {
                alert('Please select server side connection implementation.');
                return;
            }
            if ('WebSocket' in window) {
                ws = new WebSocket(target);
            } else if ('MozWebSocket' in window) {
                ws = new MozWebSocket(target);
            } else {
                alert('WebSocket is not supported by this browser.');
                return;
            }
            ws.onopen = function () {
                setConnected(true);
                log('Info: WebSocket connection opened.');
            };
            ws.onmessage = function (event) {
                log('Received: ' + event.data);
            };
            ws.onclose = function () {
                setConnected(false);
                log('Info: WebSocket connection closed.');
            };
        }
 
        function disconnect() {
            if (ws != null) {
                ws.close();
                ws = null;
            }
            setConnected(false);
        }
 
        function echo() {
            if (ws != null) {
                var message = document.getElementById('message').value;
                log('Sent: ' + message);
                ws.send(message);
            } else {
                alert('WebSocket connection not established, please connect.');
            }
        }
 
        function updateTarget(target) {
            if (window.location.protocol == 'http:') {
                document.getElementById('target').value = 'ws://' + window.location.host + target;
            } else {
                document.getElementById('target').value = 'wss://' + window.location.host + target;
            }
        }
 
        function log(message) {
            var console = document.getElementById('console');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            console.appendChild(p);
            while (console.childNodes.length > 25) {
                console.removeChild(console.firstChild);
            }
            console.scrollTop = console.scrollHeight;
        }
    </script>

ws://localhost:8080/spring-websocket-test/echo

ws://localhost:8080/spring-websocket-test/echoSingleton

ws://localhost:8080/spring-websocket-test/echoAnnotated

程序用maven打成war后用tomcat 8发布查看效果。

E:\myspace\spring-websocket-test-endpoint>mvn -DskipTests clean package

在target目录下生成了spring-websocket-test.war，部署到tomcat下，测试结果如下：

本例源码：spring-websocket-test-master.zip