I've been search high and low, but there's just too little information out there covering this particular topic.
This is part of my server side SignalR Hub:
public class MyHub : Hub
{
private ReplaySubject<string> _stream = new ReplaySubject<string>();
public IObservable<string> Stream()
{
return _stream.AsObservable();
}
public void TriggerTest()
{
return _stream.OnNext("message");
}
}
I successfully connect to the hub and are able to invoke the TriggerTest() method on the server.
The following code on the client, however, is never triggered when _stream receives a new message on the server:
this.socket.stream('Stream').subscribe({
next: (value) => {
console.log('stream response:');
console.log(value);
},
error: (err) => {
console.warn(err);
},
complete: () => {
console.log('stream completed');
}
});
I assume the problem lies on the server, more precisely on the Observable / Subject part, but couldn't find any guidance out there. Any help appreciated! Thanks!
Related
As I understand RSocket-JS supports routing messages using encodeCompositeMetadata and encodeRoute, however, I cannot get the server to accept a fireAndForget message. The server constantly logs the following message:
o.s.m.r.a.support.RSocketMessageHandler : No handler for fireAndForget to ''
This is the server mapping I am trying to trigger:
#Controller
public class MockController {
private static final Logger LOGGER = LoggerFactory.getLogger(MockController.class);
#MessageMapping("fire-and-forget")
public Mono<Void> fireAndForget(MockData mockData) {
LOGGER.info("fireAndForget: {}", mockData);
return Mono.empty();
}
}
This is the TypeScript code that's trying to make the connection:
client.connect().subscribe({
onComplete: socket => {
console.log("Connected to socket!")
socket.fireAndForget({
data: { someData: "Hello world!" },
metadata: encodeCompositeMetadata([[MESSAGE_RSOCKET_ROUTING, encodeRoute("fire-and-forget")]])
});
},
onError: error => console.error(error),
onSubscribe: cancel => {/* call cancel() to abort */ }
});
I've also tried adding the route in other ways (metadata: String.fromCharCode('route'.length)+'route') I found on the internet, but none seem to work.
What do I need to do to format the route in a way that the Spring Boot server recognizes it and can route the message correctly?
Binary only communication when using CompositeMetadata
Please make sure that you have configured your ClientTransport with binary codecs as follows:
new RSocketWebSocketClient(
{
url: 'ws://<host>:<port>'
},
BufferEncoders,
),
Having Binary encoders you will be able to properly send your routes using composite metadata.
Also, please make sure that you have configured metadataMimeType as:
...
const metadataMimeType = MESSAGE_RSOCKET_COMPOSITE_METADATA.string; // message/x.rsocket.composite-metadata.v0
new RSocketClient<Buffer, Buffer>({
setup: {
...
metadataMimeType,
},
transport: new RSocketWebSocketClient(
{
url: 'ws://<host>:<port>',
},
BufferEncoders,
),
});
Note, once you enabled BufferEncoders your JSONSeriallizer will not work and you would need to encode your JSON to binary yours selves ( I suggest doing that since in the future versions we will remove support of Serializers concept completely). Therefore, your request has to be adjusted as it is in the following example:
client.connect().subscribe({
onComplete: socket => {
console.log("Connected to socket!")
socket.fireAndForget({
data: Buffer.from(JSON.stringify({ someData: "Hello world!" })),
metadata: encodeCompositeMetadata([[MESSAGE_RSOCKET_ROUTING, encodeRoute("fire-and-forget")]])
});
},
onError: error => console.error(error),
onSubscribe: cancel => {/* call cancel() to abort */ }
});
Use #Payload annotation for your payload at spring backend
Also, to handle any data from the client and to let Spring know that the specified parameter argument is your incoming request data, you have to annotate it with the #Payload annotation:
#Controller
public class MockController {
private static final Logger LOGGER = LoggerFactory.getLogger(MockController.class);
#MessageMapping("fire-and-forget")
public Mono<Void> fireAndForget(#Payload MockData mockData) {
LOGGER.info("fireAndForget: {}", mockData);
return Mono.empty();
}
}
I am planning to use RSocket for my notifications system. I wanted to use Spring Boot RSocket for my backend (Java) while for my frontend, I will be using Angular using rsocket-js.
I was able to quickly spin-up a request-stream interaction model wherein I can pull-in all the notifications within my system. See code snippet for my backend:
#MessageMapping("streams")
public Flux<Notification> requestStream() {
log.info("Streaming to notifications...");
return streamEventService.retrieveAllNotifications().log();
}
Now on my frontend, I have the following code snippet:
export class RsocketClientService {
// backend ws endpoint
private readonly wsURL = 'ws://localhost:7000/notification';
client: any;
socket: any
constructor() {
this.client = new RSocketClient({
serializers: {
data: JsonSerializer,
metadata: IdentitySerializer
},
setup: {
keepAlive: 10000,
lifetime: 180000,
dataMimeType: 'application/json',
metadataMimeType: 'message/x.rsocket.routing.v0',
payload: {
data: 23
}
},
transport: new RSocketWebSocketClient({
url: this.wsURL
}),
responder: new EchoResponder()
});
}
public connect() {
console.log("initializeSocket...")
this.client.connect().subscribe({
onComplete: (socket: any) => {
this.socket = socket;
this.socket.connectionStatus().subscribe( (status: any) => {
console.log("Connection status? ", status);
});
},
onError: (error: any) => {
console.error("Connection onError? " + error);
},
onSubscribe: (cancel: any) => {
console.log("Connection onSubscribe? cancel?");
}
});
}
public retrieveNotifications() {
this.socket.requestStream({
data: null,
metadata: String.fromCharCode('streams'.length) + 'streams'
})
.subscribe({
onComplete: () => {
console.log("onComplete?");
},
onError: (error: any) => {
console.error("onError? error: " + error);
},
onNext: (payload: any) => {
console.log("onNext? payload: ", payload);
},
onSubscribe: (subscription: any) => {
console.log("onSubscribe?");
subscription.request(1000000);
},
});
}
I have a button in the UI that if clicked will call the method retrieveNotifications which will subscribe to the rsocket message mapping method in my backend requestStream.
Everything is working fine and I could see my responses coming in. Now my question would be, what if on my server there is a new data inserted into the database for example, then how can I send a notification message from my backend server to the frontend saying that "Hey! new data was pushed into the database." I am kind of stuck on how the server will be able to use a somehow fire and forget to the client side.
You want to server-side send request to client-side when connect established.
You can get this connect's RSocketRequester from server then using it create one of four method(FNF, Request-reponse, request-stream, stream-stream) to send request to client.
In client-side, you can receive data in EchoResponder class in one of four method above.
It looks like you need to create a new controller function that returns a void and when you insert an object in the DB you pass that object to the front end from this function and in angular you connect to it as you did up...try to check this link for fire and forget approach ... hope this helps https://www.baeldung.com/spring-boot-rsocket
I am trying to integrate socket.io with strapi. But unfortunately I have been unable to do so without any proper tutorial or documentation covering this aspect.
I followed along with the only resource I found online which is:
https://medium.com/strapi/strapi-socket-io-a9c856e915a6
But I think the article is outdated. I can't seem to run the code mentioned in it without running into tonnes of errors.
Below is my attempt to implement it and I have been trying to connect it through a chrome websocket plugin smart websocket client But I am not getting any response when I try to run the server.
I'm totally in the dark. Any help will be appreciated
module.exports = ()=> {
// import socket io
var io = require('socket.io')(strapi.server)
console.log(strapi.server) //undefined
// listen for user connection
io.on('connect', socket => {
socket.send('Hello!');
console.log("idit")
// or with emit() and custom event names
socket.emit('greetings', 'Hey!', { 'ms': 'jane' }, Buffer.from([4, 3, 3, 1]));
// handle the event sent with socket.send()
socket.on('message', (data) => {
console.log(data);
});
// handle the event sent with socket.emit()
socket.on('salutations', (elem1, elem2, elem3) => {
console.log(elem1, elem2, elem3);
});
});
};
So I found the solution. Yay. I'll put it here just in case anybody needs it.
boostrap.js
module.exports = async () => {
process.nextTick(() =>{
var io = require('socket.io')(strapi.server);
io.on('connection', async function(socket) {
console.log(`a user connected`)
// send message on user connection
socket.emit('hello', JSON.stringify({message: await strapi.services.profile.update({"posted_by"})}));
// listen for user diconnect
socket.on('disconnect', () =>{
console.log('a user disconnected')
});
});
strapi.io = io; // register socket io inside strapi main object to use it globally anywhere
})
};
Found this at: https://github.com/strapi/strapi/issues/5869#issuecomment-619508153_
Apparently, socket.server is not available when the server starts. So you have to make use of process.nextTick that waits for the socket.server to initialize.
I'll also add a few questions that I faced when setting this up.
How do i connect from an external client like nuxt,vue or react?
You just have to connect through "http://localhost:1337" that is my usual address for strapi.
I am using nuxt as my client side and this is how set up my socketio on the client side
I first installed nuxt-socket-io through npm
Edited the nuxt.config file as per it's documention
modules:[
...
'nuxt-socket-io',
...
],
io: {
// module options
sockets: [
{
name: 'main',
url: 'http://localhost:1337',
},
],
},
And then i finally added a listener in one of my pages.
created() {
this.socket = this.$nuxtSocket({})
this.socket.on('hello', (msg, cb) => {
console.log('SOCKET HI')
console.log(msg)
})
},
And it works.
A clean way to integrate third-party services into Strapi is to use hooks. They are loaded once during the server boot. In this case, we will create a local hook.
The following example has worked with strapi#3.6.
Create a hook for socket.io at ./hooks/socket.io/index.js
module.exports = strapi => {
return {
async initialize() {
const ioServer = require('socket.io')(strapi.server, {
cors: {
origin: process.env['FRONT_APP_URL'],
methods: ['GET', 'POST'],
/* ...other cors options */
}
})
ioServer.on('connection', function(socket) {
socket.emit('hello', `Welcome ${socket.id}`)
})
/* HANDLE CLIENT SOCKET LOGIC HERE */
// store the server.io instance to global var to use elsewhere
strapi.services.ioServer = ioServer
},
}
}
Enable the new hook in order for Strapi to load it - ./config/hook.js
module.exports = {
settings: {
'socket.io': {
enabled: true,
},
},
};
That's done. You can access the websocket server inside ./config/functions/bootstrap.js or models' lifecycle hooks.
// ./api/employee/models/employee.js
module.exports = {
lifecycles: {
async afterUpdate(result, params, data) {
strapi.services.ioServer.emit('update:employee', result)
},
},
};
For those who are looking the answer using Strapi version 4
var io = require("socket.io")(strapi.server.httpServer)
We have a working demo between React and Spring Boot Data Geode using rSocket for fire & forget, request response and request stream but when we try and use request channel we get error:
org.springframework.messaging.MessageDeliveryException: Destination 'quotes' does not support REQUEST_CHANNEL. Supported interaction(s): [REQUEST_STREAM]
So far on web it looks like this ought to be possible from RSocket Git
It's a simple spring boot app with #Controller endpoints that run over rSocket like this:
#Controller
public class RSocketController {
private static final Logger log = LogManager.getLogger(RSocketController.class);
#Autowired
PriceService priceService;
#MessageMapping(value = "quotes")
public Flux<Quote> getQuotes() {
log.info("In getQuotes");
return priceService.generatePrices();
}
}
The generatePrices returns a Flux of prices which works fine in request stream but we would prefer to use request channel for bi-directional comms.
Client versions
"rsocket-core": "0.0.19"
"rsocket-flowable": "0.0.14"
"rsocket-tcp-client": "0.0.19"
"rsocket-websocket-client": "0.0.19"
Client code
const transport = new RSocketWebSocketClient(transportOptions);
const rSocketClient = new RSocketClient({serializers, setup, transport});
rSocketClient.connect().subscribe({
onComplete: socket => {
console.log('Client connected to the RSocket Server');
socket.requestChannel(Flowable.just({
data: 'foyss',
metadata: String.fromCharCode(6) + 'quotes'
})).subscribe({
onComplete: function() {
console.log(`Channel received end of server stream`);
},
onError: function(err) {
console.log("err", err);
},
onNext: payload => {
console.log(payload);
},
onSubscribe: function(subscription) {
console.log("got subscription");
subscription.request(0x7fffffff);
},
onError: error => {
console.log(error);
},
onSubscribe: cancel => {
console.log('onSubscribe cancel');
}})
},
onError: error => {
console.log(error);
},
onSubscribe: cancel => {
// console.log(cancel);
console.log('onSubscribe cancel');
}
})
Some JS libraries still don't support the request-channel model. Please check the official documentation for your JS lib, eg, for: https://www.npmjs.com/package/ng-rsocket-rxjs
Missing:
Lease Handling
Server Setup
Resume Support
Request Channel
.....
I have done a lot of research online but can't find the solution. I have created a SignalR hub on the WebAPI backend and enabled the CORS feature.
I also have a client (Ionic) app try to connect to the SignalR hub for real-time chat. The problem is that when the Hybrid app tries to connect to the SignalR hub, I am getting
The ConnectionId is in the incorrect format.
I am getting OnDisconnected Event on the SignalR Hub BUT not the OnConnected Event!
This is my client code (ionic):
localhost:64965/signalr is my SignalR hub
SignalR Proxy also generated on localhost:64965/signalr/hubs
var signalr_chatHub = $.connection.ChatHub;
signalr_chatHub.client.welcomeMessage = function (message) {
console.log('WelcomeMessage', message);
};
$.connection.hub.url = "http://localhost:64965/signalr";
$.connection.hub.logging = true;
$.connection.hub.start().done(function () {
console.log('signal connection connected');
}).fail(function (err) {
console.log('Could not Connect!', err);
});
Chrome Console Errors:
public class ChatHub : Hub<IChat>
{
public override Task OnConnected()
{
var connectionId = Context.ConnectionId;
return base.OnConnected();
}
public override Task OnDisconnected(bool stopCalled)
{
var connectionId = Context.ConnectionId;
return base.OnDisconnected(stopCalled);
}
public override Task OnReconnected()
{
return base.OnReconnected();
}
public void WelcomeMessage()
{
Clients.All.NewMessage("Welcome");
}
}
Cordova by any chance?
The reason this happens is because ripple creates a "cross domain proxy", this grabs all generated uri's from signalR and incorrectly encodes parts.
fix is: set ripple, settings => cross domain proxy to "disabled"
below is an example of a proxied request, note the http%3a8080...:
http://localhost:4400/ripple/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//localhost%3A8080/signalr/start%3Ftransport%3DwebSockets%26clientProtocol%3D1.5%26connectionToken%3DAQAAANCMnd8BFdERjHoAwE%252FCl%252BsBAAAA7b4HHv1ZFkq9Xe5qXnUfYwAAAAACAAAAAAAQZgAAAAEAACAAAACU%252BVDaQ6ENxgEPcm8Tjmr39SnBszhmBjUib5UoPoXKxgAAAAAOgAAAAAIAACAAAADoJqphu6%252BQ48B4d6J6QxbK%252FqKemI3%252FJiDfnCJRKtDMuDAAAACd3g9DsBiiG3CFNcDf0maC534kevbjNczDyFFCNSHeZB%252BNfX%252FkAXX74kYLEEUeqYNAAAAAvtEsnhNjbThhsJd0L7EN%252FNsTuK7M3ijALDGtP161hI2iobBj7%252FcItg%252FQmADPDOWlKIl7SgsRXU1dLXoOumpv%252Fw%253D%253D%26connectionData%3D%255B%257B%2522name%2522%253A%2522myhub%2522%257D%255D%26_%3D1494802918927
This bug took 5 hours of my life, damn them tiny hippos.