java - 使用 AngularJS 和 Spring Boot 的 Websocket

Question

我正在尝试构建一个使用 AngularJS 和 Spring Boot 的简单示例 WebSocket 应用程序。我正在使用this angularjs websocket library

问题是我无法从客户端向服务器发送任何内容。前端没有错误，后端也没有记录任何错误。

Websocket 配置:

package org.example.project;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration implements 
WebSocketMessageBrokerConfigurer {

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

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

}

Websocket端点实现:

package org.example.project;

import java.util.Date;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

@Controller
public class WebSocketController {

    private final SimpMessagingTemplate template;

    @Autowired
    WebSocketController(SimpMessagingTemplate template) {
        this.template = template;
    }

    @MessageMapping("/uc/status/request")
    public void onReceivedMessage(String message) {

        System.out.println(" THIS CAME FROM WS CLIENT ");
        this.template.convertAndSend("/uc/status/report", 
            "received " + message);
    }

}

Angular 客户端实现:

'use strict'

var app = angular.module('app', [
    'ngWebSocket'
])
app.controller("MyController", function($scope, $http, $websocket) {

    // path to the end point is actually /app/uc/status/request
    // unable to add end point path when connecting
    // and don't know how to subscribe
    var ws = $websocket('ws://localhost:8080/socket/websocket/');

    ws.onMessage(function(event) { 
        console.log('message: ', event);
    });

    ws.onError(function(event) {
        console.log("error");
    });

    ws.onClose(function(event) { 

    });

    ws.onOpen(function(event) { 
        console.log('connection open');
    });

    // nothing happens when this call is made
    ws.send("message content", "/app/uc/status/request");

});

Answer 1

this.template.convertAndSend("/uc/status/report", 
    "received " + message);

您的目的地(第一个参数)错误。您使用目标前缀 /report 注册了代理 channel ，因此您必须发布/订阅此类目标前缀。所以改成

this.template.convertAndSend("/report", 
    "received " + message);

前端客户端订阅并发送到特定目的地

// sorry I dont work with angular below is mostly copied.
connect() {
  const socket = new SockJS('/socket');
  this.stompClient = Stomp.over(socket);

  const _this = this;
  this.stompClient.connect({}, function (frame) {
    _this.stompClient.subscribe('/report', function (data) {
      // do something with received data
    });
  });
}
// send message to destination
send() {
  this.stompClient.send(
    '/app/uc/status/request', // roughly put, ur applicationDestinationPrefix + @MessageMapping
    {},
    "my message"
  );
}

根据您的应用程序需求，您可以在 /report 之后添加任何您想要的路径，例如 /report/myreport1、/report/myreport2，用于多个主题或队列。请注意，您在 enableSimpleBroker("/report") 中定义的前缀在命名意义上并不重要，因为它适用于 Spring 的内存中消息代理。对于其他专用代理，例如 ActiveMQ 或 RabbitMQ，您应该使用 /topic 进行一对多(多个订阅者)，使用 /queue 进行一对一(一个接收者) 。了解更多 https://docs.spring.io/spring-framework/docs/5.0.0.M1/spring-framework-reference/html/websocket.html