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

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. Shell：如何遍历包含空格的文本

    Blog:博客园 个人 翻译自Looping Through a File that Contains Spaces – Bash for Loop 处理包含空格或特殊字符的文件是每个使用Linux的 ...

  2. HTML5本地存储 localStorage操作使用详解

    1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQ ...

  3. 2020 OO 第三单元总结 JML语言

    title: 2020 OO 第三单元总结 date: 2020-05-21 10:10:06 tags: OO categories: 学习 第三单元终于结束了,这是我目前为止最惨的一单元,第十次作 ...

  4. Leedcode算法专题训练（分治法）

    归并排序就是一个用分治法的经典例子,这里我用它来举例描述一下上面的步骤: 1.归并排序首先把原问题拆分成2个规模更小的子问题. 2.递归地求解子问题,当子问题规模足够小时,可以一下子解决它.在这个例子 ...

  5. Java（100-113）【类与对象、封装、构造方法】

    1.对象的创建以及使用 Student stu =new Student(); 根据一个类创建一个对象 导包.创建.使用 2.手机练习 有main才能run Phone.java package cn ...

  6. 网络编程Netty入门：EventLoopGroup分析

    目录 Netty线程模型 代码示例 NioEventLoopGroup初始化过程 NioEventLoopGroup启动过程 channel的初始化过程 Netty线程模型 Netty实现了React ...

  7. xss-labs全关教程

    0x01 Level 1 查看源码,可以看到接收了name参数,并直接嵌入到HTML页面中了 没有任何过滤,而且直接会当作代码执行. 0x02 Level 2 先传入<script>ale ...

  8. 二. 简单初步认识SpringCloud

    (一)微服务的实现方式很多,但是最火的莫过于Spring Cloud了.为什么? 后台硬:作为Spring家族的一员,有整个Spring全家桶靠山,背景十分强大. 技术强:Spring作为Java领域 ...

  9. 病毒木马查杀实战第016篇：U盘病毒之逆向分析

    比对脱壳前后的程序 我们这次所要研究的是经过上次的脱壳操作之后,所获取的无壳病毒样本.其实我们这里可以先进行一下对比,看看有壳与无壳的反汇编代码的区别.首先用IDA Pro载入原始病毒样本: 图1 可 ...

  10. hdu4740 不错的简单搜索

    题意:      给你一个n*n的图,给你驴和老虎的初始坐标和方向,已知他们的速度相同,他们走动的时候都是走直线,如果不能走,驴往右拐,老虎往左拐,如果拐了一次还走不了就原地不动,问他们的最早相遇位置 ...