WebSocket操作（JAVA SpringBoot）

有时候，一些操作需要等待服务器处理完后，前端才能进行下一步操作，所以在这个期间前端必须轮询请求后端查看是否已经处理完毕，但是在高访问量的情况下，轮询可能会造成后端服务器瘫痪，所以这时候可以使用websocket来解决这个问题，通过websocket建立长链接，当后端处理完毕后，通知前端执行下一步操作……

Maven引入

这里引入版本，看情况而定，因为springboot可能已经有对应版本，所以这里可以不写具体版本号

<dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-websocket</artifactId>

</dependency>

新建配置类

@Configuration

public class WebSocketConfig {

    @Bean

    public ServerEndpointExporter getServerEndpointExporter() {

        return new ServerEndpointExporter();

    }

}

新建请求服务类

@Component

@ServerEndpoint("/webSocket/{oid}")

public class WebSocketServer {

    private static ConcurrentHashMapsessionMap =new ConcurrentHashMap<>();

    /**

    * 前端发送请求建立websocket连接，就会执行@OnOpen方法

    *

    * @param orderId

    * @param session

    */

    @OnOpen

    public void open(@PathParam("oid")String orderId,Session session) {

        sessionMap.put(orderId, session);

        System.out.println("建立websocket连接 orderId:" + orderId);

    }

    /**

    * 前端关闭页面或者主动关闭websocket链接，都会执行@OnClose

    *

    * @param orderId

    */

    @OnClose

    public void close(@PathParam("oid")String orderId) {

        sessionMap.remove(orderId);

        System.out.println("关闭websocket连接 orderId:" + orderId);

    }

    /**

    * 发送数据到前端

    * @param orderId

    * @param msg

    */

    public static void sendMsg(String orderId,String msg) {

        Session session =null;

        try {

            session =sessionMap.get(orderId);

            session.getBasicRemote().sendText(msg);

        }catch (IOException e) {

            e.printStackTrace();

        }

    }

}

在后端controller中，当需要给前端发消息时，进行如下调用

WebSocketServer.sendMsg(orderId,"2"); //这里的调用了WebSocketServer 类中的sendMsg方法，这里的2是定义的一个状态，用于前端判断之用

前端页面操作

可在页面载入需要执行的JS方法中写如下代码

//前端发送websocket连接请求

let webSocketUrl = webSocketBaseUrl + "webSocket/" + this.orderInfo.orderId;

var websocket = new WebSocket(webSocketUrl);

websocket.onmessage = function(event){

    let msg = event.data;

    if(msg == "2"){  //根据后端传过来的数据进行判断

         //下面则是具体操作业务

        $("#payQrcodeDiv").html("<label style='font-size:20px; color:green'>订单支付完成！</label>");

    }

}