SpringBoot2.0集成WebSocket，实现后台向前端推送信息

感谢作者,支持原创: https://blog.****.net/moshowgame/article/details/80275084

什么是WebSocket?

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

为什么需要 WebSocket？

初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？

• 答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。

举例来说，我们想要查询当前的排队情况，只能是页面轮询向服务器发出请求，服务器返回查询结果。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此WebSocket 就是这样发明的。

Maven依赖

         <!--springboot的高级组件会自动引用基础的组件-->
         <!--，像spring-boot-starter-websocket就引入了spring-boot-starter-web和spring-boot-starter，-->
         <!--所以不要重复引入。-->
         <!--JavaEE标准-->
         <dependency>
             <groupId>javax</groupId>
             <artifactId>javaee-api</artifactId>
             <scope>provided</scope>
         </dependency>
         <!--websocket-->
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-websocket</artifactId>
         </dependency>

WebSocket配置类

 package com.zr.demo.config;

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

 /**
  * @Author: Hujh
  * @Date: 2019/7/16 11:10
  * @Description: WebSocket配置类
  */
 @Configuration
 public class WebSocketConfig {

     /*使用@ServerEndpoint创立websocket endpoint*/
     @Bean
     public ServerEndpointExporter serverEndpointExporter() {
         return new ServerEndpointExporter();
     }
 }

WebSocketServer

因为WebSocket是类似客户端服务端的形式(采用ws协议)，那么这里的WebSocketServer其实就相当于一个ws协议的Controller直接@ServerEndpoint("/websocket")@Component启用即可，然后在里面实现@OnOpen,@onClose,@onMessage等方法

 package com.zr.demo.socket;

 import org.springframework.stereotype.Component;

 import javax.websocket.OnClose;
 import javax.websocket.OnMessage;
 import javax.websocket.OnOpen;
 import javax.websocket.Session;
 import javax.websocket.server.ServerEndpoint;
 import java.io.IOException;
 import java.util.concurrent.CopyOnWriteArraySet;

 /**
  * @Author: Hujh
  * @Date: 2019/7/16 11:13
  * @Description: webSocket实现类
  */
 @ServerEndpoint(value = "/webSocket")
 @Component
 public class WebSocket {
     //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
     private static int onlineCount = 0;

     //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
     private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<WebSocket>();

     //与某个客户端的连接会话，需要通过它来给客户端发送数据
     private Session session;

     /**
      * 连接建立成功调用的方法
      */
     @OnOpen
     public void onOpen(Session session) {
         this.session = session;   //加入set中
         webSocketSet.add(this);
         addOnlineCount();  //在线数加1
         System.out.println("有新连接加入！当前在线人数为：" + getOnlineCount());
         try {
             sendMessage("连接成功");
         } 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 (WebSocket item : webSocketSet) {
             try {
                 item.sendMessage(message);
             } catch (IOException e) {
                 e.printStackTrace();
             }
         }
     }

     /**
      * 发生错误时调用
      @OnError
      */
      public void onError(Session session, Throwable error) {
      System.out.println("发生错误");
      error.printStackTrace();
      }

     /*
      * @Title: sendMessage
      * @Author : Hujh
      * @Date: 2019/7/17 10:52
      * @Description : 发送消息
      * @param : message
      * @Return : void
      */
      public void sendMessage(String message) throws IOException {
         this.session.getBasicRemote().sendText(message);
      //this.session.getAsyncRemote().sendText(message);
      }

      /*
       * @Title: sendInfo
       * @Author : Hujh
       * @Date: 2019/7/17 10:52
       * @Description : 群发自定义消息
       * @param : message
       * @Return : void
       */
     public static void sendInfo(String message) throws IOException {
         for (WebSocket item : webSocketSet) {
             try {
                 item.sendMessage(message);
             } catch (IOException e) {
                 continue;
             }
         }
     }

     /*
      * @Title: getOnlineCount
      * @Author : Hujh
      * @Date: 2019/7/17 10:51
      * @Description : 获得当前在线人数
      * @param :
      * @Return : int
      */
     public static synchronized int getOnlineCount() {
         return onlineCount;
     }

     /*
      * @Title: addOnlineCount
      * @Author : Hujh
      * @Date: 2019/7/17 10:51
      * @Description : 在线人数+1
      * @param :
      * @Return : void
      */
     public static synchronized void addOnlineCount() {
         WebSocket.onlineCount++;
     }

     /*
      * @Title: subOnlineCount
      * @Author : Hujh
      * @Date: 2019/7/17 10:52
      * @Description :在线人数-1
      * @param :
      * @Return : void
      */
     public static synchronized void subOnlineCount() {
         WebSocket.onlineCount--;
     }

 }

消息推送

至于推送新信息，可以再自己的Controller写个方法调用WebSocket.sendInfo();

 package com.zr.demo.controller;

 import com.zr.demo.socket.WebSocket;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;

 /**
  * @Author: Hujh
  * @Date: 2019/7/19 15:40
  * @Description: 消息发送控制器
  */
 @RestController
 public class SendMessageController {

     @Autowired
     private WebSocket webSocket;

     @RequestMapping("sendInfo")
     public String sendInfo(@RequestParam String msg) {
         try {
             webSocket.sendInfo(msg);
         } catch (Exception e) {
             e.printStackTrace();
             return "信息发送异常!";
         }

         return "发送成功~";
     }

 }

页面代码

 <!DOCTYPE HTML>
 <html>
 <head>
     <title>WebSocket</title>
 </head>

 <body>
 <div style="width: 800px;height: 100%; margin: 0px auto;">
     <span style="color: coral; font-size: 22px;"> Welcome WebSocket</span><br/><br/>
     <div id="message">
     </div>
 </div>
 </body>

 <script type="text/javascript">
     var websocket = null;
     //判断当前浏览器是否支持WebSocket
     if('WebSocket' in window){
         websocket = new WebSocket("ws://localhost:8082/webSocket");
     }else{
         alert('连接失败!!')
     }

     //连接发生错误的回调方法
     websocket.onerror = function(){
         setMessageInnerHTML("error");
     };

     //连接成功建立的回调方法
     websocket.onopen = function(event){
         setMessageInnerHTML("webSocket 连接成功~");
     }

     //接收到消息的回调方法
     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();
     }

    </script>
 </html>

测试效果

1.建立两个连接

2.消息推送

 注：本文仅作为个人学习记录,不提供任何参考价值!