I'm trying to send consumed Kafka data to frontend (JavaScript) via Spring-Websockets in a Spring MVC project.
To establish the communication between the server and client, I have the following.
Client (app.js)
function connect() {
var socket = new SockJS('/kafka-data-websocket');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
stompClient.send("/app/fetchData");
stompClient.subscribe('/data/records', function (message) {
console.log(JSON.parse(message.body).content);
});
});
}
Server (KafkaController.java)
#Controller
public class KafkaController {
#MessageMapping("/fetchData")
#SendTo("/data/records")
public String fetchMetrics() {
//...
}
}
To consume data from a specific Kafka topic I'm using #KafkaListener annotation as follows:
public class KafkaReceiver {
#KafkaListener(topics = "mytopic")
public void receive(ConsumerRecord<?, ?> record) {
MyRecord m = new MyRecord(new Long(record.offset()), record.key().toString(), record.value().toString());
//...
}
}
And I have a proper KafkaConfig class with all the necessary beans (like explained here).
How can I send data from receive method to KafkaController's fetchMetrics (and consequently to the websocket) on each incoming/consumed message?
You should inject SimpMessagingTemplate into the KafkaReceiver and use it from the receive() method:
this.template.convertAndSend("/data/records", m);
See more info in the Spring Framework Reference Manual.
Related
I try to build a chat application with HTML,JS,CSS with the libraries STOMPJS and SOCKJS as the frontend and Spring Boot as backend.
My connect code in the frontend looks like this:
function connect() {
var socket = new SockJS("http://localhost:8080/chat");
stompClient = Stomp.over(socket);
stompClient.connect(
{},
function (frame) {
console.log("2");
setConnected(true);
console.log("Connected: " + frame);
stompClient.subscribe("/topic/messages", function (messageOutput) {
showMessageOutput(JSON.parse(messageOutput.body));
});
},
console.log("error")
);
}
As far as I know is the connect function of STOMPJS like this: headers, connectCallback, errorCallback.
It never reach the console.log "2" and it gives me the console.log "error" back.
I activated CORS like this in my backend with setAllowedOriginPatterns("*") in my Spring Boot application:
#Configuration
#EnableWebSocketMessageBroker
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");
registry.addEndpoint("/chat").setAllowedOriginPatterns("*").withSockJS();
}
}
And the controller looks like this:
#Controller
public class MController {
#MessageMapping("/chat")
#SendTo("/topic/messages")
public OutputMessage send(Message message) throws Exception {
String time = new SimpleDateFormat("HH:mm").format(new Date());
return new OutputMessage(message.getFrom(), message.getText(), time);
}
}
In the screenshot you can see the console.log when I execute the function "connect":
I checked all the documentation of SockJS and StompJS but I couldn't find a solution.
Thank you very much for your answer in advance. :)
I'm hosting a SignalR Hub on Windows Server 2012 with IIS as an ASP.NET Web application that I've tested successfully on my local machine. But when I publish and try to connect from a Angular application the server responds with 403 Forbidden on the /negotiate request. The Angular application is located on a different domain then the Hub server.
I've read that this is caused by a CORS issue, but I've tried every solution I can find without any change. Can it be a IIS server issue or have I missed something in my code?
The route being called is https://example.com/signalr/negotiate
SignalR Server:
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.Map("/signalr", map =>
{
map.UseCors(CorsOptions.AllowAll);
var hubConfiguration = new HubConfiguration
{
EnableJSONP = true,
EnableDetailedErrors = true
};
map.RunSignalR(hubConfiguration);
});
}
}
// Hub that handles Online user list
public class OnlineHub : Hub
{
private static List<AppUserDto> _usersOnline = new List<AppUserDto>();
public OnlineHub()
{
// Automapper Setup
MappingConfig.Init();
}
public override Task OnConnected()
{
var user = GetUser();
_usersOnline.Add(user);
Clients.All.listUpdated(_usersOnline);
return base.OnConnected();
}
public override Task OnReconnected()
{
var user = GetUser();
// Add user to list of online users if it doesn't exist
if (!_usersOnline.Any(u => u.Email == user.Email))
{
_usersOnline.Add(user);
Clients.All.listUpdated(_usersOnline);
}
return base.OnReconnected();
}
public override Task OnDisconnected(bool stopCalled)
{
var user = GetUser();
if (!_usersOnline.Any(u => u.Email == user.Email))
{
// Remove user from list of online users
_usersOnline.Remove(user);
Clients.All.listUpdated(_usersOnline);
}
return base.OnDisconnected(stopCalled);
}
private AppUserDto GetUser()
{
using (var db = new EntityDbContext())
{
// Get connected AppUserDto
var user = db.AppUsers.FirstOrDefault(u => u.UserName == Context.User.Identity.Name);
// Add user to list of online users
if (user != null)
{
return Mapper.Map<AppUserDto>(user);
}
return null;
}
}
}
Angular Application SignalR Service
import { AppSettings } from './../app.settings';
import { EventEmitter, Injectable } from '#angular/core';
declare const $: any;
#Injectable()
export class SignalRService {
// Declare the variables
private proxy: any;
private connection: any;
private authData: any;
// create the Event Emitter
public messageReceived: EventEmitter<any>;
public connectionEstablished: EventEmitter<Boolean>;
public connectionExists: Boolean;
constructor(private appSettings: AppSettings) {
// Setup
this.connectionEstablished = new EventEmitter<Boolean>();
this.messageReceived = new EventEmitter<any>();
this.connectionExists = false;
}
public initialize(proxyName: string): void {
this.connection = $.hubConnection(this.appSettings.SIGNALR_BASE_URL);
this.proxy = this.connection.createHubProxy(proxyName);
this.registerOnServerEvents();
this.startConnection();
}
private startConnection(): void {
this.connection.start({withCredentials: false})
.done((data: any) => {
console.log('SignalR Connected with: ' + data.transport.name);
this.connectionEstablished.emit(true);
this.connectionExists = true;
})
.fail((error: any) => {
console.log('SignalR could not connect: ' + error);
this.connectionEstablished.emit(false);
});
}
private registerOnServerEvents() {
this.proxy.on('listUpdated', (list: any) => {
console.log(list);
this.messageReceived.emit(list);
});
}
}
initialize(proxyName) gets called from a controller to start a connection to the Hub.
UPDATE
I've tried to rebuild the server and Hub using .NET Core 2.0, but when I test that on the IIS server I get:
"Failed to load https://signalr.example.com/online/negotiate: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access."
So it's still a CORS issue even though I've setup everything just as multiple guides have done.
I've had issues in the past where the api path you are trying to hit is actually a virtual directory, and then IIS returns you a 403 because it thinks you are trying to view / access that directory instead of the webAPI route.
GET api/negotiate will 403 if you have the directory api/negotiate on your server.
This will be the case if you WebApiController is located in your project in a directory like:
/api/negotiate/NegotiateApiController.cs
You can resolve this very easily if that's the case by either changing the route or the directory name.
Note: This will come back as a 405 on some browsers.
I have a regular running job which is registered into an OWIN host app, I took the project of stock ticker broadcasting app as a reference, and I want to make that job like the stock ticker class which is being able to broadcast data to a JavaScript client.
however, after i followed the example, and set everything right, some weird problem happened and I couldn't figure out why.
(1) the traffic will automatically downgrade to long polling, instead of using server send event like the stock ticker did.
(2) I have called a dynamic method at server side, and defined that method at client side, but it never got called
this is my server side hub definition
[HubName("healthCheckHub")]
public class HealthCheckHub : Hub
{
private readonly PublicVendorCloudHealthJob _healthCheckjob;
public HealthCheckHub()
{
this._healthCheckjob = PublicVendorCloudHealthJob.Instance;
}
public IEnumerable<HealthCheckItemResponse> GetAllHealthCheckResponses()
{
return this._healthCheckjob.GetAllHealthCheckResponses();
}
}
this is my Job class implementation
public class PublicVendorCloudHealthJob : SkyJobGrain, IPublicVendorCloudHealthJob
{
private readonly ConcurrentBag<HealthCheckItemResponse> _response;
private static IConfiguration _configuration;
private static IDeploymentElevator _deploymentElevator;
private static IItineraryElevator _itineraryElevator;
private static IResourceElevator _resourceElevator;
public PublicVendorCloudHealthJob(IConfiguration configuration, IDeploymentElevator deploymentElevator, IItineraryElevator itineraryElevator, IResourceElevator resourceElevator)
: base(configuration, deploymentElevator, itineraryElevator, resourceElevator)
{
this.Clients = GlobalHost.ConnectionManager.GetHubContext<HealthCheckHub>().Clients;
_configuration = configuration;
_deploymentElevator = deploymentElevator;
_itineraryElevator = itineraryElevator;
_resourceElevator = resourceElevator;
this._response = new ConcurrentBag<HealthCheckItemResponse>
{
new HealthCheckItemResponse
{
Description = "Larissa test"
}
};
}
public override Task Execute(object obj)
{
this.Clients.All.publishHealthChecks("Larissa" + DateTime.UtcNow);
return TaskDone.Done;
}
public static PublicVendorCloudHealthJob Instance => (PublicVendorCloudHealthJob)Activator.CreateInstance(typeof(PublicVendorCloudHealthJob), _configuration, _deploymentElevator, _itineraryElevator, _resourceElevator);
public IEnumerable<HealthCheckItemResponse> GetAllHealthCheckResponses()
{
return this._response;
}
private IHubConnectionContext<dynamic> Clients { get; }
}
I also configure the hub in Owin startup.cs file like this
app.UseCors(CorsOptions.AllowAll);
GlobalHost.Configuration.KeepAlive = null;
GlobalHost.Configuration.TransportConnectTimeout = TimeSpan.FromSeconds(5);
app.MapSignalR();
for the JS client side, after I get the generated proxy, i did sth like this
signalrService.signalr().then((value) => {
if (value === "success"){
const healthCheckHub = $.connection.healthCheckHub;
const healthCheckHub2 = $.connection.hub.proxies.healthcheckhub;
healthCheckHub.client.publishHealthChecks = (data) => {
console.log(data);
};
healthCheckHub2.client.publishHealthChecks = (data) => {
console.log(data);
};
$.connection.hub.logging = true;
$.connection.hub.start().done(() => {
const defaultData = healthCheckHub.server.getAllHealthCheckResponses();
console.log(defaultData);
});
}
});
really need some help, It's been taking me for about one week to figure this out, thanks in advanced
P.S.
the things i m using is listed below
(1) Chrome v.51
(2) SingalR.core v.2.2.0
(3) Owin
I am new in AngularJS as well as FullStack development. The architecture of my current app is already set up and should not change preferably (for security reasons). So far, I can emit messages to the server using angular-websocket-service. Here is the code snippet of the service from the front-end:
proxiMiamApp.service('WebSocketService', function ($websocket) {
var wsEndpoint = {};
this.openWsEndpoint = function () {
wsEndpoint = $websocket.connect("ws://localhost:9000/proximiamHandler");
console.log(wsEndpoint);
return wsEndpoint;
}
this.sendMessage = function(){
if($.isEmptyObject(this.wsEndpoint)){
this.openWsEndpoint();
}
eventUser = {
idEvent : '1',
idUser : '49'
};
wsEndpoint.register('/eventUser', function(){
console.log('Register OK!');
});
console.log('Ready!');
wsEndpoint.emit('/eventUser',eventUser);
}});
As for the back-end, I am using an implementation of the WebSocketHandler interface:
#Controller
public class ProximiamHandler implements WebSocketHandler {
#Override
public void afterConnectionEstablished(WebSocketSession webSocketSession) throws Exception {
System.out.println("afterConntectionEstablished called");
}
#Override
public void handleMessage(WebSocketSession webSocketSession, WebSocketMessage<?> webSocketMessage) throws Exception {
System.out.println("handleMessage called");
// My code here...
}
#Override
public void handleTransportError(WebSocketSession webSocketSession, Throwable throwable) throws Exception {
System.out.println("handleTransportError called");
}
#Override
public void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus closeStatus) throws Exception {
System.out.println("afterConnectionClosed called");
}
#Override
public boolean supportsPartialMessages() {
return true;
}}
The Implementation of the WebSocketHandler is called via Spring WebSocketConfigurer
#Configuration
#EnableWebSocket
#Controller
public class WebSocketConfig implements WebSocketConfigurer {
#Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(myHandler(), "/proximiamHandler").setAllowedOrigins("*");
}
#Bean
public WebSocketHandler myHandler() {
return new ProximiamHandler();
}}
My questions are:
Can I notify subscribed clients using this architecture?
If yes, how can I do it?
Is there a way to return something to subscribed clients from the server? (an Object or a String for instance)
Thanks in advance for your help
Can I notify subscribed clients using this architecture?
=> Yes.
If yes, how can I do it?
=> Based on the Spring web socket APIs, you have to retain the ' WebSocketSession' passed to you via "afterConnectionEstablished" callback.
Use the sendMessage() API of Web socket session to send notifications to client.
Is there a way to return something to subscribed clients from the server? (an Object or a String for instance)
=> You can format your data in either JSON or XML & wrap it using "WebSocketMessage" and pass it to client.
I never worked on spring, however, I am answering this based on my knowledge on web socket. See if it helps.
I work on webapp and can't find solution or example of my problem.
I use AngularJS, RestServis and JavaEE . My problem is how to send inherited object with superObject
In java I have two classes:
public class User{
protected String userName;
protected String userSurename;
..
..
}
Second class is a subclass
public class Worker extends User{
protected int idWorker;
protected String position;
..
..
}
in Angular controller I have
$scope.user = {
userName : "jon" ,
userSurename :"dep" }
$scope.worker= {
idWorker: 88 ,
position: "seller" }
and I use http protocol to send data on server side like this
this.saveWorker = function(worker) {
return $http({
method:'post',
url:this.apiBasicUrl,
contentType: "application/json",
data: worker
});
};
How in Angular in data to put one object and on Java side get worker object with user data also ? Can I , object like in java , make in angular with inherited ?
On Angular side, I suggest using $resource for communication with REST API:
var Worker = $resource('/worker/:workerId', {workerId:'#id'});
//get
var worker = Worker.get({workerId:123}, function() {
worker.abc = true;
//save
worker.$save();
});
On server side you should have a REST endpoint that is supposed to pick up these objects:
#Path("/worker")
public class WorkerService {
#GET
#Path("{workerId}")
public Worker getWorker(#PathParm("workerId") Integer workerId) {
//implement
}
#POST
public void saveWorker(Worker worker) {
//implement
}
}
This might not work out of the box. You will most likely need Jackson provider to enable REST to "translate" JSON into Java objects.
See this example: http://www.mkyong.com/webservices/jax-rs/json-example-with-jersey-jackson/