Веб-розетки с AngularJS и Spring Boot - PullRequest
0 голосов
/ 23 января 2019

Я пытаюсь собрать простой пример приложения WebSocket, в котором используются AngularJS и Spring Boot.Я использую эту библиотеку angularjs websocket

Проблема в том, что я не могу отправить что-либо с клиента на сервер.На входе нет ошибок, и ничего не записано, на входе нет ошибок.

Конфигурация 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);
    }

}

Реализация углового клиента:

'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");

});

1 Ответ

0 голосов
/ 23 января 2019
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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...