springboot整合websocket出错:Error during WebSocket handshake: Unexpected response code: 200

前端建立websocket链接的时候,控制台打印Error during WebSocket handshake: Unexpected response code: 200,
这种情况多半是因为服务端的拦截器出了问题。

要知道websocket是基于http的,建立websocket链接的时候也用经过握手,这个握手走的就是传统的http请求(好像不同浏览器实现的细节也不太一样,chrome应该是走的http),因此如果服务端有拦截器的话,是会把握手信息拦截下来的。

解决办法:
我的服务端是springboot+shrio, 解决办法很简单

@Configuration
public class ShiroConfig {

    /**
     * Shiro的Web过滤器Factory 命名:shiroFilter<br /> * * @param securityManager * @return
     */
    @Bean(name = "shiroFilter")
    public ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager) {
        System.out.println(("注入Shiro的Web过滤器-->shiroFilter" + ShiroFilterFactoryBean.class));
        ShiroFilterFactoryBean shiroFilterFactoryBean = new ShiroFilterFactoryBean();

        shiroFilterFactoryBean.setSecurityManager(securityManager);
        shiroFilterFactoryBean.setLoginUrl("/user/login");
        shiroFilterFactoryBean.setSuccessUrl("/index");
        shiroFilterFactoryBean.setUnauthorizedUrl("/403");
        Map<String, String> filterChainDefinitionMap = new LinkedHashMap<String, String>();
        filterChainDefinitionMap.put("/logout", "logout");

        filterChainDefinitionMap.put("/user/login", "anon");
        filterChainDefinitionMap.put("/websocket", "anon"); //避免拦截/websocket链接
        filterChainDefinitionMap.put("/reg", "anon");
        filterChainDefinitionMap.put("/plugins/**", "anon");
        filterChainDefinitionMap.put("/pages/**", "anon");
        filterChainDefinitionMap.put("/api/**", "anon");
        filterChainDefinitionMap.put("/dists/img/*", "anon");
        filterChainDefinitionMap.put("/**", "authc");

        shiroFilterFactoryBean.setFilterChainDefinitionMap(filterChainDefinitionMap);
        shiroFilterFactoryBean.getFilters().put("authc",  new MyFormAuthenticationFilter());


        return shiroFilterFactoryBean;
    }
   }

核心代码其实就这一行 filterChainDefinitionMap.put("/websocket", “anon”);

另外附上我的websocket配置:

@Configuration
public class WebsocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

/**
 * 坑点:
 * \@ServerEndpoint注解的类,不可以用AOP, 否则会出现无法注入的情况
 */
@ServerEndpoint(value = "/websocket")
@Component
public class WSServer {
    private static Hashtable<String, WSServer> websocketTable = new Hashtable<>();

    private static final String TYPE_INIT = "0";
    private static final String TYPE_EXCEPTION = "-1";
    private Session session;
    
    //心跳定时器
    private Timer pulsTimer;
    private long timerPeriod = 45 * 1000;
    private String userName;    //标识用户

    @OnOpen
    public void onOpen(Session session){
        this.session = session;

        //第一个链接后,启动定时器发送定时心跳
        if(pulsTimer == null){
            pulsTimer = new Timer();
            pulsTimer.schedule(new TimerTask() {
                @Override
                public void run() {
                    try {
                        WSServer.broadcast(WSMessage.pulseMessage());
                    }catch (IOException e){
                        e.printStackTrace();
                    }
                }
            }, 0L, timerPeriod);
        }
    }

    @OnClose
    public void onClose() {
        if(!StringUtils.isEmpty(userName)){
            websocketTable.remove(userName);
        }
    }

    /**
     * {
     *     type:"1",
     *     message:"JSON",
     *     rdnum:"用来唯一标识这条消息的id"
     * }
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        try {
            JSONObject jsonObject = JSONObject.parseObject(message);
            String type = jsonObject.getString("type");
            switch (type){
                case TYPE_INIT: init(jsonObject);break;
                default:;
            }
        }catch (JSONException e){
            e.printStackTrace();
            WSMessage wsMessage = new WSMessage(TYPE_EXCEPTION, "json格式出错");
            sendMessage(wsMessage);
        }

    }

    @OnError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }


    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }

    public void sendMessage(WSMessage message){
        try {
            sendMessage(message.toString());
        }catch (IOException e){
            e.printStackTrace();
        }
    }

    public void init(JSONObject jsonObject){
        JSONObject messge = jsonObject.getJSONObject("message");
        if(messge != null){
            String userName = messge.getString("userName");
            if(StringUtils.isEmpty(userName)){
                websocketTable.put(userName, this);
            }
        }
    }


    public static synchronized void broadcast(String message)  throws IOException{
        for(Iterator<String> iterator = websocketTable.keySet().iterator(); iterator.hasNext(); ){
            WSServer wsServer = websocketTable.get(iterator.next());
            wsServer.sendMessage(message);
        }
    }

    public static synchronized void broadcast(WSMessage message)  throws IOException{
        broadcast(message.toString());
    }

    public static synchronized void broadcast(WSMessage message, String userName)  throws IOException{
        broadcast(message.toString(), userName);
    }

    public static synchronized void broadcast(String message, String userName)  throws IOException{
        WSServer wsServer = websocketTable.get(userName);
        if(wsServer != null){
            wsServer.sendMessage(message);
        }
    

    public static synchronized int getOnlineCount() {
        return websocketTable.size();
    }
}

看都看到这儿了,点个赞再走呗(。・∀・)ノ

<think>好的,我现在需要解决用户提出的两个问题:WebSocket握手错误(Unexpectedresponse code:400)和Three.js中球体旋转无效的问题。先拆分问题,逐个分析。 首先,WebSocket的400错误。用户提到在开发环境正常,但测试和生产环境出现错误,生产环境用了Nginx反向代理。引用[1]和[4]都涉及Nginx配置问题,特别是WebSocket代理的设置。常见原因是Nginx没有正确配置Upgrade和Connection头,导致WebSocket握手失败。检查用户的Nginx配置,发现虽然已经设置了proxy_set_header Upgrade和Connection,但可能缺少其他必要配置,比如超时设置或协议版本。另外,引用[2]提到SpringBoot项目中需要添加ServerEndpointExporter的Bean,但用户的问题可能更多在于生产环境的代理配置,而非后端代码。接下来是Three.js球体旋转的问题。用户代码中设置了sphere.rotation.z,但球体仍然垂直于XY轴。根据之前的回答,可能原因是矩阵未更新或坐标系问题。用户已经调用了updateMatrix,但可能需要使用updateMatrixWorld或者检查旋转轴是否正确。此外,使用Group容器包裹对象可能更有效,或者检查几何体的创建方式是否有误。现在需要将这两个问题的解决方案整合,确保回答结构清晰,步骤明确。同时,生成相关问题,并正确引用参考资料。</think>### WebSocket 握手错误 (400) 解决方案 #### **1. Nginx 代理配置优化** ```nginx server { listen 80; server_name yourdomain.com; # 强制 WebSocket 协议升级 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; # 超时设置(单位:秒) proxy_connect_timeout 60; proxy_read_timeout 600; proxy_send_timeout 600; location / { proxy_pass http://localhost:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 关键配置项说明: - `proxy_http_version 1.1`:强制使用 HTTP/1.1 协议[^4] - `Upgrade $http_upgrade`:传递协议升级头 - `Connection "upgrade"`:标记连接类型为升级模式 #### **2. Spring Boot 后端验证** 确保已添加 WebSocket 端点暴露器: ```java @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); // 必须注入该 Bean[^2] } } ``` #### **3. 客户端连接验证** 前端代码需匹配实际路径: ```javascript // 生产环境应使用 wss 协议 const socket = new WebSocket("wss://yourdomain.com/websocket"); ``` --- ### Three.js 球体旋转失效解决方案 #### **1. 矩阵更新机制** 修正后的旋转代码: ```javascript sphere.rotation.z = Math.PI/2; sphere.updateMatrixWorld(true); // 强制更新世界坐标系[^1] ``` #### **2. 四元数旋转替代方案** ```javascript const axis = new THREE.Vector3(0, 0, 1); // Z 轴单位向量 const angle = Math.PI/2; // 旋转角度 sphere.quaternion.setFromAxisAngle(axis, angle); ``` #### **3. 坐标系验证工具** ```javascript // 添加三维坐标系可视化辅助 const axesHelper = new THREE.AxesHelper(10); scene.add(axesHelper); // X:红,Y:绿,Z:蓝[^1] ``` #### **4. 旋转性能公式** 计算旋转后的坐标变换: $$ \begin{bmatrix} x' \\ y' \\ z' \end{bmatrix} = \begin{bmatrix} \cosθ & -\sinθ & 0 \\ \sinθ & \cosθ & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ z \end{bmatrix} $$ 其中 $θ$ 为绕 Z 轴的旋转角度 --- ### 错误排查对照表 | 现象 | 检测点 | 解决方案 | |------|--------|----------| | WebSocket 400 | Nginx 日志检查 `tail -f /var/log/nginx/error.log` | 修正协议升级头配置[^4] | | 球体无旋转 | 检查 `axesHelper` 的 Z 轴方向 | 修正旋转轴向量[^1] | | 连接超时 | 抓包分析 `tcpdump -i eth0 port 80` | 调整代理超时参数[^4] | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值