WebSocket实时改变任务的计算状态【Java+Vue实现】

问题描述

为了让更好地压榨cpu的性能，通常会使用多线程的方式异步地计算多个任务，这样前端发送计算请求之后，后端并不会等到任务计算结束才给前端返回数据，而是添加计算任务就立即返回 “计算任务添加计算成功” 。

后端

依赖

  <!-- websocket -->
  <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-websocket</artifactId>
  </dependency>
  <dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
  </dependency>

配置类

package com.dam.config.webSocket;

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

@Configuration
public class WebSocketConfig {

    /**
     * 注入一个ServerEndpointExporter,该Bean会自动注册使用@ServerEndpoint注解申明的websocket endpoint
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

组件

package com.dam.component;

import com.dam.utils.JwtUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;


/**
 * @author websocket服务
 */
@ServerEndpoint(value = "/shift-scheduling-calculate-service/imserver/{token}")
@Component//将WebSocketServer注册为spring的一个bean
public class WebSocketServer {

    private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);

    /**
     * 记录当前在线连接的客户端的session
     */
    public static final Map<String, Session> tokenAndSessionMap = new ConcurrentHashMap<>();

    /**
     * 浏览器和服务端连接建立成功之后会调用这个方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("token") String token) {
        tokenAndSessionMap.put(token, session);
        log.info("有新用户加入，username={}, 当前在线人数为：{}", JwtUtil.getUsername(token), tokenAndSessionMap.size());
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(Session session, @PathParam("token") String token) {
        String username = JwtUtil.getUsername(token);
        tokenAndSessionMap.remove(username);
        log.info("有一连接关闭，移除username={}的用户session, 当前在线人数为：{}", username, tokenAndSessionMap.size());
    }

    /**
     * 发生错误的时候会调用这个方法
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }

    /**
     * 服务端发送消息给客户端
     */
    public void sendMessage(String message, Session toSession) {
        try {
            log.info("服务端给客户端[{}]发送消息{}", toSession.getId(), message);
            toSession.getBasicRemote().sendText(message);
        } catch (Exception e) {
            log.error("服务端发送消息给客户端失败", e);
        }
    }

}

使用（服务端给客户端发送消息）

计算完成给客户端发送消息

前端

初始化webSocket对象的方法

  /**
         * 初始化webSocket
         */
        webSocketInit() {
            let _this = this;
            if (typeof (WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket协议");
            } else {
                console.log("您的浏览器支持WebSocket协议");
                let socketUrl = "ws://localhost:6001/shift-scheduling-calculate-service/imserver/" + getToken();
                if (socket != null) {
                    socket.close();
                    socket = null;
                }
                // 开启一个websocket服务
                socket = new WebSocket(socketUrl);
                //打开日志事件
                socket.onopen = function () {
                    console.log("websocket已打开");
                };
                //浏览器端收消息，获得从服务端发送过来的文本消息
                socket.onmessage = function (msg) {
                    // console.log("收到数据====" + msg.data);
                    // msg.data={"taskId":15,"isSuccess":1}
                    let mesage = JSON.parse(msg.data);
                    //修改任务的状态
                    _this.editTaskStatus(mesage.taskId, mesage.isSuccess);
                };
                //关闭事件
                socket.onclose = function () {
                    console.log("websocket已关闭");
                };
                //发生了错误事件
                socket.onerror = function () {
                    console.log("websocket发生了错误");
                }
            }
        },