Spring Boot WebSocket介绍(一)

最近在做一些WebSocket相关的内容，简要看了一些相关的知识，为避免自己忘记和遗漏一些内容，简单整理一下相关知识。本文作为WebSocket介绍的第一篇，比较简单，主要介绍如何在Spring Boot框架中使用自带的WebScoket功能。

完整的代码在这里，欢迎加星，fork。本文代码是在官方示例代码基础上稍加修改而成的。本人是后端，前端页面基本上时照猫画虎修改修改而成，仅供测试演示使用。

添加依赖

pom.xml文件在https://github.com/yqbjtu/websocketTutorials/blob/master/WebSocketBasic/pom.xml。
简要介绍，本示例程序使用Spring Boot 2.0.1.

核心依赖如下

        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-websocket
        

附属依赖如下，本示例程序同时提供两个简单的前端页面，供演示使用，这两个前端页面用到如下内容，如果你是前后端分离的，有自己的前端完成socket连接、订阅、发送、接收。 就不需要引入如下这些包，直接使用你的前端就行。

        
            org.webjars
            webjars-locator-core
        
        
            org.webjars
            sockjs-client
            1.0.2
        
        
            org.webjars
            stomp-websocket
            2.3.3
        
        
            org.webjars
            bootstrap
            3.3.7
        
        
            org.webjars
            jquery
            3.1.0
        

主要代码

提供自己的WebSocketMessageBrokerConfigurer实现类

package com.yq.config;

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
@Slf4j
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/myEndPoint")         //开启/myEndPoint端点
                .setAllowedOrigins("*")         //允许跨域访问
                .withSockJS();                  //使用sockJS
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/myPrefixes");  //订阅topic的前缀，比订阅topic必须是这种格式// /myPrefixes/topic1/xxx
    }
}

简要说明：
a, endpoint 部分，如你的endPoint是xyz， 那么你连接的url格式就是var sockjs_url = 'http://{ip}:{port}/xyz';
b，跨域问题，如果没有配置好允许来自哪些前端的连接，当你连接websocket就会报跨域问题，最典型的的，如果你的前端域名是http://a.b.c:99, 那你允许的origins就必须包含来自a.b.c的域名且端口为99的连接
c，topic前缀，设置好topic的前缀后，你订阅topic的格式/myPrefixes/{youTopciPart01}/{youTopciPart012， 或者/myPrefixes/{yourTopic}

效果截图

index.html订阅了/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 topic，也会向topic发送内容（内容为json格式，只有一个字段"myfield1"）。

myindex.html也订阅了/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 topic，也会向该topic发送内容（内容为json格式，格式为{"myfield1":"myindex.html中的输入1","message":"myindex.html中的输入2"}）。

因此当myindex.html也向/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 发送消息时，index.html也会收到消息并显示，例如，会显示{"myfield1":"myindex.html中的输入1","message":"myindex.html中的输入2"}中的"myindex.html中的输入1" 部分

因此当index.html也向/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 发送消息时，myindex.html也会收到消息并显示，例如{"myfield1":"index.html中的输入"}.

wb01_TwoConn.png

其他

关于service和controller部分，主要是SimpMessagingTemplate以及@MessageMapping和@SendTo注解，为服务间调用提供接口，后面有空再介绍。