Настройте клиент атмосферы в ReactJS, чтобы подписаться на конечную точку SpringBoot - PullRequest
0 голосов
/ 10 июля 2020

Я работаю над проектом, который имеет серверные и внешние компоненты, серверный компонент - это приложение SpringBoot, которое должно отправлять Json данные клиентам, когда они подписываются на это интерфейсный компонент написан в ReactJS.

Я нашел документацию, написанную JQuery (JQuery код атмосферы ), и я попытался преобразовать его в ReactJs, и это похоже на код ниже, в любом случае я получаю undefined в консоли, когда печатаю объект атмосферы: subscribe : undefined. Интересно, не хватает ли мне какого-то шага инициализации в моем коде.

import React from 'react';
import atmosphere from 'atmosphere';

var transport = 'websocket';

// We are now ready to cut the request
var request = {
    url:'http://localhost:8080/stream',
    contentType: "application/json",
    trackMessageLength: true,
    shared: true,
    transport: transport,
    fallbackTransport: 'long-polling',
    onOpen: function(response:any) {
        console.log('Atmosphere connected using ' , response.transport);
        transport = response.transport;
    },
    onTransportFailure: function(errorMsg: Atmosphere.Response, request: Atmosphere.Request) {
        console.log('Atmosphere Chat. Default transport is WebSocket, fallback is ' ,request.fallbackTransport );
    },
    onMessage: function (response:Atmosphere.Response) {

        var message = response.responseBody;
        try {
            console.log('message: ', message);
        } catch (e) {
            console.log('This doesn\'t look like a valid JSON: ', message);
            return;
        }
    },
    onClose : function(response: Atmosphere.Response) {
        console.log("Close connection !!!");
    }
    
};

const socket = atmosphere;
// Connect to the server, hook up to the request handler.
console.log('subscribe : ', socket.subscribe);
socket.subscribe && socket.subscribe(request);

const AtmosphereWebSocket = () => {
    return ( <div> </div> );
}

export default AtmosphereWebSocket;
@Component
@WebSocketHandlerService(path = "/stream", broadcaster = SimpleBroadcaster.class,
        atmosphereConfig = {"org.atmosphere.websocket.WebSocketProtocol=" +
                "org.atmosphere.websocket.protocol.StreamingHttpProtocol"})
public class WebSocketStream extends WebSocketStreamingHandlerAdapter {

    private final Logger logger = LoggerFactory.getLogger(WebSocketStream.class);

    public WebSocketStream() {
        System.out.println(" ** WebSocketStream ** ");
    }

    // A thread which sends a stream of data out of a websocket. Create when the class
    // is instantiated, inject the websocket when open.
    private class Stream extends Thread {
        protected WebSocket socket;
        protected final ObjectMapper mapper = new ObjectMapper();
        protected boolean stop = false;

        public Stream(WebSocket socket) {
            this.socket = socket;
        }

        public void run() {
            int count = 0;
            try {
                while (!stop) {
                    Map<String, Object> message = new HashMap<String, Object>();
                    message.put("time", new Date().toString());
                    message.put("count", count++);
                    String string = mapper.writeValueAsString(message);
                    socket.write(string);
                    System.out.println("tick: " + string);
                    Thread.sleep(1000);
                }
            } catch (Exception x) {
                // break.
            }
        }
    }

    int clients = 0;

    @Override
    public void onOpen(WebSocket webSocket) throws IOException {
        // Hook up the stream.
        final Stream stream = new Stream(webSocket);
        stream.start();

        webSocket.broadcast("client " + clients++ + " connected");
        webSocket.resource().addEventListener(new WebSocketEventListenerAdapter() {
            @Override
            public void onDisconnect(AtmosphereResourceEvent event) {
                if (event.isCancelled()) {
                    logger.info("Browser {} unexpectedly disconnected", event.getResource().uuid());
                } else if (event.isClosedByClient()) {
                    logger.info("Browser {} closed the connection", event.getResource().uuid());
                }
                stream.stop = true;
            }
        });
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...