> 
> EventSource的readyState 表明连接的当前状态，该属性只读
> 
>   * 0: 相当于常量EventSource.CONNECTIONG 表示连接还未建立，或者断线正在重连
>   * 1:相当于常量EventSource.OPEN 表示连接已经建立，可以接受数据
>   * 2:相当于常量EventSource.CLOSED 表示连接已断，且不会重连

### Server-sent Events {#toc_2}

> Server-sent Events 规范是 HTML 5 规范的一个组成部分,该规范比较简单，主要由两部分组成：
> 
> 第一部分：服务器端与浏览器之间的通讯协议
> 
> 第二部分：浏览器端可以提供JavaScript中使用EventSource对象。
> 
> 通讯协议是基于纯文本的简单协议
> 
> 服务器端响应的内容类型为：text/event-stream，响应文本内容可以看成是一个事件流，有不同的事件组成。
> 
> 每个事件由类型和数据两个部分组成，同时每个事件可以有一个可选的标识符。不同事件的内容之间通过仅包含回车符和换行符的空行来分隔。每个事件的数据可能由多行组成。
> 
> 清单1
> 
> > ```
`data: first event

data: second event
id: 100

event: myevent
data: third event
id: 101

: this is a comment
data: fourth event
data: fourth event continue
`

> > 
> > 在指定URL创建出EventSource对象之后，可以通过onmessage和addEventListener方法来添加事件处理方法，当服务器端有新的事件产生，相应的事件处理方法会被调用。EventSource对象的onmessage属性的作用类似于addEventListerner('message'),不过onmessage属性只支持一个事件处理方法
> > 
> > 默认情况下，服务器发来的数据，总是触发浏览器EventSource实例的message事件。

### 常见实现方式对比 {#toc_3}

|        | （短）轮询    | 长轮询/Comet | SSE      | WebSocket |
| ------ | -------- | --------- | -------- | --------- |
| 浏览器支持  | 全部       | 全部        | 除IE/Edge | 现代浏览器     |
| 是否独立协议 | HTTP     | HTTP      | HTTP     | WS        |
| 是否轻量   | 是        | 是         | 是        | 否         |
| 断线重连   | 否        | 否         | 是        | 否         |
| 负载压力   | 占用内存/请求数 | 同（短）轮询    | 一般       | 一般        |
| 数据延迟   | 取决于请求间隔  | 同（短）轮询    | 实时       | 实时        |

## Demo 实现方式一（Spring boot） {#toc_4}

> **踩坑总结**
> 
>   * 在连接的时候，前端连接是否跨域了，如果跨域先解决跨域
> 
>   * 如果服务器端调用sseEmitter.complete();前端就执行连接关闭，再次发送前端数据的时候，重新连接回打开（一般我们处理完成的时候执行）
> 
>   * 同一个用户在连接到后台的时候，后台的SseEmitter对象需要移除在重新添加，否则后台推送不过来
> 
>![image-20200819175021176](https://tva1.sinaimg.cn/large/007S8ZIlly1ghw9nmabulj30k00bkta2.jpg) 

### 精简版 {#toc_5}

> 服务器代码
> 
> ```
`package com.zdltech.javaexercise.ssedemo.controller;

import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@Controller
@CrossOrigin
public class IndexController {
    private Map<String,SseEmitter>  pushSseEmitterMap = new HashMap<>();

    @GetMapping(path = "/push/{id}",produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter  pushSse(@PathVariable("id") String uid){
        System.out.println("pushSse is run");
        SseEmitter sseEmitter = new SseEmitter(0L);
        sseEmitter.onCompletion(()->{pushSseEmitterMap.remove(uid);});
        sseEmitter.onTimeout(()->{pushSseEmitterMap.remove(uid);});
        sseEmitter.onError(throwable->{
            System.out.println("onError is run");
            throwable.printStackTrace();
            pushSseEmitterMap.remove(uid);
        });
        if (!pushSseEmitterMap.containsKey(uid)){
            pushSseEmitterMap.remove(uid);
        }
        pushSseEmitterMap.put(uid,sseEmitter);
        return sseEmitter;
    }

//    @Scheduled(fixedDelay = 2*1000)
//    public void scheduledMsgEmitter() throws IOException
//    {
//        pushSseEmitterMap.keySet().forEach(key -> {
//           SseEmitter emitter = pushSseEmitterMap.get(key);
//            if (null != emitter){
//                try {
//                    System.out.println("Timeout : "+ emitter.getTimeout());
//                    emitter.send(": " + Calendar.getInstance().getTime());
//                } catch (IOException e) {
//                    e.printStackTrace();
//                }
//            }
//
//        });
//    }

    @RequestMapping("/push/send")
    @ResponseBody
    public String push(@RequestParam String uid,@RequestParam String value){
        System.out.println("push is run");
        SseEmitter  sseEmitter = pushSseEmitterMap.get(uid);
        if (sseEmitter!=null){
            try {
                sseEmitter.send(value,MediaType.APPLICATION_JSON);
            } catch (IOException e) {
                e.printStackTrace();
                return "fail";
            }
        }

        return "ok";
    }

    @RequestMapping("/push/finish")
    @ResponseBody
    public String finish(@RequestParam String uid,@RequestParam String value){
        System.out.println("finish is run");
        SseEmitter  sseEmitter = pushSseEmitterMap.get(uid);
        if (sseEmitter!=null){
            try {
                sseEmitter.send(value,MediaType.APPLICATION_JSON);
                sseEmitter.complete();
            } catch (IOException e) {
                e.printStackTrace();
                return "fail";
            }
        }

        return "ok";
    }
}

`

> 
> 执行结果：
> 
>![image-20200819175320871](https://tva1.sinaimg.cn/large/007S8ZIlly1ghw9qofz2fj30uu0o6mys.jpg) 

### 简单封装版 {#toc_6}

> ### SseEmitter {#toc_7}
> 
> SseEmitter是SpringMVC(4.2+)提供的一种技术,它是基于**Http协议**的，相比WebSocket，它更轻量，但是它只能从服务端向客户端**单向**发送信息。在SpringBoot中我们无需引用其他jar就可以使用
> 
>   * 创建`AtomicInteger`用于记录连接数
>   * 创建`ConcurrentHashMap`用于存放连接信息
>   * 建立连接：创建并返回一个带有超时时间的`SseEmitter`给前端。超时间设为0表示永不过期
>   * 设置连接结束的回调方法`completionCallBack`
>   * 设置连接超时的回调方法`timeoutCallBack`
>   * 设置连接异常的回调方法`errorCallBack`
>   * 创建推送信息的方法`SseEmitter.send()`
>   * 创建移除连接的方法
> 
> 服务器端
> 
> ```
`import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

@RestController
@RequestMapping("/sse")
@CrossOrigin
public class SseEmitterController {

    /**
     * 用于创建连接
     */
    @GetMapping("/connect/{userId}")
    public SseEmitter connect(@PathVariable String userId) {
        return SseEmitterServer.connect(userId);
    }

    @GetMapping("/push/{message}")
    public ResponseEntity<String> push(@PathVariable(name = "message") String message) {
        SseEmitterServer.batchSendMessage(message);
        return ResponseEntity.ok("WebSocket 推送消息给所有人");
    }

}

`

> 
> 前端二：
> 
> ```
`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SseEmitter</title>
</head>
<body>
<button onclick="closeSse()">关闭连接</button>
<div id="message"></div>
</body>
<script>
    let source = null;

    // 用时间戳模拟登录用户
    const userId = new Date().getTime();

    if (!!window.EventSource) {

        // 建立连接
        source = new EventSource('http://127.0.0.1:8844/sse/connect/' + userId);

        /**
         * 连接一旦建立，就会触发open事件
         * 另一种写法：source.onopen = function (event) {}
         */
        source.addEventListener('open', function (e) {
            setMessageInnerHTML("建立连接。。。");
        }, false);

        /**
         * 客户端收到服务器发来的数据
         * 另一种写法：source.onmessage = function (event) {}
         */
        source.addEventListener('message', function (e) {
            setMessageInnerHTML(e.data);
        });


        /**
         * 如果发生通信错误（比如连接中断），就会触发error事件
         * 或者：
         * 另一种写法：source.onerror = function (event) {}
         */
        source.addEventListener('error', function (e) {
            if (e.readyState === EventSource.CLOSED) {
                setMessageInnerHTML("连接关闭");
            } else {
                console.log(e);
            }
        }, false);

    } else {
        setMessageInnerHTML("你的浏览器不支持SSE");
    }

    // 监听窗口关闭事件，主动去关闭sse连接，如果服务端设置永不过期，浏览器关闭后手动清理服务端数据
    window.onbeforeunload = function () {
        closeSse();
    };

    // 关闭Sse连接
    function closeSse() {
        source.close();
        const httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', 'http://127.0.0.1:8844/sse/close/' + userId, true);
        httpRequest.send();
        console.log("close");
    }

    // 将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
</script>
</html>
`

> 
> 前端代码
> 
> ```
`<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="example"></div>
<script>
  var source = new EventSource('http://127.0.0.1:8844/stream');
  var div = document.getElementById('example');
  
  source.onopen = function (event) {
    div.innerHTML += '<p>Connection open ...</p>';
  };
  
  source.onerror = function (event) {
    div.innerHTML += '<p>Connection close.</p>';
  };
  
  source.addEventListener('connecttime', function (event) {
    div.innerHTML += ('<p>Start time: ' + event.data + '</p>');
  }, false);
  
  source.onmessage = function (event) {
    div.innerHTML += ('<p>Ping: ' + event.data + '</p>');
  };
  
</script>
</body>
</html>
`

## Demo实现四 {#toc_10}

### 服务器端实现 {#toc_11}

> 服务器端实现Server-sent Events，服务器端的 实现由两部分组成：一部分用来产生数据的org.eclipse.jetty.servlets.EventSource,另一部分作为浏览器访问端点的继承自org.eclipse.jetty.servlet.EventSourceServlet类的Servlet实现。
> 
> 实现EventsSource接口MovenmentEventSource
> 
> ```
`public    class MovenmentEventSource implements EventSource{
  private int width =800;
  private int height = 600;
  private int stepMax =5;
  private int x=0;
  private int y = 0;
  private Random random = new Random();
  public MovennmentEventSource(int width,int height,int stepMax){
    this.width = width;
    this.height = height;
    this.stepMax = stepMax;
    this.x = random.nextInt(width);
    this.y = random.nextInt(height);
  }
  @Override
  public void onOpen(Emitter emitter) throws IOException{
    query(emitter);//开始生产位置信息
  }
  
  @Override
  public void onResume(Emitter emitter,String lastEventId){
    updatePosition(lastEventId);//更新起始位置
    query(emitter);//开始生成位置信息 
  }
  
  //根据Last-Event-Id来更新起始位置
  private void updatePosition(String id){
    if(id!=null){
      String[] pos = id.split(",");
      if(pos.length>1){
        int xPos =-1,yPos = -1;
        try{
          xPos = Integer.parseInt(pos[0],10);
          yPos = Integer.parseInt(pos[1],10);
        }catch(NumberFormatException e){
          
        }
        if(isValidMove(xPos,yPos)){
          xPos = xPos;
          yPos = yPos;
        }
      }
    }
  }
  
  private void query(Emitter emitter) throws IOException{
    emitter.comment("Start sending movement information.");
    while(true){
      emitter.comment("");
      move();//移动位置
      String id = String.format("%s,%s",x,y);
      emitter.id(id);//根据位置生成时间 标识符
      emitter.data(id);//发送位置信息数据
      try{
        Thread.sleep(2000);
      }catch(InterruptedException e){
        break;
      }
    }
  }
  
  @Override
  public void onClose(){
    
  }
  
  //获取下一个合法的移动位置
  private void move(){
    while(true){
      int[] move = getMove();
      int xNext = x+move[0];
      int yNext = y+move[1];
      if(isValidMove(xNext,yNext)){
        x = xNext;
        y = yNext;
        break;
      }
    }
  }
  
  //判断当前的移动位置是否合法
  private boolean inValidMove(int x,int y){
    return x >=0 && x<=width && y>=0 && y <= height;
  }
  
  //随机生成下一个移动位置
  private int[] getMove(){
    int[] xDir = new int[]{-1,0,1,0};
    int[] yDir = new int[]{0,-1,0,1};
    int dir = random,nextInt(4);
    return new int[]{xDir[dir]*random.nextInt(stepMax),yDir[dir]*random.nextInt(stepMax)};
  }
}
`

### 浏览器端实现 {#toc_12}

> 浏览器端的实现比较简单，只需要创建出EventSource对象，并添加相应的事件处理方法即可。
> 
> ```
`var es = new EventSource('sse/movement');
es.addEventListener('message',function(e){
  var pos = e.data.split(','),x = pos[0], y = pos[1];
  $("#box").css(
      left: x+'px',
      top: y+'px'
  );
});
`