位置: IT常识 - 正文

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

编辑：rootadmin

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

推荐整理分享websocket前后端数据实时更新(前端+后端)(websocket前端vue)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:websocket向前端发送数据,websocket向前端发送数据,websocket接口后端怎么调用,websocket 前后端,websocket前端和后端,websocket前后端分离项目,websocket前后端分离项目,websocket 前后端,内容如对您有帮助，希望把文章链接给更多的朋友！

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

一、后端：

1.pom.xml添加WebSocke依赖

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency> websocket前后端数据实时更新(前端+后端)(websocket前端vue)

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

2.WebSocke配置类

@Configurationpublic class WebSocketConfig {/*** 这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket ,如果你使用外置的tomcat就不需要该配置文件*/@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}}

3.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;/*** 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;}/*** 从数据库查询相关数据信息,可以根据实际业务场景进行修改*/@Resourceprivate IndexService indexService;private static IndexService indexServiceMapper;@PostConstructpublic void init() {WebSocket.indexServiceMapper = this.indexService;}/*** 连接建立成功调用的方法** @param session 会话*/@OnOpenpublic void onOpen(Session session) throws Exception {this.session = session;webSocketSet.add(this);//查询当前在线人数int nowOnline = indexServiceMapper.nowOnline();this.sendMessage(JSON.toJSONString(nowOnline));}/*** 收到客户端消息后调用的方法** @param message 客户端发送过来的消息*/@OnMessagepublic 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();}}}/*** 连接关闭调用的方法*/@OnClosepublic void onClose() {webSocketSet.remove(this);if (session != null) {try {session.close();} catch (IOException e) {e.printStackTrace();}}}/*** 发生错误时调用** @param session 会话* @param error 错误信息*/@OnErrorpublic 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@Componentpublic class IndexScheduled {@Autowiredprivate 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;//判断当前浏览器是否支持WebSocketif ('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>