websocket前后端数据实时更新(前端+后端)

  • websocket前后端数据实时更新(前端+后端)已关闭评论
  • 151 次浏览
  • A+
所属分类:Web前端
摘要

        做的项目中需要将后端提供的数据展示在前端页面,一开始我是用JS的setInterval()方法,设置一个时间,每过时间发起一次ajax请求。虽然也能凑活着实现,但总感觉数据不是实时刷新的,而且还占用资源,所以学习WebSocke,并总结了一下,以下是本人总结的前后端WebSocke相关代码:

        做的项目中需要将后端提供的数据展示在前端页面,一开始我是用JS的setInterval()方法,设置一个时间,每过时间发起一次ajax请求。虽然也能凑活着实现,但总感觉数据不是实时刷新的,而且还占用资源,所以学习WebSocke,并总结了一下,以下是本人总结的前后端WebSocke相关代码:


一、后端:

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>