springboot1.5.9整合websocket实现实时显示的小demo

最近由于项目需要实时显示数据库更新的数据变化情况，一开始想过在前端使用ajax异步轮询方法实现，但后面考虑到性能和流量等要求，就放弃该方法而选择使用websocket（毕竟现在springboot整合websocket的技术算是比较成熟了，哈哈），现在此小小记录下。

首先，在springboot项目创建并配置成功的基础上对websocket进行整合。

1、在pom文件中添加对websocket的依赖

 　　　　　<!-- 引入 websocket 依赖类-->
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-websocket</artifactId>
         </dependency>

2、个人习惯是先从后端写到前端，先写websocket的配置类吧

 import org.springframework.stereotype.Component;

 import javax.websocket.*;
 import javax.websocket.server.ServerEndpoint;
 import java.io.IOException;
 import java.util.concurrent.CopyOnWriteArraySet;

 /**
 * @Name：WebSocket
 * @Description：WebSocket配置
 * @Version：V1.0.0
 * @Author：mYunYu
 * @Create Date：2018/11/15 14:45
 */
 @Component
 @ServerEndpoint(value = "/ws/webSocket" , encoders = {EncoderClassVo.class})
 public class WebSocket {
     //每个客户端都会有相应的session,服务端可以发送相关消息
     private Session session;

     //J.U.C包下线程安全的类，主要用来存放每个客户端对应的webSocket连接
     private static CopyOnWriteArraySet<WebSocket> copyOnWriteArraySet = new CopyOnWriteArraySet<WebSocket>();

    /**
    * @Name：onOpen
    * @Description：打开连接。进入页面后会自动发请求到此进行连接
    * @Author：mYunYu
    * @Create Date：14:46 2018/11/15
    * @Parameters：
    * @Return：
    */
     @OnOpen
     public void onOpen(Session session) {
         this.session = session;
         copyOnWriteArraySet.add(this);
         System.out.println("websocket有新的连接, 总数:"+ copyOnWriteArraySet.size());

     }

    /**
    * @Name：onClose
    * @Description：用户关闭页面，即关闭连接
    * @Author：mYunYu
    * @Create Date：14:46 2018/11/15
    * @Parameters：
    * @Return：
    */
     @OnClose
     public void onClose() {
         copyOnWriteArraySet.remove(this);
         System.out.println("websocket连接断开, 总数:"+ copyOnWriteArraySet.size());
     }

     /**
     * @Name：onMessage
     * @Description：测试客户端发送消息，测试是否联通
     * @Author：mYunYu
     * @Create Date：14:46 2018/11/15
     * @Parameters：
     * @Return：
     */
     @OnMessage
     public void onMessage(String message) {
         System.out.println("websocket收到客户端发来的消息:"+message);
     }

     /**
     * @Name：onError
     * @Description：出现错误
     * @Author：mYunYu
     * @Create Date：14:46 2018/11/15
     * @Parameters：
     * @Return：
     */
     @OnError
     public void onError(Session session, Throwable error) {
         System.out.println("发生错误：" + error.getMessage() + "; sessionId:" + session.getId());
         error.printStackTrace();
     }

     public void sendMessage(Object object){
         //遍历客户端
         for (WebSocket webSocket : copyOnWriteArraySet) {
             System.out.println("websocket广播消息：" + object.toString());
             try {
                 //服务器主动推送
                 webSocket.session.getBasicRemote().sendObject(object) ;
             } catch (Exception e) {
                 e.printStackTrace();
             }
         }
     }

     /**
     * @Name：sendMessage
     * @Description：用于发送给客户端消息（群发）
     * @Author：mYunYu
     * @Create Date：14:46 2018/11/15
     * @Parameters：
     * @Return：
     */
     public void sendMessage(String message) {
         //遍历客户端
         for (WebSocket webSocket : copyOnWriteArraySet) {
             System.out.println("websocket广播消息：" + message);
             try {
                 //服务器主动推送
                 webSocket.session.getBasicRemote().sendText(message);
             } catch (Exception e) {
                 e.printStackTrace();
             }
         }
     }

     /**
     * @Name：sendMessage
     * @Description：用于发送给指定客户端消息
     * @Author：mYunYu
     * @Create Date：14:47 2018/11/15
     * @Parameters：
     * @Return：
     */
     public void sendMessage(String sessionId, String message) throws IOException {
         Session session = null;
         WebSocket tempWebSocket = null;
         for (WebSocket webSocket : copyOnWriteArraySet) {
             if (webSocket.session.getId().equals(sessionId)) {
                 tempWebSocket = webSocket;
                 session = webSocket.session;
                 break;
             }
         }
         if (session != null) {
             tempWebSocket.session.getBasicRemote().sendText(message);
         } else {
             System.out.println("没有找到你指定ID的会话：{}"+ "; sessionId:" + sessionId);
         }
     }

     /**
      * 如果使用springboot内置tomcat，需要配置，否则不需要
      *
      * @return
      */
 //    @Bean
 //    public ServerEndpointExporter serverEndpointExporter() {
 //        return new ServerEndpointExporter();
 //    }

 }

上面类中的红色注释的代码是只有当springboot项目使用内置tomcat时需要配置(即打成jar包)，如果使用外置tomcat则不需要配置(即打成war包)

3、配置编码器，主要是需要后端向前端发送对象数据，如果只是发送普通的字符串数据的话，就不需要

 import com.alibaba.fastjson.JSON;
 import com.xxx.utils.MsgUtil;

 import javax.websocket.EncodeException;
 import javax.websocket.Encoder;
 import javax.websocket.EndpointConfig;

 /**
 * @Name：EncoderClassVo
 * @Description：编码器，防止发送对象出错
 * @Version：V1.0.0
 * @Author：mYunYu
 * @Create Date：2018/11/15 14:43
 */
 public class EncoderClassVo implements Encoder.Text<MsgUtil> {

     @Override
     public void init(EndpointConfig endpointConfig) {

     }

     @Override
     public void destroy() {

     }

     @Override
     public String encode(MsgUtil msgUtil) throws EncodeException {
         try{
             return JSON.toJSONString(msgUtil) ;
         }catch (Exception e){
             e.printStackTrace() ;
             return null;
         }
     }
 }

4、接下来就是写controller层了，我这边demo只是简单的发送一些随机的数据，具体信息还需要根据各个项目需要来写

 import com.xxx.pojo.User;
 import com.xxx.utils.MsgUtil;
 import com.xxx.webSocket.WebSocket;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;

 import javax.annotation.Resource;
 import java.io.IOException;

 /**
 * @Name：SocketController
 * @Description：消息发送Controller
 * @Version：V1.0.0
 * @Author：mYunYu
 * @Create Date：2018/11/15 16:44
 */
 @RestController
 public class SocketController {

     @Resource
     WebSocket webSocket;

     /**
     * @Name：helloManyWebSocket
     * @Description：群发消息
     * @Author：mYunYu
     * @Create Date：16:44 2018/11/15
     * @Parameters：
     * @Return：
     */
     @RequestMapping("many")
     public String helloManyWebSocket(){

         int i = 1 ;
         while(i > 0){
             i=1+(int)(Math.random()*600) ;
             User user = new User() ;
             user.setUserid(i+1) ;
             user.setUsername(String.valueOf(i) + String.valueOf(i+i)) ;

             //将对象转为json对象，并发送到前端
             MsgUtil msgUtil = MsgUtil.success().addMsg("map", user);
             webSocket.sendMessage(msgUtil);

             try{
                 Thread.sleep(1000) ;
             }catch (Exception e){
                 e.printStackTrace() ;
             }
         }

         return "发送成功";
     }

     /**
     * @Name：helloOneWebSocket
     * @Description：根据session单个发送消息
     * @Author：mYunYu
     * @Create Date：16:44 2018/11/15
     * @Parameters：
     * @Return：
     */
     @RequestMapping("one")
     public String helloOneWebSocket(String sessionId) throws IOException {
         //向某个人发送消息
         webSocket.sendMessage(sessionId,"你好~！，单个用户");

         return "发送成功";
     }

 }

5、接下来该在前端写配置了，我这里使用的是thymeleaf模板

 <!DOCTYPE html >
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8"/>
     <title>Title</title>
 </head>
 <body>

 自动连接websocket
 <script type="text/javascript">

     var socket;
     if (typeof (WebSocket) == "undefined") {
         console.log("遗憾：您的浏览器不支持WebSocket");
     } else {
         console.log("恭喜：您的浏览器支持WebSocket");

         //实现化WebSocket对象
         //指定要连接的服务器地址与端口建立连接
         //注意ws、wss使用不同的端口。我使用自签名的证书测试，
         //无法使用wss，浏览器打开WebSocket时报错
         //ws对应http、wss对应https。
         socket = new WebSocket("ws://127.0.0.1:端口号/项目名/ws/webSocket");
         //连接打开事件
         socket.onopen = function() {
             console.log("Socket 已打开");
             socket.send("消息发送测试(From Client)");
         };
         //收到消息事件
         socket.onmessage = function(msg) {
             console.log(msg.data) ;
         };
         //连接关闭事件
         socket.onclose = function() {
             console.log("Socket已关闭");
         };
         //发生了错误事件
         socket.onerror = function() {
             alert("Socket发生了错误");
         }

         //窗口关闭时，关闭连接
         window.unload=function() {
             socket.close();
         };

     }

 </script>

 </body>
 </html>

6、最后就是测试了，先右击项目，选择Run Mavan-->clear install进行项目打包

打包成功之后再启动外置tomcat来启动项目

启动项目成功，在浏览器中访问

按f12，如果出现”Socket已打开“字样，则表示客户端连接ok，现在需要使用服务端向客户端发送消息

再打开另一个浏览器，输入http://localhost:端口号/项目名/many进行访问，就可以观察到idea和浏览器中已经打印了发送的消息字样了

上图是客户端访问的浏览器所显示的消息，下图是服务器端所打印的消息

好了，实现的很成功，接下来就是对发送的数据进行替换就差不多了，哈哈~