spring框架下搭建websocket

前言：最近在做弹幕的需求，考虑用到websocket。搭建过程做记录分享。

1、pom.xml依赖，spring请用4.0以上

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-websocket</artifactId>
    <version>${spring.version}</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-messaging</artifactId>
    <version>${spring.version}</version>
</dependency>
<!--jackson用于json操作 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.3.0</version>
</dependency>

2、服务初始化类，spring官网还有xml的配置方法

@Configuration
@EnableWebMvc
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic", "/user");
        config.setApplicationDestinationPrefixes("/msg");
        config.setUserDestinationPrefix("/user/");
    }

    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/webServer").setAllowedOrigins("*").withSockJS();
    }
}

说明：
a、config.enableSimpleBroker(“/topic”,”/user”);
//这句表示在topic和user这两个域上可以向客户端发消息。
b、config.setUserDestinationPrefix(“/user/”);
//这句表示给指定用户发送（一对一）的主题前缀是“/user/”。
c、config.setApplicationDestinationPrefixes(“/msg”);
//这句表示客户端向服务端广播发送时的主题上面需要加”/msg”作为前缀。
d、registry.addEndpoint(“/webServer”).setAllowedOrigins(“*”).withSockJS();
//这个和客户端创建连接时的url有关，后面在客户端的代码中可以看到。
//setAllowedOrigins(“*”)处理跨域访问问题。
e、如果spring不配扫包，可以手动配一下

<bean name="WebSocketConfig" class="com.xxx.WebSocketConfig" />

3、服务类**

@Controller
public class WebSocketController {
private static int SIZE = 3;
private Queue<Object> queue = new ArrayDeque<Object>();
public SimpMessagingTemplate template;

@Autowired
public WebSocketController(SimpMessagingTemplate template) {
    this.template = template;
}

@SubscribeMapping("/init/{coordinationId}")  
   public Map<String,Object> init(@DestinationVariable("coordinationId") int coordinationId) {  
       System.out.println("------------新用户 " + coordinationId + " 进入，空间初始化---------");  
       Map<String, Object> document = new HashMap<String, Object>();  
       document.put("chat",queue);  
       return document;  
   }

// 广播
@MessageMapping("/live")
@SendTo("/topic/live")
public TopicMessage sendTopic(TopicMessage msg) {
    if (queue.size() >= SIZE) {
        queue.poll();
    }
    queue.offer(msg);
    return msg;
}

// 广播 方式写点对点
@MessageMapping("/point")
public void sendPoint(UserMessage userMessage) {
    String dest = "/topic/point" + userMessage.getCoordinationId();  
    this.template.convertAndSend(dest, userMessage);
}

//点对点
@MessageMapping("/message")
//@SendToUser("/message")
public void userMessage(UserMessage userMessage) throws Exception {
    this.template.convertAndSendToUser(userMessage.getCoordinationId(), "/message", userMessage);
}

}

说明：
a、queue 为消息缓存队列，简单放到jvm中，实际项目请放到Redis等缓存中。
b、广播方式用的@SendTo注解。
c、正常的点对点应该采用@SendToUser,但实际上并没调通，表现就是仅仅js端发，js端就能触发回调，根本不走controller中的userMessage方法（stompClient.send(“/user/{userId}/message”），有哪位大神知道为什么请赐教。
d、据spring官网意思，@MessageMapping、@RequestMapping是共存的，所以把它当做平常我们用的controller就行了，一毛一样。

4、js端

<script type="text/javascript" src="../static/scripts/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../static/scripts/stomp.js"></script>
<script type="text/javascript" src="../static/scripts/sockjs.js"></script>
</head>
<script>
    var stompClient = null;

    $(function() {
        startServer();
    })

    function startServer() {
        var url = 'http://IP:端口/项目名/webServer'
        var socket = new SockJS(url);
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {
            //初始化  
            stompClient.subscribe('/msg/init/' + userId, function (initData) {  
                console.log(initData);  
                var body = JSON.parse(initData.body);  
                var chat = body.chat;  
                chat.forEach(function(item) {  
                    showChat(item);  
                });  
            });  
            //广播回调
            stompClient.subscribe('/topic/live', function(message){
                var json = JSON.parse(message.body);
                showChat(json);
            });
            //广播方式实现点对点回调
            stompClient.subscribe('/topic/point' + userId, function (message) {  
                var json = JSON.parse(message.body); 
                showChat(json);
            });
            //点对点方式回调
            stompClient.subscribe('/user/' + userId + '/message', function(message){
                 var json = JSON.parse(message.body);
                 showChat(json);
            });
        });
        //强制关闭浏览器断开连接
        window.onbeforeunload = function() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
        }
    }

    function closeServer() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
    }

    function sendTopic() {
        var input = $('#topic_input');
        var inputValue = input.val();
        input.val("");
        stompClient.send("/msg/live", {}, JSON.stringify({
            'name' : encodeURIComponent('广播'),
            'msg' : encodeURIComponent(inputValue)
        }));
    }

    function sendPoint() {
        var input = $('#point_input');  
        var inputValue = input.val();  
        input.val("");  
        stompClient.send("/msg/point", {}, JSON.stringify({  
            'name' : encodeURIComponent('广播点对点'),
            'msg': encodeURIComponent(inputValue),  
            'coordinationId': 1  
        }));  
    }

    function sendUser() {
        var input = $('#user_input');  
        var inputValue = input.val();  
        input.val("");  
        stompClient.send("/msg/message", {}, JSON.stringify({  
            'name' : encodeURIComponent('点对点'),
            'msg': encodeURIComponent(inputValue),  
            'coordinationId': 'a'
        }));  
    }

    function showChat(message) {
        var value = decodeURIComponent(message.name) + ':' + decodeURIComponent(message.msg) + '\n';
        var content = $("#topic_content").val() + value;
        $("#topic_content").val(content);
    }
</script>
<body>
    <div>
    <input id="topic_input" type="text">
    <input type="button" onclick="sendTopic();" value="send广播">
    </div>

    <div>
    <input id="point_input" type="text">
    <input type="button" onclick="sendPoint();" value="send广播点对点">
    </div>

    <div>
    <input id="user_input" type="text">
    <input type="button" onclick="sendUser();" value="send点对点">
    </div>

    <div>
    <textarea id="topic_content" style="width:200px;height:80px;"></textarea>
    </div>
</body>
</html>

记得引入sockjs-0.3.4.js，stomp.js

5、附两个上面用到的pojo

public class TopicMessage {
    private String name;
    private String msg;
    set/get
}

public class UserMessage {
    private String name;
    private String msg;
    private String coordinationId;
    set/get
}

参考资料：
http://www.lxway.com/4002114921.htm
http://blog.csdn.net/xjyzxx/article/details/38542665?utm_source=tuicool&utm_medium=referral
http://docs.spring.io/spring/docs/4.1.9.RELEASE/spring-framework-reference/htmlsingle/#_websocket_sockjs_and_stomp_messaging