Java后端搭一个简单的Websocket

62 阅读1分钟

1.引包

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

2.extends TextWebSocketHandler

public class MyWebSocketHandler extends TextWebSocketHandler {

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) {
        try {
            // 处理客户端消息
            String clientMessage = message.getPayload();
            System.out.println("Received message: " + clientMessage);

            // 发送消息到客户端
            session.sendMessage(new TextMessage("Hello from server: " + clientMessage));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

3.implements WebSocketConfigurer

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");
    }
}

前端连接示例

至此后端完成,前端连接示例如下:

const socket = new WebSocket('ws://localhost:8080/ws');
// 当连接成功时
socket.onopen = function(event) {
    debugger
    console.log('WebSocket connection opened.');
    // 发送消息到服务器
    socket.send('Hello Server!');
};

// 当收到服务器消息时
socket.onmessage = function(event) {
    console.log('Message from server ', typeof event.data, ' ', event.data);
};

// 当连接关闭时
socket.onclose = function(event) {
    console.log('WebSocket connection closed: ', event);
};

// 当出现错误时
socket.onerror = function(error) {
    console.error('WebSocket error: ', error);
};

image.png