之前开发的一个管理系统项目中，首页是数据大屏展示，一开始我是用JS的setInterval()方法，设置一个时间，每过时间发起一次ajax请求。虽然也能凑活着用，但总感觉不是最优的方法，而且还比较占用资源，所以学习WebSocke，以下是本人的一些学习心得及前后端的相关代码：
一、简介（什么是WebSocket）
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工（full-duplex）通信，即允许服务器主动发送信息给客户端。因此，在WebSocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。
二、数据实时推送的实现方式和应用场景
1.轮询：
客户端通过代码定时向服务器发送AJAX请求,服务器接收请求并返回响应信息。
优点：代码相对简单,适用于小型应用。
缺点：在服务器数据没有更新时,会造成请求重复数据,请求无用,浪费带宽和服务器资源。
2.长连接：
在页面中嵌入一个隐藏的iframe,将这个隐藏的iframe的属性设置为一个长连接的请求或者xrh请求,服务器通过这种方式往客户端输入数据。
优点：数据实时刷新,请求不会浪费,管理较简洁。
缺点：长时间维护保持一个长连接会增加服务器开销。
3.webSocket：
websocket是HTML5开始提供的一种客户端与服务器之间进行通讯的网络技术,通过这种方式可以实现客户端和服务器的长连接,双向实时通讯。
优点：减少资源消耗;实时推送不用等待客户端的请求;减少通信量;
缺点：少部分浏览器不支持，不同浏览器支持的程度和方式都不同。
应用场景：聊天室、智慧大屏、消息提醒、股票k线图监控等。
三、代码实现
-
后端：
pom.xml添加WebSocke依赖
org.springframework.boot spring-boot-starter-websocket 2.WebSocke配置类
@Configurationpublic class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); }}WebSocke服务类
@ServerEndpoint(value = "/webSocket")//主要是将目前的类定义成一个websocket服务器端, 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端@Component@EnableScheduling// cron定时任务@Datapublic class WebSocket { private static final Logger logger = LoggerFactory.getLogger(WebSocket.class); private static int onlineCount = 0; private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet<>(); private Session session; public static CopyOnWriteArraySet getWebSocketSet() { return webSocketSet; } public static void setWebSocketSet(CopyOnWriteArraySet webSocketSet) { WebSocket.webSocketSet = webSocketSet; } @Resource private IndexService indexService; private static IndexService indexServiceMapper; @PostConstruct public void init() { WebSocket.indexServiceMapper = this.indexService; } @OnOpen public void onOpen(Session session) throws Exception { this.session = session; webSocketSet.add(this); //查询当前在线人数 int nowOnline = indexServiceMapper.nowOnline(); this.sendMessage(JSON.toJSONString(nowOnline)); } @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(); } } } @OnError public void onError(Session session, Throwable error) { logger.error("连接异常！"); error.printStackTrace(); } public void sendMessage(String message) throws IOException { this.session.getBasicRemote().sendText(message); } public static void sendInfo(String message) throws IOException { logger.info("信息:{}", message); for (WebSocket item : webSocketSet) { item.sendMessage(message); } }} 定时任务（为了给前端实时推送数据，我这里写了个定时任务，定时任务我用的是cron表达式,不懂的同学可以上这个网址学习：cron表达式）
@Slf4j@Componentpublic class IndexScheduled { @Autowired private IndexMapper indexMapper; //@Scheduled(cron = "0/3 * * * * ? ") //我这里暂时不需要运行这条定时任务，所以将注解注释了，朋友们运行时记得放开注释啊 public void nowOnline() { System.err.println("********* 首页定时任务执行 **************"); CopyOnWriteArraySet 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 首页定时任务完成......."); }} -
前端：
前端的代码非常的简单，直接上代码。
测试在线人数： 人如果该文章对您有用，麻烦点赞 收藏 加关注哦！！！ 万分感谢。
来源地址：https://blog.csdn.net/weixin_42555014/article/details/124140649
