webSocket实现数据的实时推送(附：前后端代码)

Posted 2023-04-03 Javaの甘乃迪

        之前开发的一个管理系统项目中，首页是数据大屏展示，一开始我是用JS的setInterval()方法，设置一个时间，每过时间发起一次ajax请求。虽然也能凑活着用，但总感觉不是最优的方法，而且还比较占用资源，所以学习WebSocke，以下是本人的一些学习心得及前后端的相关代码：

---

一、简介（什么是WebSocket）

        WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工（full-duplex）通信，即允许服务器主动发送信息给客户端。因此，在WebSocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。

二、数据实时推送的实现方式和应用场景

1.轮询：

        客户端通过代码定时向服务器发送AJAX请求,服务器接收请求并返回响应信息。
        优点：代码相对简单,适用于小型应用。
        缺点：在服务器数据没有更新时,会造成请求重复数据,请求无用,浪费带宽和服务器资源。

2.长连接：

        在页面中嵌入一个隐藏的iframe,将这个隐藏的iframe的属性设置为一个长连接的请求或者xrh请求,服务器通过这种方式往客户端输入数据。
        优点：数据实时刷新,请求不会浪费,管理较简洁。
        缺点：长时间维护保持一个长连接会增加服务器开销。

3.webSocket：

        websocket是html5开始提供的一种客户端与服务器之间进行通讯的网络技术,通过这种方式可以实现客户端和服务器的长连接,双向实时通讯。
        优点：减少资源消耗;实时推送不用等待客户端的请求;减少通信量;
        缺点：少部分浏览器不支持，不同浏览器支持的程度和方式都不同。  

        应用场景：聊天室、智慧大屏、消息提醒、股票k线图监控等。

三、代码实现

• 后端：

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>

如果该文章对您有用，麻烦点赞 收藏 加关注哦！！！ 万分感谢。

前后端如何互联？---websocket

1. pc端的应用，一般会采用前端定时请求后台;

2. app定时去访问后台的话，对用户来说并不友好，会消耗大量的流量，移动端最好的方式就是后台主动向app推送信息;

3. H5提供了一种比较好的方式是websocket，打开app后，向后台发出请求，后台响应后，就可以实时向前端推送信息了，而无需app再次去访问；

4.websocket的前端实现方法：

websocket = null;  
url="127.xxxxxxx/xxx"  
var websocketAddress = ‘ws://‘+ url  ;
//判断当前浏览器是否支持WebSocket  
if(‘WebSocket‘ in window){  
    websocket = new WebSocket(websocketAddress);  
}  
else{  
    alert(‘当前浏览器不支持WebSocket‘)  
}  
//连接发生错误的回调方法  
websocket.onerror = function(){  
    //notificationReminder("错误");  
};  
  
//连接成功时的回调方法  
websocket.onopen = function(event){  
    console.log(event);  
}  
  
//接收到消息的回调方法  
websocket.onmessage = function(event){  
    $scope.notificationReminder(event.data);  
}  
  
//连接关闭的回调方法  
websocket.onclose = function(){  
    //notificationReminder("关闭");  
}  
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。  
window.onbeforeunload = function(){  
    websocket.close();  
}  
  
//发送消息  
$scope.send = function(){  
    websocket.send(localStorageService.get(‘UserID‘));  
}  
$scope.closeWebSocket = function(){  
    websocket.close();  
}