使用Angularjs SockJs Stomp Spring实现WebSocket时出现404错误

如何解决使用Angularjs SockJs Stomp Spring实现WebSocket时出现404错误

我正在尝试使用SockJs和Stomp在基于Angularjs和Java Spring的应用程序中实现WebSockets。但是我在一次握手调用中收到404错误。请在下面找到我的代码段。

JSP页面：

    <div class="row" ng-if="!downloadFile">
        <div class="col-sm-1" ng-if="brokerUploadCount > 0"><button ng-click="approve()" class="pull-right btn btn-success">Approval</button></div>
        <div class="col-sm-1"><button ng-click="reject()" class="pull-left btn btn-danger">Reject</button></div>
    </div>
    <br>
    <div class="row" ng-if="downloadFile">
        <div class="col-sm-4">
            <div class="col-sm-2"><b>SUCCESSFUL</b></div>
        </div>
<script type="text/javascript" src="js/angular/angular.min.js"></script>
<script type="text/javascript" src="js/angular/ui-bootstrap-custom-tpls-0.14.3.min.js"></script>
<script type="text/javascript" src="js/angular/angular-file-upload.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controller/UploadCtrl.js"></script>
<script src="libs/sockjs/sockjs.min.js" type="text/javascript"></script>
<script src="libs/stomp-websocket/lib/stomp.min.js" type="text/javascript"></script>
<script src="libs/lodash/dist/lodash.min.js"></script>

app.js

var pos = angular.module('pos',['ui.bootstrap','angularFileUpload'])  
         angular.module("pos").service("ChatService",function($q,$timeout) {
            var service = {},listener = $q.defer(),socket = {
              client: null,stomp: null
            },messageIds = [];
            
            service.RECONNECT_TIMEOUT = 300000;
            service.soCKET_URL = "/LibertyApp/GPP/api/chat";
            service.CHAT_TOPIC = "/topic/message";
            service.CHAT_broKER = "/app/chat";
            
            service.receive = function() {
              return listener.promise;
            };
            
            service.send = function(message) {
              var id = Math.floor(Math.random() * 1000000);
              socket.stomp.send(service.CHAT_broKER,{
                priority: 9
              },JSON.stringify({
                message: message,id: id
              }));
              messageIds.push(id);
            };
            
            var reconnect = function() {
              $timeout(function() {
                initialize();
              },this.RECONNECT_TIMEOUT);
            };
            
            var getMessage = function(data) {
              var message = JSON.parse(data),out = {};
              out.message = message.message;
              out.time = new Date(message.time);
              if (_.contains(messageIds,message.id)) {
                out.self = true;
                messageIds = _.remove(messageIds,message.id);
              }
              return out;
            };
            
            var startListener = function() {
              socket.stomp.subscribe(service.CHAT_TOPIC,function(data) {
                listener.notify(getMessage(data.body));
              });
            };
            
            var initialize = function() {
              socket.client = new SockJS(service.soCKET_URL);
              socket.stomp = Stomp.over(socket.client);
              socket.stomp.connect({},startListener);
              socket.stomp.onclose = reconnect;
            };
            
            initialize();
            return service;
          });

    

UploadCtrl.js

pos.controller('excelCtrl',['$scope','$http','appService','ChatService','FileUploader',function($scope,$http,appService,ChatService,FileUploader) {     
        $scope.downloadFile = false;

          $scope.approve = function() {
            var dataSet = {
                "period":$("#period").val(),};
            console.log("dataSet in controller");
          ChatService.send(dataSet);
          
        };
        
        ChatService.receive().then(null,null,function(message) {
            console.log("message received success");
            appService.showStatus("success");
          $scope.downloadFile = true;
                $scope.fileName = "";
        });
        
    }]);




    

后端Java代码： WebSocketConfig.java

package us.com.liberty.config;

import org.springframework.context.annotation.*;
import org.springframework.messaging.simp.config.MessagebrokerRegistry;
import org.springframework.web.socket.config.annotation.*;

@Configuration
@EnableWebSocketMessagebroker
@ComponentScan(basePackages = "us.com.liberty.controller")
public class WebSocketConfig extends AbstractWebSocketMessagebrokerConfigurer {

  @Override
  public void configureMessagebroker(MessagebrokerRegistry config) {
    config.enableSimplebroker("/topic");
    config.setApplicationDestinationPrefixes("/app");
  }

  @Override
  public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/chat").withSockJS();
  }
}

Spring Controller UploadController.java

package us.com.liberty.controller;

@RestController
@SessionAttributes("file")
@RequestMapping("/")
public class UploadController {
    
      @MessageMapping("/chat")
      @SendTo("/topic/message")
      public String sendMessage(String message) {
        return "Successful";
      }
}

但是当我单击以加载页面时，出现以下错误。

sockjs.min.js:27 POST http://10.119.65.194/Liberty/GPP/api/chat/525/2sjtlk5h/xhr_send 404 (404)

下面是Web控制台上的日志

stomp.min.js:8 opening Web Socket...
stomp.min.js:8 Web Socket Opened...
stomp.min.js:8 >>> CONNECT
accept-version:1.1,1.0
heart-beat:10000,10000

Whoops! Lost connection to undefined

如果有人使用Sock.js和Stomp实现了WebSocket，请提供帮助。我试图在线检查任何解决方案，但是都找不到。