весенний веб-сокет и проблема с топанием

У меня есть приложение на основе Spring, которое использует websocket, stomp.js и JPA для сохранения. ниже приведена конфигурация для веб-сокета

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        // TODO Auto-generated method stub
        stompEndpointRegistry.addEndpoint("/ws").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

}

и контроллер

@Controller
public class HomeController {
    @Autowired private StockService<Stock> stockService;
    @Autowired private SimpMessagingTemplate template; 

      private void updatePriceAndBroadcast() {          
        template.convertAndSend("/topic/price", stockService.getAll());
      }       


      @MessageMapping("/addStock")
      public void addStock(Stock stock) throws Exception {           
          stockService.save(stock);         
          updatePriceAndBroadcast();
      }       


      @RequestMapping(value = "/", method = RequestMethod.GET)
      public String home() {
          updatePriceAndBroadcast();
        return "home";
      }

}

просмотреть как home.jsp

<html>
<head>
    <title>Real time notify example</title>
</head>
<body>
  <h1>Real time notify example</h1>

  <table>
    <thead><tr><th>Code</th><th>Price</th><th>Time</th></tr></thead>
    <tbody id="price"></tbody>
  </table>

  <p class="new">
    Code: <input type="text" class="code"/>
    Price: <input type="text" class="price"/>
    <button class="add">Add</button>
    <button class="remove-all">Remove All</button>
  </p>

  <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
  <script src="/notify/resources/stomp.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
    //Create stomp client over sockJS protocol
    var socket = new SockJS("/notify/ws");
    var stompClient = Stomp.over(socket);      

    // Callback function to be called when stomp client is connected to server
    var connectCallback = function() {
      stompClient.subscribe('/topic/price', renderPrice);
    }; 

    // Callback function to be called when stomp client could not connect to server
    var errorCallback = function(error) {
      alert(error.headers.message);
    };

    // Connect to server via websocket
    stompClient.connect("guest", "guest", connectCallback, errorCallback);

    // Register handler for add button
    $(document).ready(function() {
      $('.add').click(function(e){
        e.preventDefault();
        var code = $('.new .code').val();
        var price = Number($('.new .price').val());
        var jsonstr = JSON.stringify({ 'code': code, 'price': price });
        stompClient.send("/app/addStock", {}, jsonstr);
        return false;
      });
    });

    // Register handler for remove all button
    $(document).ready(function() {
      $('.remove-all').click(function(e) {
        e.preventDefault();
        stompClient.send("/app/removeAllStocks");
        return false;
      });
    });
  </script>
</body>
</html>

Когда я ударил

<button class="add">Add</button>

Я получаю список добавленных элементов, но когда я обновляю страницу или открываю новую страницу, я не вижу списка добавленных элементов. Может ли кто-нибудь сказать мне, где внести изменения, чтобы я получил список добавленных/сохраненных элементов даже после обновление страницы или открытие нового экземпляра браузера.

Приложение доступно по адресу realtimetest.


java spring-mvc spring-websocket stomp
person Arshad Ali    schedule 17.05.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В методе изменения контроллера на

   /**
   * Serve the main page
   */
  @RequestMapping(value = "/", method = RequestMethod.GET)
  public String home(Model model) {
      model.addAttribute("listOfItems", stockService.getAll());
    return "home";
  }

и на стороне просмотра сделайте немного изменений:

<h1>Real time notify example</h1>

    <table>
        <thead>
            <tr>
                <th>Code</th>
                <th>Price</th>
                <th>Time</th>
            </tr>
        </thead>
        <tbody id="price">
            <c:forEach items="${listOfItems }" var="item">
                <tr>
                    <td>${item.code }</td>
                    <td>${item.price }</td>

                </tr>
            </c:forEach>
        </tbody>
    </table>

и, наконец, оставьте все остальные элементы javascript такими, какими они были раньше.

Надеюсь, это имеет смысл и исправит эту уродливую ошибку.

Рабочий пример находится здесь по адресу real-time_test.

person Community    schedule 17.05.2016
comment
Я боролся с проблемой, упомянутой выше в вопросе, теперь я нашел решение. Я хочу удостовериться, что это правильный способ заставить все работать желаемым образом, как задано в вопросе? Я помещаю свой ответ перед вами (сообществом), пожалуйста, просмотрите его и сделайте изменения, если это необходимо, чтобы сделать этот ответ максимально полезным. Заранее спасибо! - person Arshad Ali; 17.05.2016