概述

本文讲述如何结合WebSocket和Openlayers4实现地图内容的实时刷新。

需求概述

1. 定时接受推送的数据（tif格式）；
2. 数据的预处理与加工（png格式）；
3. 推送到前端并展示。

实现效果

实现效果

实现思路

结合WebSocket实现数据加工完后，将结果推送到前端，并在前端展示。在本实例钟，使用了后台的定时刷新机制，模拟数据推送、数据加工这个流程。

实现代码

1. pom配置

   org.springframework
  spring-websocket
  ${springmvc.version}
 

2. SpringMVC中socket配置

3. WebsocketEndPoint.java

package com.lzugis.web.websocket;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.util.Timer;
import java.util.TimerTask;

@RequestMapping("/websocket")
public class WebsocketEndPoint extends TextWebSocketHandler {
    private Timer timer;
    private static int imgIndex = 0;
    private final String[] imgList = {"1.png","2.png","3.png","4.png","5.png","6.png"};

    @Override
    protected void handleTextMessage(WebSocketSession session,
                                     TextMessage message) throws Exception {
        if(!session.isOpen()){
            timer.cancel();
            return;
        }
        super.handleTextMessage(session, message);
        session.sendMessage(message);
    }
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        timer = new Timer(true);
        long delay = 0;
        OrderTimeTask orderTimeTask = new OrderTimeTask(session);
        timer.schedule(orderTimeTask, delay, 5000);// 设定指定的时间time,此处为5s
    }


    class OrderTimeTask extends TimerTask{
        private WebSocketSession session;

        public OrderTimeTask(WebSocketSession session){
            this.session = session;
        }

        @Override
        public void run() {
            try {
                String imgPath = imgList[imgIndex];
                TextMessage textMessage = new TextMessage(imgPath);
                handleMessage(session,textMessage);
                imgIndex++;
                if(imgIndex==imgList.length)imgIndex=0;
            } catch (Exception e){
                e.printStackTrace();
            }
        }
    }
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("Connection Closed！");
    }
}

4. HandshakeInterceptor.java

package com.lzugis.web.websocket;

import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;

import java.util.Map;

public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor {

    @Override
    public boolean beforeHandshake(ServerHttpRequest request,
                                   ServerHttpResponse response, WebSocketHandler wsHandler,
                                   Map attributes) throws Exception {
        return super.beforeHandshake(request, response, wsHandler, attributes);
    }

    @Override
    public void afterHandshake(ServerHttpRequest request,
                               ServerHttpResponse response, WebSocketHandler wsHandler,
                               Exception ex) {
        super.afterHandshake(request, response, wsHandler, ex);
    }
}

5. 前端代码

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
博客园：http://www.cnblogs.com/lzugis/
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式

LZUGIS