Error during WebSocket handshake: Sent non-empty ‘Sec-WebSocket-Protocol‘ header but no response was

Error during WebSocket handshake: Sent non-empty ‘Sec-WebSocket-Protocol’ header but no response was received

一、分析
二、初步解决
三、最终解决

分析

和前端同事调试WebSocket接口,一次性通过,作为一个老码农很是欣慰。

第二天另外一个前端同事拉取代码,跑项目。啊,怎么WebSokcet连不上,一堆报错。

我看了后台在连接后立马报错,然后又断开连接。丈二和尚摸不着头脑。

通过在线网站多次测试WebSocket连接,没复现,这不是没问题嘛。

网站地址: http://websocket.jsonin.com/

通过我4年开发,6年工作经验来看,一定是前端的问题,一定是别人的问题,与我无关。继续搬砖…

又过了一会,看着后台无休止的报错,烦死了,让我来终结这一切吧。

前端同事发来的错误信息:Error during WebSocket handshake: Sent non-empty ‘Sec-WebSocket-Protocol’ header but no response was received

WebSocket握手时出错:发送了非空的’Sec-WebSocket-Protocol’报头,但没有收到响应。

原来小丑是我自己,真是后端的问题,没有给前端响应头。

分析原因:应该是前端传了非空的’Sec-WebSocket-Protocol’请求头,后端没有给响应,火狐可以是因为火狐没有传,谷歌又传了这个值,害,真麻烦。

初步解决

知道问题了那就先解决,首先想到的是给HttpServletReponse返回请求头Sec-WebSocket-Protocol的数据。有一说一,开干。

在这里插入图片描述
问题又来了,我从哪里获取HttpServletReponse呢,索性给加了两个参数,启动报错,人家不识别。。。

看了一下这个注解,有个配置参数,就你了。写个配置类,在返回的头上加上参数。

在这里插入图片描述
配置类如下:
在这里插入图片描述

最终解决

完事,问了下报错的前端同事可以了不,不出所料,确实可以了。OK,继续干活了。

回头发现控制台又报错,并且通过网站测试WebSokcet也连不上了。。。完蛋,治好了咽炎,鼻炎又犯了。

谷歌浏览器是可以了,但是火狐浏览器连接不到,那问题就明朗了,火狐没有传Sec-WebSocket-Protocol,而谷歌浏览器传这个值了。加个判断最终解决。
在这里插入图片描述
在这里插入图片描述

package com.system.graphical.common.websocket;

import org.springframework.stereotype.Component;

import javax.websocket.HandshakeResponse;
import javax.websocket.server.HandshakeRequest;
import javax.websocket.server.ServerEndpointConfig;
import java.util.List;

@Component
public class WebSocketConfig extends ServerEndpointConfig.Configurator {
    @Override
    public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {
        List<String> list = request.getHeaders().get("Sec-WebSocket-Protocol");
        if (list != null && list.size() > 0) {
            response.getHeaders().put("Sec-WebSocket-Protocol", list);
            super.modifyHandshake(sec, request, response);
        }
    }
}

我是失忆,一个热爱技术的宅男,文章有任何问题您都可以在留言中指出。欢迎留言。也可以加我个人微信一起学习,一起进步!

在这里插入图片描述

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

失忆老幺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值