SpringBoot+Angular Websocket图片传输异常排查求助

1. 确认WebSocket消息转换器配置顺序与有效性 #

Spring WebSocket的消息转换器按注册顺序匹配，若MappingJackson2MessageConverter（默认JSON转换器）排在ByteArrayMessageConverter之前，二进制消息会被错误按JSON解析，无法匹配byte[]类型的@Payload。

检查你的WebSocketMessageBrokerConfigurer实现，确保优先添加二进制转换器：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageConverters(List<MessageConverter> converters) {
        // 优先注册二进制转换器
        converters.add(new ByteArrayMessageConverter());
        // 再添加默认JSON转换器（保留文本消息支持）
        WebSocketMessageBrokerConfigurer.super.configureMessageConverters(converters);
    }

    // 其他配置（如enableSimpleBroker、setApplicationDestinationPrefixes等）
}

同时确认没有自定义转换器拦截二进制消息的处理流程。

2. 前端发送逻辑检查：避免Blob被包装为JSON #

Angular中发送Blob时，直接调用send(blob)即可，不要将Blob包装进JSON对象——否则后端会收到文本类型的JSON字符串，无法匹配byte[]参数。

错误示例（会导致问题）：

// 错误：将Blob包装成JSON发送，后端收到的是文本格式
const payload = JSON.stringify({ image: blob });
this.webSocket.send(payload);

正确示例：

// 正确：直接发送Blob，浏览器自动以二进制帧发送
const file: File = ...; // 获取用户选择的文件
const blob = new Blob([file], { type: file.type });
this.webSocket.send(blob);

如果使用SockJS（应对WebSocket被拦截的场景），需确保客户端版本与服务端兼容，且直接调用send(blob)而非文本包装。

3. 后端控制器注解与参数校验 #

确认@MessageMapping端点与前端发送目标完全匹配，@Payload参数类型正确，无多余参数导致匹配失败：

@Controller
public class ChatController {

    private static final Logger logger = LoggerFactory.getLogger(ChatController.class);

    // 端点需与前端发送目标一致，比如前端发送到"/app/send-image"
    @MessageMapping("/send-image")
    public void handleImageMessage(@Payload byte[] imageBytes, @Header("content-type") String contentType) {
        logger.info("收到图片，大小：{}字节，类型：{}", imageBytes.length, contentType);
        // 后续转发逻辑（如发送给订阅用户）
        // simpMessagingTemplate.convertAndSend("/topic/chat", ...);
    }
}

注意：WebSocket消息不支持自定义请求头，前端发送Blob时浏览器会自动携带content-type头，后端可通过@Header获取；手动添加的其他自定义头无效。

4. 开启DEBUG日志排查消息流转 #

将Spring WebSocket相关包日志级别调到DEBUG，查看消息接收、转换的全过程，定位解析异常或匹配失败原因：

在application.yml中添加：

logging:
  level:
    org.springframework.web.socket: DEBUG
    org.springframework.messaging: DEBUG

发送图片后查看日志：

• 确认是否有Received message日志，判断后端是否接收到消息
• 查看MessageConverter匹配过程，确认ByteArrayMessageConverter是否被选中
• 若有Failed to convert message日志，根据异常信息定位问题

5. 检查WebSocket协议类型与SockJS兼容性 #

如果前端使用SockJS而非原生WebSocket，需确认：

• 服务端配置了@EnableWebSocketMessageBroker且启用SockJS：

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/chat-websocket").withSockJS();
}

• 前端Stomp客户端正确使用SockJS连接，且发送二进制消息时未被自动转为Base64（建议升级SockJS到最新版本避免此问题）。

内容的提问来源于stack exchange，提问作者Khalil2K