SpringBoot使用WebScoket（附带前端测试代码）

什么是WebScoket?

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

为什么使用WebScoket？

因为 ：HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。而WebScoket可以由服务器主动发送信息给客户端。

应用实例：

maven依赖：

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

启用WebSocket的支持：创建WebSocketConfig类

package com.iecas.monitor.webscoket.config;

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

/**
 * @Auther: sy
 * @Date: 2020/10/29 20:57
 * @Description: 配置websocket后台客户端
 */

@Component
public class WebSocketConfig {
    /**
     * ServerEndpointExporter 作用
     *
     * 这个Bean会自动注册使用@ServerEndpoint注解声明的websocket endpoint
     *
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

WebSocketServer：

这就是重点了，核心都在这里。

1. 因为WebSocket是类似客户端服务端的形式(采用ws协议)，那么这里的WebSocketServer其实就相当于一个ws协议的Controller

2. 直接@ServerEndpoint("/webScoket/send") 、@Component启用即可，然后在里面实现@OnOpen开启连接，@onClose关闭连接，@onMessage接收消息等方法。

3. 新建一个LinkedList  webSocketServiceList用于储存多个连接，当需要推送时同时推送多个页面。

4. sendInfoOne(String message )方法直接调用发送到前端，scheduledSend()定时监听设置推送条件，符合条件进行推送。

   package com.iecas.monitor.webscoket.service;
   
   import com.alibaba.fastjson.JSON;
   import com.alibaba.fastjson.JSONObject;
   import io.swagger.annotations.ApiOperation;
   import lombok.extern.slf4j.Slf4j;
   import org.apache.commons.lang.StringUtils;
   import org.springframework.scheduling.annotation.EnableScheduling;
   import org.springframework.scheduling.annotation.Scheduled;
   import org.springframework.stereotype.Component;
   import org.springframework.util.CollectionUtils;
   
   import javax.websocket.*;
   import javax.websocket.server.PathParam;
   import javax.websocket.server.ServerEndpoint;
   import java.io.IOException;
   import java.util.LinkedList;
   import java.util.concurrent.ConcurrentHashMap;
   import java.util.concurrent.ConcurrentLinkedQueue;
   
   @Slf4j
   @Component
   @EnableScheduling   // 2.开启定时任务
   @ServerEndpoint("/websocket/send")
   public class WebSocketGroupService {
   
       /**
        * 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
        */
       private static int onlineCount = 0;
       /**
        * concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
        */
       private static LinkedList<WebSocketGroupService> webSocketServiceList = new LinkedList<>();
       /**
        * concurrent包的线程安全Set，用来存放要发送的数据
        */
       private static LinkedList<String> messageList = new LinkedList<>();
   
       /**
        * 与某个客户端的连接会话，需要通过它来给客户端发送数据
        */
       private Session session;
   
       /**
        * 连接建立成功调用的方法
        */
       @OnOpen
       public void onOpen(Session session) {
           this.session = session;
           webSocketServiceList.add(this);
           addOnlineCount();
           log.info("当前连接数为:" + getOnlineCount());
           try {
               sendMessage("连接成功");
           } catch (IOException e) {
               log.error("连接失败!!!!!!");
           }
       }
   
       /**
        * 连接关闭调用的方法
        */
       @OnClose
       public void onClose() {
           webSocketServiceList.remove(this);
           subOnlineCount();
           log.info("当前在线人数为:" + getOnlineCount());
       }
   
       /**
        * 收到客户端消息后调用的方法
        *
        * @param message 客户端发送过来的消息
        */
       @OnMessage
       public void onMessage(String message, Session session) {
           log.info("报文:" + message);
           //消息保存到数据库、redis
           if (StringUtils.isNotBlank(message)) {
               try {
                   //解析发送的报文
                   JSONObject jsonObject = JSON.parseObject(message);
                   for (WebSocketGroupService webSocketGroupService : webSocketServiceList) {
                       webSocketGroupService.sendMessage(jsonObject.toJSONString());
                   }
               } catch (Exception e) {
                   e.printStackTrace();
               }
           }
       }
   
       /**
        * @param session
        * @param error
        */
       @OnError
       public void onError(Session session, Throwable error) {
           log.error("错误原因:" + error.getMessage());
           error.printStackTrace();
       }
   
       /**
        * 实现服务器主动推送
        */
       public void sendMessage(String message) throws IOException {
           this.session.getBasicRemote().sendText(message);
       }
   
       @ApiOperation("添加定时任务")
       @Scheduled(cron = "0/10 * * * * ?")
       private void scheduledSend() {
           try {
               //发送消息数
               for (String message : messageList) {
                   //发送连接数
                   for (WebSocketGroupService webSocketGroupService : webSocketServiceList) {
                       //发送消息
                       webSocketGroupService.sendMessage(message);
                   }
               }
               if (!CollectionUtils.isEmpty(messageList)) {
                   log.info("发送成功：共发送给[{}]个页面，[{}]个消息", webSocketServiceList.size(), messageList.size());
                   messageList.clear();
               }
           } catch (Exception e) {
               log.error("发送失败：" + e);
               e.printStackTrace();
           }
       }
   
       /**
        * 将发送消息加入缓存
        */
       public static void sendInfo(String message) throws IOException {
           try {
               messageList.add(message);
           } catch (Exception e) {
               log.error("发送失败：" + e);
               e.printStackTrace();
           }
       }
   
       /**
        * 直接发送自定义消息
        */
       public static void sendInfoOne(String message ) throws IOException {
           try {
               for (WebSocketGroupService webSocketGroupService : webSocketServiceList) {
                   webSocketGroupService.sendMessage(message);
               }
               log.info("共发送[{}]个消息，成功" + webSocketServiceList.size());
           } catch (Exception e) {
               log.error("发送失败：" + e);
               e.printStackTrace();
           }
       }
   
       public static synchronized int getOnlineCount() {
           return onlineCount;
       }
   
       public static synchronized void addOnlineCount() {
           WebSocketGroupService.onlineCount++;
       }
   
       public static synchronized void subOnlineCount() {
           WebSocketGroupService.onlineCount--;
       }
   }
   

   测试消息推送：

 自己的Controller写个方法调用WebSocketServer.sendInfo();即可

package com.iecas.monitor.webscoket.controller;

import com.iecas.monitor.webscoket.service.WebSocketGroupService;
import com.iecas.monitor.webscoket.service.WebSocketService;
import org.java_websocket.server.WebSocketServer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import java.io.IOException;

/**
 * WebSocketController
 */
@RestController
public class WebSocketController {

    //通过controller返回html界面
    @RequestMapping("/index")
    public String indexJumpPage() {
        return "index";
    }

    @GetMapping("page")
    public ModelAndView page() {
        return new ModelAndView("websocket");
    }

    @GetMapping("/push/{name}")
    public ResponseEntity<String> pushToWeb(@PathVariable String name) throws IOException {
        WebSocketService.sendInfoByType("测试推送");
        return ResponseEntity.ok("MSG SEND SUCCESS");
    }

    @GetMapping("/send/{name}")
    public ResponseEntity<String> send(@PathVariable String name) throws IOException {
        WebSocketGroupService.sendInfo("测试推送");
        return ResponseEntity.ok("MSG SEND SUCCESS");
    }
}

前端HTML5代码：

前端测试代码index.html位置：/src/main/resources/templates下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket通讯</title>
</head>
<script type = "text/javascript">
    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
             socket = new WebSocket("ws://localhost:8080/websocket/send");
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                console.log(msg.data);
            };
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
        }
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
        }
    }
</script>
<body>
<p>【message】：
<div><input id="message" name="message" type="text" value="message is null"></div>
<p>【操作】：
<div><a onclick="openSocket()">开启socket</a></div>
<p>【操作】：
<div><a onclick="sendMessage()">发送消息</a></div>
</body>

</html>

在SpringBoot配置文件中加入：

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: LEGACYHTML5
    cache: false

运行效果：

显示页面路径：http://localhost:8080/index

调用发送测试路径：http://localhost:8080/send/sy

改动后面参数查看发送效果