websocket前后端数据实时更新(前端+后端)
做的项目中需要将后端提供的数据展示在前端页面，一开始我是用JS的setInterval()方法，设置一个时间，每过时间发起一次ajax请求。虽然也能凑活着实现，但总感觉数据
做的项目中需要将后端提供的数据展示在前端页面，一开始我是用JS的setInterval()方法，设置一个时间，每过时间发起一次ajax请求。虽然也能凑活着实现，但总感觉数据不是实时刷新的，而且还占用资源，所以学习WebSocke，并总结了一下，以下是本人总结的前后端WebSocke相关代码： 一、后 ...
做的项目中需要将后端提供的数据展示在前端页面，一开始我是用JS的setInterval()方法，设置一个时间，每过时间发起一次ajax请求。虽然也能凑活着实现，但总感觉数据不是实时刷新的，而且还占用资源，所以学习WebSocke，并总结了一下，以下是本人总结的前后端WebSocke相关代码：
一、后端：
1.pom.xml添加WebSocke依赖
org.springframework.bootspring-boot-starter-websocket2.WebSocke配置类
@ConfigurationpublicclassWebSocketConfig{/*** 这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket ,如果你使用外置的tomcat就不需要该配置文件*/@BeanpublicServerEndpointExporterserverEndpointExporter(){returnnewServerEndpointExporter();}}3.WebSocke服务类
@ServerEndpoint(value="/webSocket")//主要是将目前的类定义成一个websocket服务器端, 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端@Component@EnableScheduling// cron定时任务@DatapublicclassWebSocket{privatestaticfinalLoggerlogger=LoggerFactory.getLogger(WebSocket.class);/*** 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。*/privatestaticintonlineCount=0;/*** concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。*/privatestaticCopyOnWriteArraySet<WebSocket>webSocketSet=newCopyOnWriteArraySet<>();/*** 与某个客户端的连接会话，需要通过它来给客户端发送数据*/privateSessionsession;publicstaticCopyOnWriteArraySet<WebSocket>getWebSocketSet(){returnwebSocketSet;}publicstaticvoidsetWebSocketSet(CopyOnWriteArraySet<WebSocket>webSocketSet){WebSocket.webSocketSet=webSocketSet;}/*** 从数据库查询相关数据信息,可以根据实际业务场景进行修改*/@ResourceprivateIndexServiceindexService;privatestaticIndexServiceindexServiceMapper;@PostConstructpublicvoidinit(){WebSocket.indexServiceMapper=this.indexService;}/*** 连接建立成功调用的方法** @param session 会话*/@OnOpenpublicvoidonOpen(Sessionsession)throwsException{this.session=session;webSocketSet.add(this);//查询当前在线人数intnowOnline=indexServiceMapper.nowOnline();this.sendMessage(JSON.toJSONString(nowOnline));}/*** 收到客户端消息后调用的方法** @param message 客户端发送过来的消息*/@OnMessagepublicvoidonMessage(Stringmessage,Sessionsession)throwsIOException{logger.info("参数信息：{}",message);//群发消息for(WebSocketitem:webSocketSet){try{item.sendMessage(JSON.toJSONString(message));}catch(IOExceptione){e.printStackTrace();}}}/*** 连接关闭调用的方法*/@OnClosepublicvoidonClose(){webSocketSet.remove(this);if(session!=null){try{session.close();}catch(IOExceptione){e.printStackTrace();}}}/*** 发生错误时调用** @param session 会话* @param error 错误信息*/@OnErrorpublicvoidonError(Sessionsession,Throwableerror){logger.error("连接异常！");error.printStackTrace();}/*** 发送信息** @param message 消息*/publicvoidsendMessage(Stringmessage)throwsIOException{this.session.getBasicRemote().sendText(message);}/*** 自定义消息推送、可群发、单发** @param message 消息*/publicstaticvoidsendInfo(Stringmessage)throwsIOException{logger.info("信息:{}",message);for(WebSocketitem:webSocketSet){item.sendMessage(message);}}}
4.定时任务（为了给前端实时推送数据，我这里写了个定时任务，定时任务我用的是cron表达式,不懂的同学可以上这个网址学习：cron表达式）
@Slf4j@ComponentpublicclassIndexScheduled{@AutowiredprivateIndexMapperindexMapper;/*** 每3秒执行一次*///@Scheduled(cron = "0/3 * * * * ? ") //我这里暂时不需要运行这条定时任务，所以将注解注释了，朋友们运行时记得放开注释啊publicvoidnowOnline(){System.err.println("********* 首页定时任务执行 **************");CopyOnWriteArraySet<WebSocket>webSocketSet=WebSocket.getWebSocketSet();intnowOnline=indexMapper.nowOnline();webSocketSet.forEach(c->{try{c.sendMessage(JSON.toJSONString(nowOnline));}catch(IOExceptione){e.printStackTrace();}});System.err.println("/n 首页定时任务完成.......");}}二、前端：
前端的代码非常的简单，直接上代码。
