前后端双向异步

最新推荐文章于 2024-06-27 19:13:37 发布

键盘都敲坏了

最新推荐文章于 2024-06-27 19:13:37 发布

阅读量816

点赞数 1

分类专栏： JAVA 文章标签： java ajax 前端后端

本文链接：https://blog.csdn.net/m0_57479908/article/details/121653288

版权

JAVA 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

AJAX和SpringMVC双向异步完成信息实时更新

文章目录

前言
一、前后端双向异步是什么？
二、使用步骤
总结

前言

前后端双向异步的作用于实时更新数据，比如打车，外卖这种小程序，时刻提示订单

本章就介绍了前后端双向异步的写法

提示：以下是本篇文章正文内容，下面案例可供参考

一、前后端双向异步是什么？

其实就是AJAX和SpringMVC的异步操作，AJAX定时器去后端取Redis里的值，SpringMVC定时器去数据库查询数据并存Redis里

二、使用步骤

1.AJAX异步定时器操作

在主页面中写一个iframe标签，此标签指向另一个页面

代码如下（示例）：

<iframe id="iframe1" src="async.html"  width="0rem" height="0rem"></iframe>

此页面只做一件事：ajax访问后端，并弹出提示

页面只做了一个异步AJAX，访问后台并接收返回值，并用self.async()；自己调自己的方法继续执行，setTimeOut() 定时器5秒执行

代码如下（示例）：

<body></body>
	<script type="text/javascript">
	function async(){
		$.ajax({
			async:true,
			url:"../async/myorder",
			type : 'get',
			dataType:'text',
			success : function(data) {
				if(data=='unfinished'){
					layui.layer.confirm('你有未完成订单！');
					 setTimeout(function(){self.async();},5000);//等待5S继续执行
				}else if(data=='newOrder'){
					layui.layer.confirm('有新的可以接取订单！');
					setTimeout(function(){self.async();},5000);//等待5S继续执行
				}else{
					self.async();//没有 订单 刷新 然后等待
				}
			}
		});
	}
	async();
	</script>

对应的Controller层内的操作:

@RestController()
@RequestMapping("async")
public class AsyncController {
    @Autowired
    JedisUtil jedisUtil;

    /**
     * @auth: fei
     * @return：Callable<String>
     * @description:查看一下有没有自己的订单
     * 没有订单的情况下，查看是否有订单；
     * 有订单的情况下，是否订单被中途取消。
     */
    @RequestMapping(value = "myorder")
    @ResponseBody
    public Callable<String> callable(HttpSession session) {
        return new Callable<String>() {
            /*
             * 获取登录后的个人信息
             */
            Map<String,Object> eng= (Map<String, Object>) session.getAttribute("user");
            String unfinished = "";//有未完成订单
            String newOrder = "";//有新订单
            /*
             *从个人信息的map里取出状态信息，判断是否为繁忙
             */
            Integer estate=Integer.valueOf(eng.get("estate").toString());
            @Override
            public String call() throws Exception {
                for(int i=0;i<30;i++) {
                    unfinished =estate!=0? null :  "true" ;
                    newOrder =jedisUtil.get("orders")==null?"":jedisUtil.get("orders").toString();
                    if(unfinished==null) {//有未完成订单
                        return "unfinished";
                    }else if((!newOrder.equals(""))&&newOrder!=null) {//有新订单
                        return "newOrder";
                    }
                    Thread.sleep(1000);
                }
                return "";
            }
        };
    }
}

解释：

一次AJAX访问过来，内部循环30次获取订单信息，如果30次都没获取到新订单的信息，那就返回一个" "；

2.配置SpringMVC的定时器

配置web.xml里对异步的支持

代码如下（示例）：

    <servlet>
        <servlet-name>mvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
       <!--开启异步的支持-->
       <async-supported>true</async-supported>
    </servlet>
    <servlet-mapping>
        <servlet-name>mvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

该处使用的<async-supported>true</async-supported>标签开启异步支持

注：如果web.xml配置了Filter过滤器，那么<async-supported>true</async-supported>就要写在Filter标签内

配置SpringMVC.xml配置文件里面的内容

代码如下（示例）：

<!-- 开启这个配置，spring才能识别@Scheduled注解 -->
    <task:annotation-driven scheduler="task" mode="proxy"/>
    <!-- 配置任务队列 -->
    <task:scheduler id="task" pool-size="10"/>

写一个类用来执行SpringMVC定时器的任务

/**
* @author fei
* 定期把订单同步至Redis数据库。
*
*/
@Component
public class OrderTask {
@Autowired
Dao dao;
@Autowired
JedisUtil jedisUtil;

/**
* @throws Exception
* @auth: fei
* @return：void
* @description:同步订单 1 秒一次 （定时器）
* 业务只提示 是否有新订单，不用记录订单具体详情
* //@Scheduled(cron = "*/1 * * * * ?") 设置一秒执行一次
*/

    @Async
    @Scheduled(cron = "*/1 * * * * ?")
    public void asyncOrder() throws Exception{
        try {
            /**
             * 读取 数据库中的 status 为 0的订单
             */
            List<Map> list = (List<Map>) dao.queryForList("EngineerMapper.getOrders",null);

            jedisUtil.put("getOrders", list.size()==0?"":JSON.toJSONString(list));//有订单就存入进去 ，
            jedisUtil.put("orders", list.size()==0?"":list.size()+"");//没有订单就是“”，有订单就不是0
        }catch (Exception e) {
            System.out.println(e.toString());
        }
    }
}

顺便展示一下案例中的JedisUtil类的代码，这里只是简单的用Jedis操作了Redis

@Component
public class JedisUtil {
     private static Jedis jedis;
    public JedisUtil(){
        JedisPoolConfig poolConfig = new JedisPoolConfig(); //连接池配置
        poolConfig.setMaxTotal(10);  //连接池总数量
        poolConfig.setMaxIdle(10);   //连接池空闲数量
        poolConfig.setMinIdle(1);    //无连接时，最小的链接的数

        // 创建Jedis连接池
        JedisPool jedisPool = new JedisPool(poolConfig, "127.0.0.1", 6379);

        // 从连接池中获取jedis对象
        jedis = jedisPool.getResource();
    }

    public static void put(String phone,String code){
        long time=60*5l;
        jedis.set(phone,code,"nx","ex",time);
    }

    public static void putJSON(String key,String value){
        jedis.set(key,value);
    }

    public static Object get(String phone){
        return jedis.get(phone);
    }
    public static void remove(String phone){
        jedis.del(phone);
    }


}

到这里前后端的双向异步完成信息实时更新就做完了

看效果展示图：

总结

以上就是AJAX和SpringMVC双向异步的所有操作，说白了也就是前后端两个定时器，后端定时查数据库存Redis，前台定时来从Redis里取数据，这样有效减轻了数据库的压力。对于数据库的访问只存在一个，所有客户端访问Redis就可以了~

键盘都敲坏了

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前后端双向异步

AJAX和SpringMVC双向异步完成信息实时更新文章目录前言一、前后端双向异步是什么？二、使用步骤 1.引入库 2.读入数据总结前言前后端双向异步的作用于实时更新数据，比如打车，外卖这种小程序，时刻提示订单本章就介绍了前后端双向异步的写法提示：以下是本篇文章正文内容，下面案例可供参考一、前后端双向异步是什么？其实就是AJAX和SpringMVC的异步操作，AJAX定时器去后端取Redis...
复制链接

扫一扫

专栏目录