使用 AngularJS 和 Spring Boot 的 Websocket答案

【问题标题】：Websockets with AngularJS and Spring Boot使用 AngularJS 和 Spring Boot 的 Websocket
【发布时间】：2019-06-16 10:13:36
【问题描述】：

我正在尝试组合一个使用 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");

});

【问题讨论】：

标签： java angularjs spring-boot websocket

【解决方案1】：

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

您的目的地（第一个参数）错误。您使用目标前缀/report 注册了您的代理频道，因此您必须发布/订阅这样的目标前缀。所以改成

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

【讨论】：