WebSocket 后端持续推送数据到前端

最新推荐文章于 2023-07-01 21:13:45 发布

点击抽奖

最新推荐文章于 2023-07-01 21:13:45 发布

阅读量1.1k

点赞数

分类专栏： java 文章标签： websocket java

本文链接：https://blog.csdn.net/a249040113/article/details/117570780

版权

本文介绍了WebSocket后端如何持续向前端推送数据。前端在建立连接后保持不关闭，等待后端推送消息。后端基于SpringBoot，通过引入WebSocket starter，配置拦截器处理前端参数，并在连接建立后启动数据查询或定时任务来向前端发送数据。需要注意连接断开后的异常处理。

摘要由CSDN通过智能技术生成

WebSocket 后端持续推送数据到前端

前端代码

前端建立连接后.不主动关闭,或者浏览器关闭请求话.会话会一直持续.等待后端推入消息.接收消息后.处理前端逻辑

注意:建立连接后就不要在重复建立了.因为重复创建后.后端连接的会话id就会变动.相当于后端收到两个客户端会话

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<H1>WebSocket后端持续推送测试</H1>

<br/> 

<div id="app">

<input type="button" value="开启查询" @click="openWs"></input>
<input type="button" value="关闭查询" @click="closeWs"></input>

<br/> 
<br/> 

返回结果:

<template v-for="(item,index) in list" >
	<p>{
  {item}}</p>
</template>


</div>

</body>

<script type="text/javascript">
var app = new Vue({
     
  el: '#app',
  data: {
     
    message: 'Hello Vue!',
	ws:null,
	list:[]
  },
  methods:{
     
	 openWs: function(){
       
		 if(null