socket url and authentication | Novu | Page 1

stark vessel Dec 21, 2022, 4:00 PM

#

Hello, i have problems with socket connection.
How should the url look like and where can i get token ? from source code i see it tries to match subscriber id, but i cannot see it anywhere.

im not using react or angular.

stark vessel Dec 21, 2022, 4:50 PM

#

after an hour i finally found where the JWT token is created
https://github.com/novuhq/novu/blob/7235e410366e0897ed3f44cc8974f62f5ff56044/libs/testing/src/user.session.ts#L147

now how to make the socket connection 🤔
EDIT: doesnt work, so digging more

gilded kindle Dec 21, 2022, 5:27 PM

#

Hi @stark vessel the token for the socket service is created automaticaly and available either behind the scene with the iframe embed or by using the react component: by using the useSocket hook: https://docs.novu.co/notification-center/react-components#realtime-sockets

stark vessel Dec 21, 2022, 5:28 PM

#

im using flutter, so i cant use any of your SDKs.
is there a way to expose it on my end ? i was looking at api documentation and the authentication is missing.

#

i managed to find the correct call

final response = await http.post(
      Uri.parse('http://10.0.2.2:4500/widgets/session/initialize'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
        'Authorization': 'ApiKey apikey',
      },
      body: jsonEncode(<String, dynamic>{
        'applicationIdentifier': 'appId',
        'subscriberId': 'id',
      }),
    );

but its taking like a minute and i get empty body

gilded kindle Dec 21, 2022, 5:33 PM

#

I can try to create a small guide for you, but not sure would be able to do it. Basically you need to reverse how the react component initialize a session.

#

I can write something tomorrow ish

stark vessel Dec 21, 2022, 5:42 PM

#

exactly, it would be nice to "split" it for the future
That would be amazing if you could do that!

we decided loong ago for flutter (cross platform) and mashing in somehow js to have notifications is iffy to me.

if i get session and proper example of websockets url, then it should be fine right?

plan is:
socket to get unread notifications (just count)
then fetch notifications (separate page upon clicking)
then the whole functionality when on page and active notification -> read, onclick etc..

gilded kindle Dec 25, 2022, 11:43 AM

#

Hi, sorry in a crazy few days, have it on my todo list. will update asap 🙏

stark vessel Dec 29, 2022, 4:44 PM

#

Hello @gilded kindle when could i expect an update? 🙂

stoic hollow Dec 29, 2022, 4:47 PM

#

@stark vessel I see that the URL that you are hitting is missing the /v1 prefix, could you try with that?

#

like: http://10.0.2.2:3000/v1/widgets/session/initialize

#

then using that token you can initialize the socket connection

stark vessel Dec 29, 2022, 4:48 PM

#

I can try with v1, but what is the socket url? Ws://localhost:3002 isnt working and how to pass authentication?

stoic hollow Dec 29, 2022, 4:51 PM

#

the default API port is 3000 and WS 3002

#

to create to socket connection in web app we do use the socket.io-client library, and the URL passed looks like this: http://localhost:3002 so it starts with http

#

then it's switched to ws

#

const socket = io(socketUrl, {
  reconnectionDelayMax: 10000,
  transports: ['websocket'],
  auth: {
     token: `${token}`,
  },
});

stark vessel Dec 29, 2022, 9:56 PM

#

Thanks! ill try that, im using https://pub.dev/packages/web_socket_channel so hopefully i can find the correct way of setting params

Dart packages

web_socket_channel | Dart Package

StreamChannel wrappers for WebSockets. Provides a cross-platform WebSocketChannel API, a cross-platform implementation of that API that communicates over an underlying StreamChannel.

#

ill try it next year, im a bit swamped with relations hehe

stoic hollow Dec 30, 2022, 4:55 PM

#

sure, let me know if anything needed 😉

distant moon Jan 2, 2023, 6:36 AM

#

Hi, we also use Flutter and want to try Novu. @stark vessel Do you plan to share your progress on integrating Note into Flutter in some public repo?

stark vessel Jan 2, 2023, 10:17 AM

#

Ill try to make it work today, hit me up in dms maybe we can find something together

stark vessel Jan 2, 2023, 1:26 PM

#

@stoic hollow Hello! can you show me network url you send for socket? i have option to pass in token in url query param and dont see in docker that the url was hit.. no log whatsoever, just that nest is initialized

WebSocketChannelException: WebSocketChannelException: HttpException: Connection closed before full header was received, uri = http://localhost:3002/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVC...

stark vessel Jan 2, 2023, 2:06 PM

#

seems like socket.io isnt really socket server, just acts like it. thats why websocketchannel doesnt work, because its proper. Nice that i found the issue. BUT this is really weird, because of this i have to have two socket clients.

magic flaxBOT Jan 2, 2023, 2:06 PM

#

@stark vessel, you just advanced to level 3!

topaz temple Jan 5, 2023, 5:44 AM

#

trying to find more info about novu + flutter/dart -- curious if there ended up being any guides or notes written up about using the feed API with flutter? i couldn't find a lot of information about how to use the API if not using one of the premade components like react, etc.

stark vessel Jan 5, 2023, 1:08 PM

#

topaz temple trying to find more info about novu + flutter/dart -- curious if there ended up ...

Another one, now its just not me 🙂 there is no flutter guide, api reference is your friend, socketio client needed, websocketchannel doesnt work. You need to scout sourcecode

#

final response = await http.post(
      Uri.parse('http://localhost:3000/v1/widgets/session/initialize'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
        'Authorization': 'ApiKey x',
      },
      body: jsonEncode(<String, dynamic>{
        'applicationIdentifier': 'x',
        'subscriberId': 'x',
      }),
    );
    NovuSession session = NovuSession.fromJson(jsonDecode(response.body));
    print('RESPONSE');
    print(session.data?.token);

    IO.Socket socket = IO.io(
      'http://localhost:3002/?token=${session.data?.token}',
      IO.OptionBuilder().setReconnectionDelayMax(10000).setTransports(['websocket']).build(),
    );
    socket.onConnect((_) {
      print('connected');
    });

    socket.onConnectError((data) => print(data));
    socket.on('unseen_count_changed', (data) => print('unseen_count_changed $data'));
    socket.onDisconnect((_) => print('disconnect'));

Flutter example for socket

topaz temple Jan 5, 2023, 3:39 PM

#

thank you!

topaz temple Jan 6, 2023, 1:42 AM

#

really appreciate the example! still looking at source code and trying to make sure understand the workflow. curious about the use of the API key for authorization in the headers -- isn't the API key supposed to be secret and not available on the client?

#

(i know the app identifier can be exposed in the client, but i thought API key is secret and for backend only)

faint zodiac Jan 6, 2023, 6:06 AM

#

Yes @topaz temple API secret is for backend only

topaz temple Jan 7, 2023, 12:24 AM

#

so this call should use a session token only, not an api secret?

faint zodiac Jan 7, 2023, 5:16 AM

#

<@&943775970421264404> Can you please help?

native linden Jan 7, 2023, 5:17 AM

#

The api key needs to be keept secret

#socket url and authentication