使用websocket让服务器端给客户端推数据

桃扇骨 2022-02-19 13:57 316阅读 0赞

### 使用websocket让服务器端给客户端推数据 ###

*  1 背景
 *  2 搭建dome
 *   *  2.0 项目结构
     *  2.1 创建一个springboot项目
     *  2.2 添加maven依赖
     *  2.3 开启WebSocket支持
     *  2.4 消息推送
     *  2.5 前端发起socket连接请求
     *  2.6 原理图

# 1 背景 #

最近对websocket比较感兴趣，一直在想http都是客户端向服务端主动发请求，然后进行数据交互。但是如何让服务器端主动向客户端发送数据或者推送事件呢？  
很神奇，比较好奇，带着这样的疑问，就来简单了解下websocket。

准备分三步学习：

*  快速使用springboot搭建一个dome，先感受websocket的神奇
 *  做一个1对1（好友聊天），1对多（群聊）的demo
 *  分析源码

> 本篇文章做第一步，使用springboot搭建一个dome

# 2 搭建dome #

## 2.0 项目结构 ##

![项目结构][20190423164509373.png]

## 2.1 创建一个springboot项目 ##

*  例如：我创建了一个名为websocket的项目；包名为com.wllfengshu

## 2.2 添加maven依赖 ##

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.1.4.RELEASE</version>
            <relativePath/> 
        </parent>
        <groupId>com.wllfengshu</groupId>
        <artifactId>websocket</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <name>websocket</name>
        <description>Demo project for Spring Boot</description>
    
        <properties>
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter</artifactId>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-websocket</artifactId>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    
    </project>

## 2.3 开启WebSocket支持 ##

package com.wllfengshu.websocket.configs;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    
    /** * 开启WebSocket支持 * @author */
    @Configuration
    public class WebSocketConfig { 
    
        @Bean
        public ServerEndpointExporter serverEndpointExporter() { 
            return new ServerEndpointExporter();
        }
    
    }

## 2.4 消息推送 ##

*  有两种办法，一是：直接把ServerEndpoint当作一个控制器，加上一个@RestController注解即可；二是：把ServerEndpoint当作一个组件，加上一个@Component注解，然后在业务层调用。具体的可以看参考文献，他们都写的很好。（至于使用拦截器的方式太麻烦，暂不研究）
 *  本文列举第一种，后期的“聊天”功能也基于第一种方法

package com.wllfengshu.websocket.rest;
    
    import java.util.concurrent.CopyOnWriteArraySet;
    
    import javax.websocket.OnClose;
    import javax.websocket.OnError;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.web.bind.annotation.RestController;
    
    //这里的/webSocket/{id}/{name}只是拦截的url，不一定要是这个，你写/aaa也是行的
    @ServerEndpoint("/webSocket/{id}/{name}")
    @RestController
    public class TestWebSocket { 
    
        /** * 用来记录当前连接数的变量 */
        private static volatile int onlineCount = 0;
    
        /** * concurrent包的线程安全Set，用来存放每个客户端对应的WebSocket对象 */
        private static CopyOnWriteArraySet<TestWebSocket> webSocketSet = new CopyOnWriteArraySet<>();
    
        /** * 与某个客户端的连接会话，需要通过它来与客户端进行数据收发 */
        private Session session;
    
        private static final Logger logger = LoggerFactory.getLogger(TestWebSocket.class);
    
        @OnOpen
        public void onOpen(Session session, @PathParam("id") long id, @PathParam("name") String name) throws Exception { 
            this.session = session;
            System.out.println(this.session.getId());
            webSocketSet.add(this);
            logger.info("Open a websocket. id={}, name={}", id, name);
        }
    
        @OnClose
        public void onClose() { 
            webSocketSet.remove(this);
            logger.info("Close a websocket. ");
        }
    
        @OnMessage
        public void onMessage(String message, Session session) { 
            logger.info("Receive a message from client: " + message);
            try { 
                //接受到客户端信息后，立即回复“我是服务器，收到数据了”
                sendMessage("我是服务器，收到数据了");
            }catch (Exception e){ 
                logger.error("Error sendMessage. ", e);
            }
        }
    
        @OnError
        public void onError(Session session, Throwable error) { 
            logger.error("Error while websocket. ", error);
        }
    
        // 发送消息
        public void sendMessage(String message) throws Exception { 
            if (this.session.isOpen()) { 
                this.session.getBasicRemote().sendText(message);
            }
        }
    
        public static synchronized int getOnlineCount() { 
            return onlineCount;
        }
    
        public static synchronized void addOnlineCount() { 
            TestWebSocket.onlineCount++;
        }
    
        public static synchronized void subOnlineCount() { 
            TestWebSocket.onlineCount--;
        }
    }

## 2.5 前端发起socket连接请求 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
        <title>Java后端WebSocket实现</title>
    </head>
    <body>
    信息框:<input id="text" type="text"/>
    <button onclick="send()">发送</button>
    <hr/>
    <button onclick="closeWebSocket()">关闭WebSocket连接</button>
    <hr/>
    收到的信息如下:</br>
    <div id="message">
    
    </div>
    </body>
    <script type="text/javascript"> if(typeof(WebSocket) == "undefined") { alert("您的浏览器不支持WebSocket"); } var webSocket = new WebSocket("ws://127.0.0.1:8080/webSocket/1/liang"); //连接发生错误的回调方法 webSocket.onerror = function () { setMessageInnerHTML("WebSocket连接发生错误"); }; //连接成功建立的回调方法 webSocket.onopen = function () { setMessageInnerHTML("WebSocket连接成功"); } //接收到消息的回调方法 webSocket.onmessage = function (event) { setMessageInnerHTML(event.data); } //连接关闭的回调方法 webSocket.onclose = function () { setMessageInnerHTML("WebSocket连接关闭"); } //监听窗口关闭事件，当窗口关闭时，主动去关闭webSocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 window.onbeforeunload = function () { closeWebSocket(); } //关闭WebSocket连接 function closeWebSocket() { webSocket.close(); } //发送消息 function send() { var message = $('#text').val(); webSocket.send(message); $("#text").val(""); } //将消息显示在网页上 var val = ""; function setMessageInnerHTML(innerHTML) { var temp = '<br/>' + innerHTML + '<br/>'; val = val + temp; $("#message").html(val); } </script>
    </html>

## 2.6 原理图 ##

Created with Raphaël 2.2.0开始页面发起socket连接TestWebSocket控制器拦截请求执行@OnOpen修饰的方法当浏览器发送信息时，会执行@OnMessage方法当浏览器发送断开连接，会执行@OnClose方法如果连接中断，会执行@OnError方法结束

参考：  
\[1\] [https://www.cnblogs.com/strugglion/p/10021173.html][https_www.cnblogs.com_strugglion_p_10021173.html]  
\[2\] [https://blog.csdn.net/moshowgame/article/details/80275084][https_blog.csdn.net_moshowgame_article_details_80275084]

[20190423164509373.png]: /images/20220219/c57f47ff7bc94c67a0be88c3bd4129ec.png
[https_www.cnblogs.com_strugglion_p_10021173.html]: https://www.cnblogs.com/strugglion/p/10021173.html
[https_blog.csdn.net_moshowgame_article_details_80275084]: https://blog.csdn.net/moshowgame/article/details/80275084