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

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. PAT (Basic Level) Practice （中文）1055 集体照 (25 分) 凌宸1642

    PAT (Basic Level) Practice (中文)1055 集体照 (25 分) 凌宸1642 题目描述: 拍集体照时队形很重要,这里对给定的 N 个人 K 排的队形设计排队规则如下: 每 ...

  2. Python基础（十三）：for循环

    对于一个序列,比如说:列表.字符串,有时候我们需要获取其中的每一个元素,然后执行某个操作,此时就需要借助于for循环. for循环语法结构 for循环的语法结构如下,这里大家必须清楚一点,for循环后 ...

  3. Flowable与springBoot项目整合及出现的问题

    Flowable与springBoot项目整合及出现的问题 单纯地将Flowable和springBoot整合,使用mysql作为数据库,整合中踩了两个坑,见文末. 在pom中添加依赖 <?xm ...

  4. IDEA下 Scala 安装 使用

    Scala 安装 使用 1.安装Scala插件 Setting--->Plugins--->搜索Scala--->install--->安装完成 或者线上安装不成功/网速太慢, ...

  5. 【CTF】图片隐写术 · 修复被修改尺寸的PNG图片

    前言 今天我们想来介绍一下关于图片隐写相关处理,以及修复被修改尺寸的PNG图片. 关于PNG图片的相关处理,是CTF Misc图片隐写术中极为基础的一项操作,笔者这里是想要提一些做题过程中发现的小技巧 ...

  6. 1.设置和验证MySQL数据库的隔离级别

    登录数据库 mysql -u root - p 新建用户,各启动一个事物,用于同时操作数据库表中数据 create user tom identified by 'tom'; 然后同时再用该用户启动M ...

  7. 自动化kolla-ansible部署ubuntu20.04+openstack-victoria之镜像制作centos7.8-15

    自动化kolla-ansible部署ubuntu20.04+openstack-victoria之镜像制作centos7.8-15 欢迎加QQ群:1026880196 进行交流学习   制作OpenS ...

  8. Node.js/Vue.js使用jsSHA库进行SHA1/2/3加密

    1 概述 jsSHA是一个用JS+TS实现完整SHA系列加密算法的加密库,包括: SHA1 SHA-224/256/384/512 SHA3-224/256/384/512 SHAKE128/256 ...

  9. Day 12_61_多线程的创建和启动(二)

    多线程的创建和启动 * 在java中实现多线程的第二种方法 实现java.lang.Runnable接口,重写run()方法 * 推荐使用这种方式,因为实现接口还可以保留类的继承. package c ...

  10. 日志配置文件读取spring boot配置文件中的属性

    如果是读取 application.properties 这种spring boot的默认配置文件时 其中 scope固定为context  指明从上下文中获取, name 根据自己的意思给, sou ...