通过Web Socket将完整数据从Spring Boot服务器推送到客户端

时间:2017-11-01 06:22:40

标签: html5 websocket stomp sockjs

我有一个spring boot服务器,我可以通过一个接一个地发送json来在客户端生成流表。问题是如果用户在10分钟后登录,他只能从第10分钟开始访问数据,即他无法访问0到10分钟的数据。我想要的是首先将数据从第0分钟推到第10分钟,同时继续流式传输过程。如何才能做到这一点?我正在使用jquery数据表来生成表。 我附加了控制器和客户端html以供参考

1)控制器

@Controller
public class ScheduledUpdatesOnTopic {

@Autowired                                       
private SimpMessagingTemplate template;         

int count=0;
@Scheduled(fixedDelay=500)
public void trigger() {

    DateFormat df = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
    Date date = new Date();

    String str[] = {"name"+count,""+Math.round(Math.random()*100),"India"+Math.round(Math.random()*100),df.format(date)};


    this.template.convertAndSend("/topic/message",str);

    ++count;
}
}

2)客户端HTML

var _self = this;
$(document).ready(function() {
    var message ;

    $('#tbl').DataTable( {
        data: message,
        "aLengthMenu" : [[25,50,75,-1],[25,50,75,"All"]],
        "pageLength"  :25,
        columns: [
                { title: "Name" },
                { title: "Age" },
                { title: "Country" },
                { title:  "Date"}
            ]
        });

    subscribeSocket();          
});

function addRow(message){

    var table = $('#tbl').DataTable();
    if(table && message  ){
        table.row.add(message).draw();

    }
}

function subscribeSocket(){
    var socket = new SockJS('/gs-guide-websocket');
    var stompClient = Stomp.over(socket);
    stompClient.connect({ }, function(frame) {
        stompClient.subscribe("/topic/message", function(data) {

         message = JSON.parse(data.body);

         _self.addRow(message);

        });

    });
};

1 个答案:

答案 0 :(得分:0)

如果您不保存以前发送的数据,则无法将其发送回新客户。 在正面,您必须订阅“历史”资源并拨打电话才能获得它。

前:

function subscribeSocket() {

    var socket = new SockJS('/gs-guide-websocket');
    stompClient = Stomp.over(socket);
    var firstCounterReceived = null;
    stompClient.connect({}, function (frame) {
        setConnected(true);
        stompClient.subscribe('/topic/history', function (response) {
            console.log(JSON.parse(response.body));
        });
        stompClient.subscribe('/topic/message', function (response) {
            var message = JSON.parse(response.body);
            if (firstCounterReceived == null) {
                firstCounterReceived = message[0];
                console.log(`Calling history endpoint with ${firstCounterReceived}`);
                stompClient.send("/app/topic/history", {}, message[0]);
            }
            console.log(message);
        });
    });
}

备份:

@Controller
@EnableScheduling
public class ScheduledUpdatesOnTopic {

    Map<Integer, String[]> history = new LinkedHashMap<>();

    @Autowired
    private SimpMessagingTemplate template;

    private Integer count = 0;

    @MessageMapping("/topic/history")
    @SendTo("/topic/history")
    public List<String[]> history(Integer to) {

        return history.keySet()
                .stream()
                .filter(counter -> counter < to)
                .map(counter -> history.get(counter))
                .collect(Collectors.toList());
    }


    @Scheduled(fixedRate = 500)
    public void sendMessage() {
        DateFormat df = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
        Date date = new Date();
        String[] str = {count.toString(), "name"+count,""+Math.round(Math.random()*100),"India"+Math.round(Math.random()*100),df.format(date)};
        history.put(count, str);
        this.template.convertAndSend("/topic/message",str);
        ++count;
    }

}

在此示例中,已保存的数据存储在地图中,请注意它会在某个时刻消耗一些内存。