SpringBoot实现WebSocket发送接收消息 + Vue实现SocketJs接收发送消息

参考：

1、https://www.mchweb.net/index.php/dev/887.html

2、https://itonline.blog.csdn.net/article/details/81221103?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1-81221103-blog-121078449.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1-81221103-blog-121078449.pc_relevant_aa&utm_relevant_index=1

3、https://blog.csdn.net/yingxiake/article/details/51224569

使用场景

广播模式 ：使用场景：给所有连接了这个通道的客户端发送消息。

• convertAndSend()
• @SendTo

点对点模式 ：使用场景：单独给当前用户发送消息。

• 下面两种方式，都默认加了一个前缀：/user

• convertAndSendToUser()

• @SendToUser

一、后端SpringBoot + WebSocket基础配置

1、导包

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2、配置config

• 细节：必须配置跨域。低版本的SpringBoot（2.1.5.RELEASE 就不行）不行，需要使用高版本。低版本的解决方案还未找到。
• 跨域配置使用：.setAllowedOriginPatterns("*")。。不能使用：.setAllowedOrigins("*")

package com.cc.ws.config;

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;

/**
 * <p>@EnableWebSocketMessageBroker 的作用</p>
 * <li>注解开启使用STOMP协议来传输基于代理(message broker)的消息,</li>
 * <li>这时控制器支持使用 @MessageMapping,就像使用 @RequestMapping一样</li>
 * @author cc
 *
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    /** <p>启动简单Broker</p>
     * <p>表示客户端订阅地址的前缀信息，也就是客户端接收服务端消息的地址的前缀信息</p>
     * <p>代理的名字：都是自定义的</p>
     *
     * /user     点对点（默认也是/user，可以自定义，但是必须和setUserDestinationPrefix中的设置一致）
     * /topic1   广播模式1
     * /topic2   广播模式2
     *
     * /mass     广播模式：群发
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker(
                "/user", "/topic1", "/topic2", "/mass"
        );
        // 点对点使用的订阅前缀（客户端订阅路径上会体现出来），不设置的话，默认也是 /user/
        // 注意，这里必须和上面设置的Broker：/user 一致（两个都可以自定义，但必须一致）。否则连接不上
        registry.setUserDestinationPrefix("/user/");
        // 指服务端接收地址的前缀，意思就是说客户端给服务端发消息的地址的前缀
//        registry.setApplicationDestinationPrefixes("/socket");
    }

    /**
     * 这个方法的作用是添加一个服务端点，来接收客户端的连接。
     * registry.addEndpoint("/socket")表示添加了一个/socket端点，客户端（前端）就可以通过这个端点来进行连接。
     * withSockJS()的作用是开启SockJS支持。
     * @param registry registry
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 注册一个STOMP的endpoint端点,并指定使用SockJS协议
        // 前端使用这个地址连接后端 WebSocket接口
        registry.addEndpoint("/broadcast", "/point")
                // 允许所有源跨域。还可以指定ip配置：http://ip:*
                // 低版本的SpringBoot（2.1.5.RELEASE 就不行）不行
                .setAllowedOriginPatterns("*")
                .withSockJS();
    }

}

3、启动类，配置定时器

• @EnableScheduling

@SpringBootApplicatio