有这么一个场景：服务端处理数据，响应比较慢，为了不让用户体会到网页没有反应，服务端需要把处理的每一步操作返回给前端，前端实时进行打印。

1.ajax 轮询

<script>

    setInterval("test()",2000);

    function test() {

        $.ajax({

            url: '/new_window_url/',

            async:false,

            type: 'get',

            success: function (data) {

                console.log(data)

            }

        })

    }

</script>

2.EventSource 长链接

前端代码：

<!doctype html>

<html lang="en">

<head>

    <title>Sse测试文档</title>

    <meta charset="utf-8">

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

     <script src="https://cdn.bootcss.com/event-source-polyfill/0.0.9/eventsource.min.js"></script>

</head>

<body>

    <div></div>

</body>

</html>

<script>

    var source = new EventSource('http://127.0.0.1:8080/event/query');

    //只要和服务器连接，就会触发open事件

        source.addEventListener("open",function(){

           console.log("和服务器建立连接");

        });

        //处理服务器响应报文中的load事件

        source.addEventListener("load",function(e){

            console.log("服务器发送给客户端的数据为:" + e.data);

        });

        //如果服务器响应报文中没有指明事件，默认触发message事件

        source.addEventListener("message",function(e){

            console.log("服务器发送给客户端的数据为:" + e.data);

        });

        //发生错误，则会触发error事件

        source.addEventListener("error",function(e){

            console.log("服务器发送给客户端的数据为:" + e.data);

        });

</script>

服务端代码：

package com.example.demo;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.web.bind.annotation.CrossOrigin;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.Date;

@SpringBootApplication

@RestController

@RequestMapping("event")

public class DemoApplication {

    public static void main(String[] args) {

        SpringApplication.run(DemoApplication.class, args);

    }

    @ResponseBody

    @CrossOrigin

    @RequestMapping(value="query")

    public void query(HttpServletResponse response) throws IOException, InterruptedException {

        response.setHeader("Content-Type","text/event-stream");

        response.setContentType("text/event-stream;charset=utf-8");

        PrintWriter out = response.getWriter();

        out.println("data:Hello World");

        out.println("event:load");

        out.println("id:140312");

        out.println();

        out.flush();

        out.close();

    }

}

js EventSource 长链接的更多相关文章

  1. http长链接

    之前说过http的请求是再tcp连接上面进行发送的,那么tcp连接就分为长连接 和 短连接这样的概念,那么什么是长链接呢?http请求发送的时候要先去创建一个tcp的连接,然后在tcp的连接上面发送h ...

  2. python+uwsgi导致redis无法长链接引起性能下降问题记录

    今天在部署python代码到预生产环境时,web站老是出现redis链接未初始化,无法连接到服务的提示,比对了一下开发环境与测试环境代码,完全一致,然后就是查看各种日志,排查了半天也没有查明是什么原因 ...

  3. PHP实现新浪长链接转化成短链接API

    我们经常收到类似于这样的短信(如下图),发现其中的链接并不是常规的网址链接,而是个短小精悍的短链接,产品中经常需要这样的需求,如果在给用户下发的短信中是一个很长的连接,用户体验肯定很差,因此我们需要实 ...

  4. 长链接转换成短链接（iOS版本）

    首先需要将字符串使用md5加密,添加NSString的md5的类别方法如下 .h文件 #import <CommonCrypto/CommonDigest.h> @interface NS ...

  5. android 实现与服务器的长链接 方式

    http://blog.csdn.net/coffeeco/article/details/13276437  这边文章主要看服务端,使用tomcat7以上实现服务端的接收消息以及消息发送 http: ...

  6. mariadb 长链接时间限制导致队列消费进程崩溃

    项目是一个数据同步项目,线下Android客户端把本地sqllite数据提交到云端队列,php做守护进程消费队列,以同步数据.初测没有问题,可是时不时出现诡异的崩溃,因为设置了错误邮件报警,发现错误代 ...

  7. 纯Socket(BIO)长链接编程的常见的坑和填坑套路

    本文章纯属个人经验总结,伪代码也是写文章的时候顺便白板编码的,可能有逻辑问题,请帮忙指正,谢谢. Internet(全球互联网)是无数台机器基于TCP/IP协议族相互通信产生的.TCP/IP协议族分了 ...

  8. 微信公众号开发C#系列-10、长链接转短链接

    1.概述 短网址的好处众多,便于记忆,占用字符少等,现在市面上出现了众多的将长网址转变为短网址的方法,但是由于他们都是小的公司在幕后运营,所以很不靠谱,面对随时关闭服务的可能,这样也导致我们将转换好了 ...

  9. django模型层优化(关联对象) 懒加载和预加载 +长链接

    懒加载 存在于外键和多对多关系不检索关联对象的数据调用关联对象会再次查询数据库 问题根源 查看django orm的数据加载,两次. 查询user,查询menu 预加载的方法 预加载单个关联对象--s ...

随机推荐

  1. 小白的第一次sql实战

    去年发的有一篇sql注入忘记粘贴过来了,今天想起了就fuzz过来一下 有id尝试sql注入 找这种sql注入的站用sql检索就行了,但是最好挂代理用谷歌搜索,百度的话搜sql注入的很多被别人打过了,导 ...

  2. [Azure Devops] 使用 Azure Repos 管理代码

    1. 什么是 Azure Repos Azure Repos 是一组版本控制工具,可用于管理代码.无论您的软件项目是大型项目还是小型项目,都应尽快使用版本控制. 版本控制系统是可帮助您跟踪随时间变化对 ...

  3. 学习笔记-vue.js获取file文件数据

    在vue中file不能像其他input一样使用 v-model 双向数据绑定,因为文件选择是只读,只能用onchange监控值得变化. 所有需要使用v-on:change去监控. 例1: <in ...

  4. Dynamics CRM Report安装出错三

    需要删除和备份报表服务的密钥集 进入到Micorsoft SQL Server Reporting Services配置管理器 选择"加密密钥",点击"删除" ...

  5. （八）Struts2中的参数封装

    一.静态参数封装 什么是静态参数? 静态参数就是硬编码的,不可随意改变. 例子: (1)我们首先创建一个Action类,里面有两个参数,用来封装请求参数 public class User exten ...

  6. spring-cloud-consul 服务注册发现与配置

    下面是 Spring Cloud 支持的服务发现软件以及特性对比(Eureka 已停止更新,取而代之的是 Consul): Feature euerka Consul zookeeper etcd 服 ...

  7. 前端 JS 问题记录

    立即执行函数 !function(){}() function 前面增加符号 ! ~ + - 之类,都是告诉浏览器自动执行这个匿名函数,因为这些符号的运算级别都是高的 (function(){... ...

  8. springboot项目整合mybatis

    记录创建springboot项目并配置mybatis中间件: 资源准备及版本说明 编程工具:IDEA JDK版本:1.8 Maven版本:Apache Maven 3.6.3 springboot版本 ...

  9. Java刷题-stack

    一.getMin栈 题目描述 实现一个特殊功能的栈,在实现栈的基本功能的基础上,再实现返回栈中最小元素的操作. 输入描述: 第一行输入一个整数N,表示对栈进行的操作总数. 下面N行每行输入一个字符串S ...

  10. java面试系列<4>——IO

    面试系列--javaIO 一.概述 java的IO主要分为以下几类: 磁盘操作:File 字节操作:InputStream 和 OutputStream 字符操作:Reader 和 Writer 对象 ...