Spring Boot+WebSocket实现消息推送

具体步骤如下，

1、在pom.xml文件中引入坐标

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

2、为Spring Boot项目编写WebSocket配置类

/**
 * WebSocket配置类
 * */
@Component
public class WebSocketConfig {

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

}

3、编写服务端-WebSocket消息监听类

PS：WebSocket.java类中给出的@ServerEndpoint("/websocket")注解，提供了前端代码中用于实例化WebSocket的访问路径

import org.apache.ibatis.logging.Log;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@Component
@ServerEndpoint("/websocket")//WebSocket访问地址
public class WebSocket {
    private Session session;
    //WebSocket容器，存储Session实例
    private static CopyOnWriteArraySet<WebSocket> webSocketSet=new CopyOnWriteArraySet<>();

    //对应前端的请求
    /**
     * 打开连接
     * */
    @OnOpen
    public void onOpen(Session session){
        this.session=session;
        webSocketSet.add(this);
        System.out.println("【websocket消息】有新的连接，总数{"+webSocketSet.size()+"}");
    }

    /**
     * 关闭连接
     * */
    @OnClose
    public void onClose(){
        webSocketSet.remove(this);
        System.out.println("【websocket消息】连接断开，总数{"+webSocketSet.size()+"}");
    }

    /**
     * 接收消息
     * */
    @OnMessage
    public void onMessage(String message){
        System.out.println("【websocket消息】收到客户端发来的消息{"+message+"}");
    }

    /**
     * 发送消息
     * */
    public void sendMessage(String message){
        //遍历存储的WebSocket实例
        for (WebSocket webSocket : webSocketSet){
            //广播消息
            System.out.println("【websocket消息】广播消息{"+message+"}");
            //发送消息
            try {
                webSocket.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

4、编写客户端-WebSocket消息监听模块

var websocket = null
    //浏览器是否支持
if ('WebSocket' in window) {
    // 上面我们给webSocket定位的路径
    //IP:localhost:8088/springboot-bysj   访问路径：/websocket
    websocket = new WebSocket('ws://localhost:8088/websocket')
} else {
    alert('该浏览器不支持websocket!')
}
//建立连接
websocket.onopen = function(event) {
        console.log('建立连接')
    }
    //关闭连接
websocket.onclose = function(event) {
        console.log('连接关闭')
    }
    //消息来的时候的事件
websocket.onmessage = function(event) {
    // 这里event.data就是我们从后台推送过来的消息
    console.log('收到消息:' + event.data)
        // 在这里我们可以在页面中放置一个音乐，例如“您有新的订单了！”这样的提示音
}

//发生错误时
websocket.onerror = function() {
        alert('websocket通信发生错误！')
    }
    //窗口关闭时，Websocket关闭
window.onbeforeunload = function() {
    websocket.close()
}
//到处当前模块
module.exports = websocket

5、建立Socket连接

此时，只需要在前端工程的主模块中引入WebSocket.js文件，即可在项目初始化时与服务端之间建立WebSocket连接。

图 客户端-建立WebSocket连接提示

6、利用WebSocket技术实现消息推送

通过上面的步骤，已经实现了客户端与服务端的双向消息连接，接下来，通过编写服务端接口，实现消息推送。

6.1 服务端消息服务接口

为了便于测试，可编写如下的接口，供客户端访问。

package com.example.demo01.Service;

import com.example.demo01.Entity.WebSocket;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@RestController
public class WebSocketService {
    //自动注入
    @Autowired
    private WebSocket webSocket;

    //客户端发送request请求，出发以下方法
    @RequestMapping("/createorder")
    public String createOrder(HttpServletRequest request, HttpServletResponse response) {
        //获取cookie中的订单号
        webSocket.sendMessage("有新的订单");
        return "success";
    }
    @RequestMapping("/deleteorder")
    public String deleOrder(HttpServletRequest request,HttpServletResponse response){
        //删除订单
        webSocket.sendMessage("删除订单");
        return "delete success";
    }

}

6.2 客户端请求数据接口

简单起见，可直接在浏览器地址栏中输入接口访问路径，例如：

http://localhost:8088/deleteorder

可以看到浏览器页面中内容变化如下，

同时，前端项目中的控制台会打印如下信息，

至此，大家应该明白如何使用WebSocket技术实现消息推送了吧。
总结如下，

【1】在服务端编写可供客户端访问的数据接口，并借助WebSocket实例进行消息广播；
【2】在客户端访问服务端提供的数据接口，并通过WebSocket实例的onmessage方法接收服务端推送的消息内容，
并执行相应的处理。