我对restapi和websockets很陌生。我正在为我的学校项目创建一个任务板。每当我把一个任务拖到一个新的列上，我想让它用websockets实时更新它，我的问题是如何做到这一点？
这基本上就是我现在所拥有的一个带有restapi的后端和一个带有react的前端

@RestController
    public class BoardController {

    @Autowired
    private BoardService service;

    @CrossOrigin
    @GetMapping("/board/{boardId}")
    public Board getBoard(@PathVariable(value = "boardId") Integer boardId) {
        return service.getBoardById(boardId);
    }

    //front end react request
    const refetch = useCallback(() => {
    axios
        .get("http://localhost:8080/board/" + id,{
            headers: {
                'Authorization': "Bearer " + localStorage.getItem("jwttoken"),
            }
        })
        .then((result) => {
            console.log(result);
            if(result.data.cols[0] != null) {
                setFirstStatus(result.data.cols[0].status);
            }
            setBoardName(result.data.title)
            setBoardId(result.data.id)
            setItems(result.data.tasks)
            setStatuses(result.data.cols)
        }).catch(error => { 
            console.log(error);
        });

}, [])