报红：找不到名称ref ts(2304)、‘ref‘ is not defined. eslint(no-undef)

1. Maven 依赖

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

2. 注册ServerEndpointExporter、WebSocketConfigProperties

package xx.xx.xx.xx.xx;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;

@Data
@ConfigurationProperties("spring.socket")
public class WebSocketConfigProperties {

    //是否开启WebSocket
    private boolean enabel;
}

package xx.xx.xx.xx.xx;

import org.springframework.beans.BeansException;
import org.springframework.beans.factory.BeanFactory;
import org.springframework.beans.factory.BeanFactoryAware;
import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@ConditionalOnProperty(prefix = "spring.socket", name = "enabel", havingValue = "true")
@Configuration
@EnableConfigurationProperties(WebSocketConfigProperties.class)
public class WebSocketAutoConfig implements BeanFactoryAware {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

    @Override
    public void setBeanFactory(BeanFactory beanFactory) throws BeansException {
        SocketBaseService.setBeanFactory(beanFactory);
    }
}

配置SocketBaseService

package xx.xx.xx.xx.xx;

import cn.hutool.core.util.*;
import org.springframework.beans.factory.BeanFactory;
import org.springframework.beans.factory.annotation.Autowired;

import javax.websocket.*;
import java.lang.reflect.Field;
import java.util.Arrays;
import java.util.concurrent.ConcurrentHashMap;


public abstract class SocketBaseService {


    protected String randomId;

    protected Session session;

    protected static BeanFactory beanFactory;

    /**
     * 会话池
     */
    private static ConcurrentHashMap<String, Session> sessionPool = new ConcurrentHashMap<>();

    /**
     * 解析自动装配属性
     */
    private void processAutowriteFields() {
        Field[] fields = this.getClass().getDeclaredFields();
        Arrays.stream(fields).forEach(field -> {
            Autowired annotation = field.getAnnotation(Autowired.class);
            if (ObjectUtil.isEmpty(annotation)) {
                return;
            }
            Object bean = SocketBaseService.beanFactory.getBean(field.getType());
            if (ObjectUtil.isNotEmpty(bean)) {
                try {
                    field.setAccessible(true);
                    field.set(this, bean);
                } catch (IllegalAccessException e) {
                }
            }
        });
    }


    @OnOpen
    public void onConnect(Session session) {
        this.processAutowriteFields();

        this.randomId = IdUtil.nanoId();
        this.session = session;
        sessionPool.put(randomId, session);
        this.afterConnect(session);
    }

    /**
     * 连接回调
     *
     * @param session
     */
    public abstract void afterConnect(Session session);

    /**
     * 消息
     *
     * @param message
     */
    @OnMessage
    public void onMessage(String message) {
        this.afterMessage(message);
    }

    /**
     * 接受消息回调
     *
     * @param message
     */
    public abstract void afterMessage(String message);

    /**
     * 连接错误
     *
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        this.afterError(error);
    }

    /**
     * 连接错误回调
     *
     * @param error
     */
    public abstract void afterError(Throwable error);

    /**
     * 关闭连接
     */
    @OnClose
    public void onClose() {
        this.beforeClose();
        sessionPool.remove(randomId);
    }

    /**
     * 关联连接回调
     */
    public abstract void beforeClose();
}

案例：文件上传进度监听

第一步：异步上传

Controller

    @PostMapping("/asynceUpload")
    @Transactional
    public Object asynceUpload(FileInfo info) {
    	//获取一个异步上传任务id，方便后续跟踪文件上传进度
        String taskId = userFileService.getAsynceUploadTaskId(info);
        userFileService.asynceUpload(info, taskId);
        return taskId;
    }

Service

@Async
@Override
public String asynceUpload(FileInfo info, String taskId) {
//处理文件
//更新进度
}

第二步：监听上传进度

package xx.xx.xx.xx.xx.xx;

import cn.hutool.core.util.ObjectUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.cron.CronUtil;
import cn.hutool.cron.task.Task;
import cn.hutool.json.JSONUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import xx.common.web.socket.SocketBaseService;
import xx.xx.client.server.domain.TeamData;
import xx.xx.client.server.service.TeamDataService;

import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

@Service
@ServerEndpoint("/socket/getSyncFileTask")
public class UserFileSocketController extends SocketBaseService {

    private String scheduleId;

    private List<String> tasks = new ArrayList<>();

    @Autowired
    private TeamDataService teamDataService;

    @Override
    public void afterConnect(Session session) {

        scheduleId = CronUtil.schedule("*/2 * * * * *", new Task() {
            @Override
            public void execute() {
                exce();
            }
        });
    }

    @Override
    public void afterMessage(String message) {
        this.tasks = JSONUtil.toList(message, String.class);
    }

    @Override
    public void afterError(Throwable error) {

    }

    @Override
    public void beforeClose() {
        if (ObjectUtil.isNotEmpty(scheduleId)) {
            CronUtil.remove(scheduleId);
        }
    }

    private void exce() {
        if (session.isOpen()) {
        	//获取任务进度
            List<TeamData> taskList = teamDataService.findByIds(tasks);
            //返回进度信息
            session.getAsyncRemote().sendText(JSONUtil.toJsonStr(taskList.stream().filter(el -> StrUtil.startWith(el.getKey(), "SYNCE_UPLOAD_")).collect(Collectors.toList())));
        }
    }
}