springboot基于WebSocket实现服务端消息推送

￡神魔★判官ぃ 2022-04-12 05:29 355阅读 0赞

# 一 WebSocket简介 #

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 **send()** 方法来向服务器发送数据，并通过 **onmessage** 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocol] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

## WebSocket 属性 ##

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>Socket.readyState</td> 
   <td> <p>只读属性&nbsp;<strong>readyState</strong>&nbsp;表示连接状态，可以是以下值：</p> 
    <ul> 
     <li> <p>0 - 表示连接尚未建立。</p> </li> 
     <li> <p>1 - 表示连接已建立，可以进行通信。</p> </li> 
     <li> <p>2 - 表示连接正在进行关闭。</p> </li> 
     <li> <p>3 - 表示连接已经关闭或者连接不能打开。</p> </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>Socket.bufferedAmount</td> 
   <td> <p>只读属性&nbsp;<strong>bufferedAmount</strong>&nbsp;已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。</p> </td> 
  </tr> 
 </tbody> 
</table>

--------------------

## WebSocket 事件 ##

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

<table> 
 <tbody> 
  <tr> 
   <th>事件</th> 
   <th>事件处理程序</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>open</td> 
   <td>Socket.onopen</td> 
   <td>连接建立时触发</td> 
  </tr> 
  <tr> 
   <td>message</td> 
   <td>Socket.onmessage</td> 
   <td>客户端接收服务端数据时触发</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>Socket.onerror</td> 
   <td>通信发生错误时触发</td> 
  </tr> 
  <tr> 
   <td>close</td> 
   <td>Socket.onclose</td> 
   <td>连接关闭时触发</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## WebSocket 方法 ##

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>Socket.send()</td> 
   <td> <p>使用连接发送数据</p> </td> 
  </tr> 
  <tr> 
   <td>Socket.close()</td> 
   <td> <p>关闭连接</p> </td> 
  </tr> 
 </tbody> 
</table>

# 二 springboot整合WebSocket案例 #

案例简介：在后台将消息推送给在线用户，也可以查询出所有用户将消息推送给所有用户，不过在用户量巨大的时候这会个耗时的过程，本案例仅仅推送给在线用户

1   导入依赖的jar包:

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

2 创建serverEndPointExporter到springboot容器中去，会自动注册使用了@serverEndPoint注解的WebSocket为自己的子类，

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

3.创建控制层

package com.yc.Controller;
    
    import org.springframework.stereotype.Component;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    
    import javax.websocket.*;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.util.concurrent.CopyOnWriteArraySet;
    
    /**
     * @author an-ping
     * @date 2018/12/1
     */
    @ServerEndpoint(value = "/websocket")
    @Component
    @Controller
    public class PublishController {
        //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
        private static int onlineCount = 0;
    
        //concurrent包的线程安全Set，用来存放每个客户端对应的PublishController对象。
        private static CopyOnWriteArraySet<PublishController> webSocketSet = new CopyOnWriteArraySet<PublishController>();
    
        //与某个客户端的连接会话，需要通过它来给客户端发送数据
        private Session session;
    
        /**
         * 连接建立成功调用的方法*/
        @OnOpen
        public void onOpen(Session session) {
            this.session = session;
            webSocketSet.add(this);     //加入set中
            addOnlineCount();           //在线数加1
            System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
            try {
                sendMessage("当前在线人数为" + getOnlineCount());
            } catch (IOException e) {
                System.out.println("IO异常");
            }
        }
    
        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose() {
            webSocketSet.remove(this);  //从set中删除
            subOnlineCount();           //在线数减1
            System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
        }
    
        /**
         * 收到客户端消息后调用的方法
         *
         * @param message 客户端发送过来的消息*/
        @OnMessage
        public void onMessage(String message, Session session) {
            System.out.println("来自客户端的消息:" + message);
    
            //群发消息
            for (PublishController item : webSocketSet) {
                try {
                    item.sendMessage(message);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    
        @OnError
        public void onError(Session session, Throwable error) {
            System.out.println("发生错误");
            error.printStackTrace();
        }
    
    
        public void sendMessage(String message) throws IOException {
            this.session.getBasicRemote().sendText(message);
        }
    
    
        /**
         * 群发自定义消息
         * */
        @RequestMapping(value="sendAll.action",method= RequestMethod.POST)
        public static void sendInfo(String message) throws IOException {
            for (PublishController item : webSocketSet) {
                try {
                    item.sendMessage(message);
                } catch (IOException e) {
                    continue;
                }
            }
        }
    
        public static synchronized int getOnlineCount() {
            return onlineCount;
        }
    
        public static synchronized void addOnlineCount() {
            PublishController.onlineCount++;
        }
    
        public static synchronized void subOnlineCount() {
            PublishController.onlineCount--;
        }
    
    
    }

4 前端index.html代码:

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>消息推送</title>
    </head>
    <script type="text/javascript" th:src="@{/jquery.min.js}"></script>
    
    <body align="center">
    
    
    Welcome<br/>
    <input id="text" type="text" /><button onclick="send()">Send</button>    <button onclick="closeWebSocket()">Close</button>
    <div id="message">
    </div>
    后台服务器消息推送编辑框:<input type="text" id="text1" name="message"/><button onclick="Allsend()">发送</button>
    </body>
    
    <script type="text/javascript">
        var websocket = null;
    
        //判断当前浏览器是否支持WebSocket
        if('WebSocket' in window){
            websocket = new WebSocket("ws://127.0.0.1:8090/websocket");
        }
        else{
            alert('Not support websocket')
        }
    
        //连接发生错误的回调方法
        websocket.onerror = function(){
            setMessageInnerHTML("error");
        };
    
        //连接成功建立的回调方法
        websocket.onopen = function(event){
            setMessageInnerHTML("open");
        }
    
        //接收到消息的回调方法
        websocket.onmessage = function(event){
            setMessageInnerHTML(event.data);
        }
    
        //连接关闭的回调方法
        websocket.onclose = function(){
            setMessageInnerHTML("close");
        }
    
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function(){
            websocket.close();
        }
    
        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML){
            document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }
    
        //关闭连接
        function closeWebSocket(){
            websocket.close();
        }
    
        //发送消息
        function send(){
            var message = document.getElementById('text').value;
            alert(message)
            websocket.send(message);
        }
    </script>
    <script type="text/javascript">
    
    
        function Allsend(){
            var message = document.getElementById('text1').value;
    
            $.ajax({
                url:"/sendAll.action",
                data:{"message":message},
                type:"POST",
                datatype:"JSON",
                success:function(){
                    alert("消息发送成功");
                }
    
            })
        }
    
       
    
    </script>
    
    </body>
    </html>

# 三  效果展示 #

![2018120118291942.png][]

![20181201183014285.png][]

所以通过WebSocket可以实现服务端给客户端的消息推送

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjkzODI4_size_16_color_FFFFFF_t_70][]

[2018120118291942.png]: /images/20220412/dbb20eefbb5e40edba147a7c75b2f704.png
[20181201183014285.png]: /images/20220412/929ba041344e40d5b6a362147dd08811.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjkzODI4_size_16_color_FFFFFF_t_70]: /images/20220412/c04710cfc2ab4356a574acb09e3d758d.png