如何基于Spring Boot与JavaScript实现WebSocket通信通道？

Hey there! Let's refine your WebSocket setup to make sure it works smoothly with your JavaScript client. First, let's fix and complete your configuration code, then walk through what each part does, plus add a frontend example to get you connected.

Your Current (Incomplete) Configuration #

First, here's the code you shared, formatted properly:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration extends AbstractWebSocketMessageBrokerConfigurer{
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket")
                .setAllowedOrigins("*...");
    }
}

Polished & Complete Configuration #

A quick heads-up: AbstractWebSocketMessageBrokerConfigurer is deprecated in Spring Boot 2.0+. Instead, we implement WebSocketMessageBrokerConfigurer directly. Here's the full, working config:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // Register the WebSocket endpoint clients will connect to
        registry.addEndpoint("/websocket")
                .setAllowedOrigins("*") // Allow all origins (use specific domains in production!)
                .withSockJS(); // Enable SockJS fallback for browsers/environments without WebSocket support
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // Enable in-memory message broker for broadcast/peer-to-peer messages
        registry.enableSimpleBroker("/topic", "/queue");
        // Prefix for messages sent from client to server (maps to @MessageMapping annotations)
        registry.setApplicationDestinationPrefixes("/app");
    }
}

Key Explanations #

• registerStompEndpoints: Sets up the entry point for client connections. withSockJS() is non-negotiable for broader compatibility—it falls back to techniques like long polling for environments that don't support native WebSocket.
• configureMessageBroker: Handles message routing:
  • enableSimpleBroker: Spins up an in-memory broker to manage broadcast (/topic) and point-to-point (/queue) messages. For production scaling, swap this with enableStompBrokerRelay to use RabbitMQ or ActiveMQ.
  • setApplicationDestinationPrefixes: Defines the prefix for client-to-server messages. A client sending to /app/chat will trigger a server method annotated with @MessageMapping("/chat").

Frontend JavaScript Example (STOMP + SockJS) #

Here's how to connect and communicate from your JavaScript client:

// Import dependencies (use CDN or install via npm)
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

// Initialize connection
const socket = new SockJS('http://localhost:8080/websocket');
const stompClient = Stomp.over(socket);

// Connect to the server
stompClient.connect({}, (frame) => {
    console.log(`Connected successfully: ${frame}`);

    // Subscribe to a broadcast topic
    stompClient.subscribe('/topic/public', (message) => {
        const payload = JSON.parse(message.body);
        console.log('Received broadcast message:', payload);
    });

    // Send a message to the server
    stompClient.send(
        '/app/chat', 
        {}, 
        JSON.stringify({ content: 'Hello from the JavaScript client!' })
    );
}, (error) => {
    console.error('Connection failed:', error);
});

// Helper to disconnect cleanly
function disconnect() {
    if (stompClient?.connected) {
        stompClient.disconnect();
        console.log('Disconnected from WebSocket');
    }
}

Server-Side Message Handling Example #

Add a controller to process incoming messages and broadcast responses:

@Controller
public class ChatController {

    @MessageMapping("/chat") // Matches client's /app/chat endpoint
    @SendTo("/topic/public") // Broadcasts response to all subscribers of /topic/public
    public ChatMessage handleChatMessage(ChatMessage message) {
        // Add your business logic here (e.g., save to DB, sanitize content)
        return message;
    }

    // DTO for chat messages
    public static class ChatMessage {
        private String content;

        // Getters and Setters
        public String getContent() { return content; }
        public void setContent(String content) { this.content = content; }
    }
}

Production Tips #

• Avoid setAllowedOrigins("*"): In production, specify exact allowed domains (e.g., setAllowedOrigins("https://your-frontend.com")) to prevent CORS vulnerabilities.
• Use a Proper Message Broker: For scaling beyond a single server, replace the in-memory broker with RabbitMQ or ActiveMQ using enableStompBrokerRelay.

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