做的项目中需要将后端提供的数据展示在前端页面，一开始我是用JS的setInterval()方法，设置一个时间，每过时间发起一次ajax请求。虽然也能凑活着实现，但总感觉数据不是实时刷新的，而且还占用资源，所以学习WebSocke，并总结了一下，以下是本人总结的前后端WebSocke相关代码：

一、后端：

1.pom.xml添加WebSocke依赖

复制
<!-- SpringBoot Websocket -->
<dependency> 
   <groupId>org.springframework.boot</groupId> 
   <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2.WebSocke配置类

复制
@Configuration
public class WebSocketConfig {
 
    /**
     * 这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket  ,如果你使用外置的tomcat就            
        不需要该配置文件
     */ 
    @Bean 
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
 
}

3.WebSocke服务类

复制
@ServerEndpoint(value = "/webSocket")//主要是将目前的类定义成一个websocket服务器端, 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
@Component
@EnableScheduling// cron定时任务
@Data
public class WebSocket {
 
    private static final Logger logger = LoggerFactory.getLogger(WebSocket.class);
 
    /**
     * 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
     */ 
    private static int onlineCount = 0;
 
    /**
     * concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
     */ 
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
 
    /**
     * 与某个客户端的连接会话，需要通过它来给客户端发送数据
     */ 
    private Session session;
 
    public static CopyOnWriteArraySet<WebSocket> getWebSocketSet() {
        return webSocketSet;
    }
 
    public static void setWebSocketSet(CopyOnWriteArraySet<WebSocket> webSocketSet) {
        WebSocket.webSocketSet = webSocketSet;
    }
 
    /**
     * 从数据库查询相关数据信息,可以根据实际业务场景进行修改
     */ 
    @Resource 
    private IndexService indexService;
    private static IndexService indexServiceMapper;
 
    @PostConstruct 
    public void init() {
        WebSocket.indexServiceMapper = this.indexService;
    }
 
    /**
     * 连接建立成功调用的方法
     *
     * @param session 会话
     */ 
    @OnOpen 
    public void onOpen(Session session) throws Exception {
        this.session = session;
        webSocketSet.add(this);
        //查询当前在线人数 
        int nowOnline = indexServiceMapper.nowOnline();
        this.sendMessage(JSON.toJSONString(nowOnline));
    }
 
    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */ 
    @OnMessage 
    public void onMessage(String message, Session session) throws IOException {
        logger.info("参数信息：{}", message);
        //群发消息 
        for (WebSocket item : webSocketSet) {
            try {
                item.sendMessage(JSON.toJSONString(message));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
 
    /**
     * 连接关闭调用的方法
     */ 
    @OnClose 
    public void onClose() {
        webSocketSet.remove(this);
        if (session != null) {
            try {
                session.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
 
    /**
     * 发生错误时调用
     *
     * @param session 会话
     * @param error   错误信息
     */ 
    @OnError 
    public void onError(Session session, Throwable error) {
        logger.error("连接异常！");
        error.printStackTrace();
    }
 
    /**
     * 发送信息
     *
     * @param message 消息
     */ 
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
 
    /**
     * 自定义消息推送、可群发、单发
     *
     * @param message 消息
     */ 
    public static void sendInfo(String message) throws IOException {
        logger.info("信息:{}", message);
        for (WebSocket item : webSocketSet) {
            item.sendMessage(message);
        }
    }
}

​

 4.定时任务（为了给前端实时推送数据，我这里写了个定时任务，定时任务我用的是cron表达式,不懂的同学可以上这个网址学习：cron表达式）

​

复制
@Slf4j
@Component
public class IndexScheduled {
 
    @Autowired 
    private IndexMapper indexMapper;
 
    /**
     * 每3秒执行一次
     */ 
    //@Scheduled(cron = "0/3 * * * * ? ") //我这里暂时不需要运行这条定时任务，所以将注解注释了，朋友们运行时记得放开注释啊 
    public void nowOnline() {
        System.err.println("*********   首页定时任务执行   **************");
 
        CopyOnWriteArraySet<WebSocket> webSocketSet = WebSocket.getWebSocketSet();
        int nowOnline = indexMapper.nowOnline();
        webSocketSet.forEach(c -> {
            try {
                c.sendMessage(JSON.toJSONString(nowOnline));
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
 
        System.err.println("/n 首页定时任务完成.......");
    }
 
}

二、前端：

前端的代码非常的简单，直接上代码。

复制
<body class="gray-bg">
 
<div class="online"> 
   <span class="online">测试在线人数：<span id="online"></span>&nbsp人</span>
</div>
 
 
<script th:inline="javascript">
    
    let websocket = null;
    let host = document.location.host;
    //判断当前浏览器是否支持WebSocket 
    if ('WebSocket' in window) {
        //连接WebSocket节点
        websocket = new WebSocket("ws://" + host + "/webSocket");
    } else {
        alert('浏览器不支持webSocket');
    }
    
    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("error");
    };
    
    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        setMessageInnerHTML("open");
    };
    
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        let data = event.data;
        console.log("后端传递的数据:" + data);
        //将后端传递的数据渲染至页面
        $("#online").html(data);
    };
    
    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("close");
    };
    
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 
    window.onbeforeunload = function () {
        websocket.close();
    };
    
    //将消息显示在网页上 
    function setMessageInnerHTML(innerHTML) {
    
    };
    
    //关闭连接 
    function closeWebSocket() {
        websocket.close();
    };
    
    //发送消息 
    function send() {
        let message = document.getElementById('text').value;
        websocket.send(message);
    };
    
</script>
 
</body>