React+WebSocket+SpringBoot简单demo

1. 引入依赖

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

2. 编写config

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/*
* websocket连接，如果不需要可以关闭
* */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3. 配置Server

import lombok.extern.slf4j.Slf4j;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import javax.annotation.Resource;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.TimeUnit;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * 连接步骤
 * 返回单个数据
 */

@ServerEndpoint( value = "/websocket/{user_id}" )
@Component
@Slf4j
public class WebSocketServer {
    private static Logger L = LoggerFactory.getLogger(WebSocketServer.class);
    private String userId;
   
    /**
     * 建立连接
     *
     * @param session
     */
    @OnOpen
    public void onOpen(Session session, @PathParam( "user_id" ) String userId) {
        this.userId = userId;
        log.info("ok");
    }

    /**
     * 关闭连接
     */
    @OnClose
    public void onClose() {
        log.info("关闭连接");
    }

    /**
     * 发送消息
     *
     * @param message
     * @param session
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        try {
                session.getBasicRemote().sendText("消息收到");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

4. React编写

import React, { useState, useEffect } from 'react';

const Message: React.FC = () => {
  const [socket, setSocket] = useState<WebSocket | null>(null);
  const [message, setMessage] = useState('');
  const [receiveMessage, setReceiveMessage] = useState('');

  useEffect(() => {
    // 创建 WebSocket 连接
    const url = 'ws://localhost:8101/api/websocket/1';
    const ws = new WebSocket(url);
    // 保存 WebSocket 对象到状态中
    setSocket(ws);

    // 监听 WebSocket 连接的打开事件
    ws.onopen = () => {
      console.log('WebSocket 连接已打开');
    };

    // 监听 WebSocket 接收消息事件
    ws.onmessage = (event) => {
      const receivedMessage = event.data;
      setReceiveMessage(receivedMessage);
      console.log('接收到消息:', receivedMessage);
    };

    // 监听 WebSocket 连接关闭事件
    ws.onclose = () => {
      console.log('WebSocket 连接已关闭');
    };

    // 在组件卸载时关闭 WebSocket 连接
    return () => {
      ws.close();
    };
  }, []);

  const sendMessage = () => {
    if (socket && message) {
      // 发送消息到 WebSocket 服务器
      socket.send(message);
    }
  };

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setMessage(event.target.value);
  };

  return (
    <div>
      <input type="text" value={receiveMessage} readOnly />
      <input type="text" value={message} onChange={handleInputChange} />
      <button onClick={sendMessage}>发送</button>
    </div>
  );
};
export default Message;

5. 展示运行

建立连接

发送消息

总结

以上就是简单的WebSocket实现。后续将会优化界面。