websocket方案调研及实践

目录

• webscoket方案调研及实践
  • 一、使用场景
  • 二、方案调研
    • 1、Ajax短轮询
    • 2、long-polling长轮询
    • 3、iframe长连接
    • 4、XHR-streaming
    • 5、Websocket
      • 5.1 实现原理
    • 参考
  • 三、实现方案(Websocket)
    • 1、基于java原生注解：
    • 2、spring提供的WebSocket API
    • 3、基于STOMP消息协议实现
      • 3.1、SockJS
      • 3.2、StompJS
      • 3.3、WebSocket、SockJs、STOMP三者关系
      • 3.4、代码实现
      • 3.5、 消息流向
    • 4、问题
      • 4.1 Websocket连接鉴权问题
      • 4.2 分布式问题
      • 4.3 浏览器Websocket协议兼容问题
    • 5、消息推送负载均衡方案
  • 四、方案实践
    • 1、方案选型
    • 2、具体实现
      • 2.1 引入websocket依赖
      • 2.2 添加Websocket消息代理配置
      • 2.3 编写Websocket的业务消费者
      • 2.4 js代码实现
    • 3、技术难点
      • 3.1 网关鉴权
      • 3.2 前端联调问题
        • 3.2.1 WebSocket is closed before the connection is established.
        • 3.2.2 Error during WebSocket handshake: Unexpected response code: 400
    • 4、存在的问题
      • 4.1 websocket 的高并发性能还未进行测试

webscoket方案调研及实践

一、使用场景

1、考试管理端需要给特定考试用户单独暂停考试、继续考试、加时、减时的操作，当管理端执行了上述的某个操作，需要实时的通知到正在考试的用户那里。

2、社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、智能家居等需要高实时的场景

二、方案调研

1、Ajax短轮询

短轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。

优点：后端程序编写比较容易。

缺点：请求中有大半是无用，浪费带宽和服务器资源。

2、long-polling长轮询

长轮询：客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。

优点：在无消息的情况下不会频繁的请求，耗费资源小。

缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。

3、iframe长连接

长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。

优点：消息即时到达，不发无用请求；管理起来也相对方便。

缺点：服务器维护一个长连接会增加开销，不同浏览器会有加载问题。

4、XHR-streaming

XHR流：服务端使用分块传输编码(Chunked transfer encoding)的HTTP传输机制进行响应，并且服务器端不终止HTTP响应流，让HTTP始终处于持久连接状态，当有数据需要发送给客户端时再进行写入数据。

优点：通过XHR-Streaming，可以允许服务端连续地发送消息，无需每次响应后再去建立一个连接。

缺点：XHR-streaming连接的时间越长，浏览器会占用过多内存，sockjs默认只允许每个xhr-streaming连接输出128kb数据，超过这个大小时会关闭输出流，让浏览器重新发起请求。

5、Websocket

websocket：Webscoket是Web浏览器和服务器之间的一种全双工通信协议.一旦Web客户端与服务器建立起连接，之后的全部数据通信都通过这个连接进行。通信过程中，可互相发送JSON、XML、HTML或图片等任意格式的数据。

优点：复用长连接，全双工通信，支持服务器推送消息

缺点：服务器维护一个长连接会增加开销，不同浏览器会支持程度不一

5.1 实现原理

Websocket是应用层第七层上的一个应用层协议，它必须依赖 HTTP 协议进行一次握手 ，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。

WebSocket 交互以 HTTP 请求开始，该请求使用 HTTP“Upgrade”header头升级或在本例中切换到 WebSocket 协议

GET /spring-websocket-portfolio/portfolio HTTP/1.1
Host: localhost:8080
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: Uc9l9TMkWGbHFD2qnFHltg==
Sec-WebSocket-Protocol: v10.stomp, v11.stomp
Sec-WebSocket-Version: 13
Origin: http://localhost:8080

http升级成websocket请求返回的是状态码101，而不是200。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: 1qVdfYHU9hPOl4JYYNXF623Gzn0=
Sec-WebSocket-Protocol: v10.stomp

成功握手后，HTTP 升级请求下的 TCP 套接字保持打开状态，以便客户端和服务器继续发送和接收消息。

参考

https://segmentfault.com/a/1190000019697463

三、实现方案(Websocket)

​ 在java层面实现Webocket主要有spring、netty两个方向，由于我们系统使用的是spring系列，所以采用spring的Websocket实现方案。

​ 在spring的Websocket实现中，又可以细分为3种：

1、基于java原生注解：

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

@Configuration
@EnableWebSocket // 开启websocket
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpoint() {
        return new ServerEndpointExporter();
    }
}

@ServerEndpoint("/myWs") // 声明websocket端点
@Component
public class WsServerEndpoint {

    private static Map<String, Session> onlineUserCache = new HashMap<>();
    /**
     * 连接成功
     *
     * @param session
     */
    @OnOpen
    public void onOpen(Session session) {
        System.out.println("连接成功");
    }
    /**
     * 连接关闭
     *
     * @param session
     */
    @OnClose
    public void onClose(Session session) {
        System.out.println("连接关闭");
    }
    /**
     * 接收到消息
     *
     * @param text
     */
    @OnMessage
    public String onMsg(String text) throws IOException {
        return "servet 发送：" + text;
    }
}

​ WsServerEndpoint类下的几个注解需要注意一下，首先是他们的包都在 javax.websocket 下。并不是 spring 提供的，而 jdk 自带的，下面是他们的具体作用。

1. @ServerEndpoint通过这个 spring boot 就可以知道你暴露出去的 ws 应用的路径，有点类似我们经常用的@RequestMapping。比如你的启动端口是8080，而这个注解的值是ws，那我们就可以通过 ws://127.0.0.1:8080/ws 来连接你的应用
2. @OnOpen当 websocket 建立连接成功后会触发这个注解修饰的方法，注意它有一个 Session 参数
3. @OnClose当 websocket 建立的连接断开后会触发这个注解修饰的方法，注意它有一个 Session 参数
4. @OnMessage当客户端发送消息到服务端时，会触发这个注解修改的方法，它有一个 String 入参表明客户端传入的值
5. @OnError当 websocket 建立连接时出现异常会触发这个注解修饰的方法，注意它有一个 Session 参数

​ 另外一点就是服务端如何发送消息给客户端，服务端发送消息必须通过上面说的 Session 类，通常是在@OnOpen 方法中，当连接成功后把 session 存入 Map 的 value，key 是与 session 对应的用户标识，当要发送的时候通过 key 获得 session 再发送，这里可以通过 session.getBasicRemote().sendText()来对客户端发送消息

2、spring提供的WebSocket API

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

public class MyHandler extends TextWebSocketHandler {
    // 建立连接成功事件
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        Object token = session.getAttributes().get("token");
        if (token != null) {
            // 用户连接成功，放入在线用户缓存
            WsSessionManager.add(token.toString(), session);
        } else {
            throw new RuntimeException("用户登录已经失效!");
        }
    }

    // 接收消息事件
    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) {
        // ...
    }

    // 断开连接时
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        Object token = session.getAttributes().get("token");
        if (token != null) {
            // 用户退出，移除缓存
            WsSessionManager.remove(token.toString());
        }
    }
}

MyHandler通过继承 TextWebSocketHandler 类并覆盖相应方法，可以对 websocket 的事件进行处理，这里可以同原生注解的那几个注解连起来看.

1. afterConnectionEstablished 方法是在 socket 连接成功后被触发，同原生注解里的 @OnOpen 功能
2. afterConnectionClosed 方法是在 socket 连接关闭后被触发，同原生注解里的 @OnClose 功能
3. handleTextMessage 方法是在客户端发送信息时触发，同原生注解里的 @OnMessage 功能、

public class WsSessionManager {
    /**
     * 保存连接 session 的地方
     */
    private static ConcurrentHashMap<String, List<WebSocketSession>> SESSION_POOL = new ConcurrentHashMap<>();

    /**
     * 添加 session
     *
     * @param key
     */
    public static void add(String key, WebSocketSession session) {
        // 添加 session
        SESSION_POOL.put(key, session);
    }

    /**
     * 删除 session,会返回删除的 session
     *
     * @param key
     * @return
     */
    public static WebSocketSession remove(String key) {
        // 删除 session
        return SESSION_POOL.remove(key);
    }

    /**
     * 删除并同步关闭连接
     *
     * @param key
     */
    public static void removeAndClose(String key) {
        WebSocketSession session = remove(key);
        if (session != null) {
            try {
                // 关闭连接
                session.close();
            } catch (IOException e) {
                // todo: 关闭出现异常处理
                e.printStackTrace();
            }
        }
    }

    /**
     * 获得 session
     *
     * @param key
     * @return
     */
    public static WebSocketSession get(String key) {
        // 获得 session
        return SESSION_POOL.get(key);
    }
}

​ 这里简单通过 ConcurrentHashMap 来实现了一个 session 池，用来保存已经登录的 web socket 的 session。前面提过，服务端发送消息给客户端必须要通过这个 session。

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(),       "/myHandler").setAllowedOrigins("http://mydomain.com");
    }

    @Bean
    public WebSocketHandler myHandler() {
        return new MyHandler();
    }
}

​ 通过实现 WebSocketConfigurer 类并覆盖相应的方法进行 websocket 的配置。我们主要覆盖 registerWebSocketHandlers 这个方法。通过向 WebSocketHandlerRegistry 设置不同参数来进行配置。其中 addHandler 方法添加我们上面的写的 ws 的 handler 处理类，第二个参数是你暴露出的 ws 路径。setAllowedOrigins("*") 这个是关闭跨域校验，方便本地调试，线上推荐打开。

3、基于STOMP消息协议实现

​ 首先需要对SockJS、StompJS以及跟WebSocket三者做简要的说明。

3.1、SockJS

​ SockJS是一个JavaScript库，为了应对许多浏览器不支持WebSocket协议的问题，设计了备选SockJS 。SockJS 是 WebSocket 技术的一种模拟。SockJS会尽可能对应 WebSocket API，但如果WebSocket 技术不可用的话，会自动降为轮询的方式。还提供了心跳检测的机制。

3.2、StompJS

​ STOMP—— Simple Text Oriented Message Protocol——面向消息的简单文本协议。

SockJS 为 WebSocket 提供了 备选方案。 STOMP协议，采用消息订阅的机制，为浏览器 和 server 间的 通信增加适当的消息语义。

3.3、WebSocket、SockJs、STOMP三者关系

​ WebSocket 是底层协议，SockJS 是WebSocket 的备选方案，是一种兼容实现，而 STOMP 是基于 WebSocket（SockJS）的上层协议。

3.4、代码实现

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

import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/portfolio").withSockJS();  // 1
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.setApplicationDestinationPrefixes("/app");  // 2
        config.enableSimpleBroker("/topic", "/queue");  // 3
    }
}

1. "/portfolio"是 WebSocket（或 SockJS）客户端需要连接到 WebSocket 握手的端点的 HTTP URL
2. 以“/app”开头的STOMP消息将被路由到@Controller 类中的@MessageMapping 方法中
3. 使用内置的消息代理进行订阅和广播；将以“/topic”或“/queue”开头的消息路由到代理

@Controller
public class WSController {

    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;

    @MessageMapping("/hello")
    @SendTo("/topic/hello")
    public ResponseMessage hello(RequestMessage requestMessage) {
        System.out.println("接收消息：" + requestMessage);
        return new ResponseMessage("服务端接收到你发的：" + requestMessage);
    }

    @GetMapping("/sendMsgByUser")
    public @ResponseBody
    Object sendMsgByUser(String token, String msg) {
        simpMessagingTemplate.convertAndSendToUser(token, "/msg", msg);
        return "success";
    }
}

​ 通过 @MessageMapping 来暴露节点路径，有点类似 @RequestMapping。注意这里虽然写的是 hello ，但是我们客户端调用的真正地址是 /app/hello。 因为我们在上面的 config 里配置了registry.setApplicationDestinationPrefixes("/app")。

​ @SendTo这个注解会把返回值的内容发送给订阅了 /topic/hello 的客户端，与之类似的还有一个@SendToUser 只不过他是发送给用户端一对一通信的。这两个注解一般是应答时响应的，如果服务端主动发送消息可以通过 simpMessagingTemplate类的convertAndSend方法。

3.5、 消息流向

​ 对于客户端来说，既可以发送指定的消息请求"/app/a"，又可以订阅某一个消息主题"/topic/a"。消息订阅的会被路由到消息代理SimpleBroker中，指定的消息请求会被@MessageMapper路由到指定的方法中，之后再根据特定的主题订阅到消息代理SimpleBroker中。最后再通过消息代码返回消息到对应的客户端。

4、问题

4.1 Websocket连接鉴权问题

​ 前2种可以通过添加握手过程的拦截器，在进行握手前，通过获取url传参，进行鉴权；STOMP实现方案可以通过获取header中的参数来进行鉴权。

4.2 分布式问题

​ 前2种方案，跟客户端的交互都需要通过Session进行，并且需要在各个JVM中维护自己的Session池，在分布式环境中，跟消息服务A连接的用户没办法发送消息给跟消息服务B连接的用户。

​ 而Stomp可以通过外部消息中间件MessageBroker的接入解决分布式问题。

4.3 浏览器Websocket协议兼容问题

​ 前2种方案只能通过Websocket协议进行握手，当客户端所在浏览器不支持WebSocket协议时，需要再实现一套轮询的方案来实现客户端与服务端的交互问题。

​ 而SockJS可以实现当浏览器不支持WebSocket协议时，会自动降为轮询的方式进行交互。

5、消息推送负载均衡方案

​ 上述不管哪种实现方案，都避不开分布式问题。解决分布式问题一般引入第三方中间件，在这里我们可以引入rocketMq、redis、rabbitMq等。消息推送服务都订阅到中间件，业务系统通过发布到中间件，进而让各个连接到消息推送服务的客户端能够收到消息。

四、方案实践

1、方案选型

​ 这里我们选基于STOMP消息协议实现的Websocket方案，原因有如下几点：

1、前后端采用消息订阅消费机制，无须在各个JVM中维护各个SESSION池；

2、采用STOMP协议通信，更容易与中间件结合，解决分布式连接问题(浏览器A连接服务A，浏览器B连接服务B，A没法跟B通信)

3、前端实现采用的是SockJS，能够检测各个浏览器能否支持Websocket协议，不支持的话，会自己降级成XHR- streaming、iframe的实现方式

4、通过SockJS发起的Websocket连接，可以在header中添加参数，来实现鉴权，不然只能通过跟在url后的参数进行鉴权

2、具体实现

2.1 引入websocket依赖

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

2.2 添加Websocket消息代理配置

package com.learnfuture.elearning.exam.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.ChannelRegistration;
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;

import javax.annotation.Resource;

/**
 * @author huangyizeng
 * @description Websocket 消息代理配置
 * @date 2021/8/22
 **/
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Resource
    private SocketChanelInterceptor socketChanelInterceptor;

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry){
        //客户端连接端点
        registry.addEndpoint("/exam/websocket")
                .setAllowedOrigins("*")
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic","/queue/", "/exchange/");
    }

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        registration.interceptors(socketChanelInterceptor);
    }

}

package com.learnfuture.elearning.exam.config;

import lombok.extern.slf4j.Slf4j;
import org.springframework.messaging.Message;
import org.springframework.messaging.MessageChannel;
import org.springframework.messaging.simp.stomp.StompCommand;
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
import org.springframework.messaging.support.ChannelInterceptor;
import org.springframework.messaging.support.MessageHeaderAccessor;
import org.springframework.stereotype.Component;

import java.util.List;

/**
 * @author huangyizeng
 * @description
 * @date 2021/8/22
 **/
@Slf4j
@Component
public class SocketChanelInterceptor implements ChannelInterceptor {

    /**
     * 实际消息发送到频道之前调用
     */
    @Override
    public Message<?> preSend(Message<?> message, MessageChannel channel) {

        StompHeaderAccessor accessor =
                MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
        //1、判断是否首次连接
        if (accessor != null && StompCommand.CONNECT.equals(accessor.getCommand())) {
            List<String> nativeHeader = accessor.getNativeHeader("Authorization");
            System.out.println(nativeHeader);
        }
        String jwtToken = accessor.getFirstNativeHeader("token");
        return message;
    }
}

​ WebSocketConfig主要是配置Websocket的开放端点，使能SockJS连接端点，并且配置Spring自带的消息代理的各个过滤器前缀/topic、/queue、/exchange 等。这里的消息代理是作为浏览器的消息代理，是浏览器跟websocket服务端的订阅及消费关系。

​ 接着配置Socket的通道拦截器SocketChanelInterceptor，与Websocket端点建立连接以及后续通过该通道接收消息，都会经过该拦截器。在连接/发送消息的时候，可以通过添加header头，来实现websocket的鉴权。

2.3 编写Websocket的业务消费者

/**
 * @author huangyizeng
 * @description 考试用户消息消费者
 * @date 2021/8/26
 **/
@Slf4j
@Component
public class SendToExamUserConsumer{

    @Resource
    private SimpMessagingTemplate template;

    @Value("${rocketmq.consumer.group.message.sendToExamUser}")
    private String consumerGroup;

    @Value("${rocketmq.name-server}")
    private String nameServer;

    @Value("${rocketmq.topic.message}")
    private String topic;

    @Value("${rocketmq.topic.message.tag.sendToExamUser}")
    private String selectorExpression;

    @PostConstruct
    public void init() {
        DefaultMQPushConsumer consumer = new DefaultMQPushConsumer(consumerGroup);

        consumer.setNamesrvAddr(nameServer);
        consumer.setMessageModel(MessageModel.BROADCASTING);
        consumer.setConsumeFromWhere(ConsumeFromWhere.CONSUME_FROM_FIRST_OFFSET);
        try {
            consumer.subscribe(topic, selectorExpression);
        } catch (MQClientException e) {
            e.printStackTrace();
        }

        //设置一个Listener，主要进行消息的逻辑处理
        consumer.registerMessageListener(new MessageListenerConcurrently() {

            @Override
            public ConsumeConcurrentlyStatus consumeMessage(List<MessageExt> msgs,
                                                            ConsumeConcurrentlyContext context) {
                try {
                    for (MessageExt messageExt : msgs) {
                        String messageBody = new String(messageExt.getBody());
                        JSONObject jsonObject = JSONObject.parseObject(messageBody);
                        WebsocketMsgResp websocketMsgResp = jsonObject.toJavaObject(WebsocketMsgResp.class);

                        String destination = "/queue/examUserDetailId_" + websocketMsgResp.getExamUserDetailId();
                        template.convertAndSend(destination, websocketMsgResp);

                        log.info("考试用户消息消费成功, message={}", messageBody);
                    }
                    return ConsumeConcurrentlyStatus.CONSUME_SUCCESS;
                } catch (Exception e) {
                    log.error("考试用户消息消费失败, message={}", msgs, e);
                    throw new ServiceException(ApiCode.FAILURE, "考试用户消息消费失败", e);
                }
            }
        });

        // 调用start()方法启动consumer
        try {
            consumer.start();
        } catch (MQClientException e) {
            log.error("SendToExamUserConsumer 启动失败", e);
        }
    }
}

​ 这里主要是定义了一个业务的RocketMQ消费者，消息模式设为广播模式，这样当websocket服务集群化部署时，只要有一条消息生产过来，那每一个websocket服务都能够消费到。避免了分布式下Websocket的消息推送问题。

2.4 js代码实现

<script src="/js/websocket.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/sockjs.min.js"></script>
<script src="/js/stomp.min.js"></script>

function connect(url) {
   var host = window.location.host; // 带有端口号
   userId =  GetQueryString("userId");
   var socket = new SockJS("http://localhost:9000/api/exam/websocket?access_token=4c819e0f-a0a0-448a-8f79-9b9a538f5837", null, {timeout : 10000});
   stompClient = Stomp.over(socket);
   stompClient.connect({"Authorization" : "Bearer 5807a5eb-dbf1-4ac7-8c40-8aeaa25ccf65"}, function (frame) {
      writeToScreen("connected: " + frame);
      stompClient.subscribe("/queue/examUserDetailId_" + userId, function (response) {
         writeToScreen(response.body);
      });

      }, function (error) {
      }
   )
}

​ 引入相关js包后，新建SockJS对象后，调用stompClient.connect发起websocket服务连接，通过stompClient.subscribe发起跟websocket服务的消息订阅，后续websocket服务发送到具体topic下的消息，都会发送到对应的浏览器那里。

3、技术难点

3.1 网关鉴权

​ 现在系统架构中，所有需要鉴权的接口都会在gateway中进行鉴权，并且通过在header中，添加对应的Authrization属性来传参通过OAuth2的鉴权，而websocket的info接口（比如/api/exam/websocket 是端点，那么在发起websocket连接之前，会先发送一个/api/exam/websocket/info接口查看当前websocket服务是否存在）是没办法将token放在header进行调用的，只能通过/info?token=xxx 的形式来发起。

​ 而OAuth默认是先从Header中获取token，接着再从url中的参数获取token。此时我们只能通过url传递token过去，但是OAuth默认是不允许从url进行获取的，所以需要手动设置成允许。

​ 优先从header中获取，其次是从参数中获取。

OAuth2AuthenticationProcessingFilter.doFilter

​ 设置成允许从参数中获取token

// token转换器
ServerBearerTokenAuthenticationConverter converter = new ServerBearerTokenAuthenticationConverter();
converter.setAllowUriQueryParameter(true); // 设置成允许从参数中获取token

3.2 前端联调问题

3.2.1 WebSocket is closed before the connection is established.

​ 主要是由于前端本地webpack的代理没有开启ws 协议的支持。

3.2.2 Error during WebSocket handshake: Unexpected response code: 400

​ 前端经过nginx代理，而nginx 不支持http请求的升级，而Websocket是首先发送一个http请求，然后将该请求升级成Websocket请求，所以需要添加支持配置：

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

4、存在的问题

4.1 websocket 的高并发性能还未进行测试