Sendbird UIKit: subscribe for new messages for user?

SendBird Chat UIKit JavaScript
#1

Hi, how do I subscribe for new messages/channels for a user?
Got a custom chat list, with a last message preview (but data for this list goes from a custom API, which also attaches information about users from our DB). Need to maintain its state in real time. Re-fetching a full list wouldn’t be nice, I guess.

Docs are pretty poor on UIKit components, context, props etc. An example on that would be great.

UIKit v1.1.2

Thanks!

#2

Hi @Dmytro

Apologies about the docs - we understand that docs are the most important part of any library - we are working on improving them. As a first step, we have made a bunch of examples on various use cases for UIKit. You can find them here

I recommend you to follow the pattern from https://github.com/sendbird/SendBird-JavaScript/tree/master/uikit-samples#2-5-customizing-messageinput

Using withSendBird HOC to access SDK to your custom component
And from there, use the SDK instance and use event handlers to listen to events


import React, { useEffect } from "react";
import { sendBirdSelectors, withSendBird } from "sendbird-uikit";

const CustomComponent = (props) => {
  const {sdk} = props;
  useEffect(() => {
    var ChannelHandler = new sb.ChannelHandler();
    ChannelHandler.onMessageReceived = function(channel, message) {
      // your custom logic
    };
    sb.addChannelHandler(UNIQUE_HANDLER_ID, ChannelHandler);
    return () => {
      // cleanup
      sb.removeChannelHandler(UNIQUE_HANDLER_ID);
    }
  }, [sdk])
  return (
    <div />
  )
}

const mapStoreToProps = store => {
  const sdk = sendBirdSelectors.getSdk(store);
  return {
    sdk,
  };
};

export default withSendBird(CustomComponent, mapStoreToProps);

^^ If this didnt help, please let me know

#3

Hi, thanks, checking this out.

How do I get chat list up-to-date in real time? Apply some filters? I think it’s better to use built-in SDK now, and request additional data (like on users data) when chat list is fetched first time or changed (messages, new channels).

#4

Also, issue is to meet all requirements I fetch full chat list (have advanced search, pinned chats where pins are stored on our side — didn’t see if you have that feature now). And it complicates things a bit :slight_smile:

#5

By chatlist you mean <ChannelList />? Or <Channel />?

(Edit - Your use case seems a bit complicated to discuss over a forum, in the meantime, I will see if I can get someone from sales/customer success to connect with you)

#6

Yes, I meant channel list.

#7

@Dmytro
This is Eric from solutions engineering team.

I would like to understand your use case better.
Could you share some example service (application/website) that provide the same experience you are trying to build in your system? (Screenshot or video would be the best)

If you don’t want to reveal your use case, you can send us a support cast via dashboard webform (https://dashboard.sendbird.com/settings/contact_us)

#8

Thanks for this response, its helped me quite a bit. Where does the ‘sb’ instance come from in this case / are you able to grab it from the SendBirdProvider? I’m attempting to get out of chat notifications setup while using the sb UIKit package. Thanks!

1 Like
#9

@ccarithe1

Where does the ‘sb’ instance come from in this case / are you able to grab it from the SendBirdProvider? ->

Yes, sb instance comes from SendBirdProvider, you can access it through withSendBird HOC and some of our selectors

Find an example here - https://codesandbox.io/s/2-5-customizing-chatinput-wgi9d?file=/src/CustomizedMessageInput.js:3897-3967

For more samples, visit https://github.com/sendbird/SendBird-JavaScript/tree/master/uikit-samples

Also, I think, your use case is a nice idea for our next example :+1:

2 Likes
#10

@Dmytro Just following on your question. Did you get this part implemented as you wished?