ChatKit | Android library | User Interface library

by stfalcon-studio Java Version: v0.4.1 License: Apache-2.0

Download this library from

kandi X-RAY | ChatKit Summary

ChatKit is a Java library typically used in Telecommunications, Media, Telecom, User Interface applications. ChatKit has no bugs, it has no vulnerabilities, it has build file available, it has a Permissive License and it has medium support. You can download it from GitHub.

ChatKit is a library designed to simplify the development of UI for such a trivial task as chat. It has flexible possibilities for styling, customizing and data management.

Support

Quality

Security

License

Reuse

kandi-support Support

ChatKit has a medium active ecosystem.
It has 3413 star(s) with 779 fork(s). There are 109 watchers for this library.
It had no major release in the last 12 months.
There are 96 open issues and 196 have been closed. On average issues are closed in 113 days. There are 18 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of ChatKit is v0.4.1

ChatKit Support

Best in #User Interface

Average in #User Interface

ChatKit Support

Best in #User Interface

Average in #User Interface

quality kandi Quality

ChatKit has 0 bugs and 0 code smells.

ChatKit Quality

Best in #User Interface

Average in #User Interface

ChatKit Quality

Best in #User Interface

Average in #User Interface

security Security

ChatKit has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
ChatKit code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

ChatKit Security

Best in #User Interface

Average in #User Interface

ChatKit Security

Best in #User Interface

Average in #User Interface

license License

ChatKit is licensed under the Apache-2.0 License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

ChatKit License

Best in #User Interface

Average in #User Interface

ChatKit License

Best in #User Interface

Average in #User Interface

build Reuse

ChatKit releases are available to install and integrate.
Build file is available. You can build the component from source.
Installation instructions, examples and code snippets are available.
It has 6315 lines of code, 590 functions and 103 files.
It has medium code complexity. Code complexity directly impacts maintainability of the code.

ChatKit Reuse

Best in #User Interface

Average in #User Interface

ChatKit Reuse

Best in #User Interface

Average in #User Interface

Top functions reviewed by kandi - BETA

kandi has reviewed ChatKit and discovered the below as its top functions. This is intended to give you an instant insight into ChatKit implemented functionality, and help decide if they suit your requirements.

Parse list list style .
Initialize the MessageInput .
Called when the view is scrolled .
This method is used to retrieve a fragment .
Returns the view holder for the given view type .
Generate multiple messages
removes date headers that are present .
This method is called when the view holder is created .
region Path
Create a drawable for a specific color

ChatKit Key Features

Ready-to-use already styled solution for quick implementation;

Default and custom media messages;

Fully customizable layouts - setting styles out of the box (use your own colors, text appearances, drawables, selectors and sizes) or even create your own custom markup or/and holders for unique behaviour;

List of dialogs, including tete-a-tete and group chats, markers for unread messages and last user message view;

List of messages (incoming and outcoming) with history pagination and already calculated dates headers;

Different avatars with no specific realization of image loading - you can use any library you want;

Selection mode for interacting with messages;

Links highlighting

Easy dates formatting;

Your own models for dialogs and messages - there is no converting needed;

Ready to use message input view;

Custom animations (according to RecyclerView usage).

ChatKit Examples and Code Snippets

See all related Code Snippets

Download

Copy

Download

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

AndroidX

Copy

Download

android.useAndroidX=true
android.enableJetifier=true

Proguard

Copy

Download

-keep class * extends com.stfalcon.chatkit.messages.MessageHolders$OutcomingTextMessageViewHolder {
     public &lt;init&gt;(android.view.View, java.lang.Object);
     public &lt;init&gt;(android.view.View);
 }
-keep class * extends com.stfalcon.chatkit.messages.MessageHolders$IncomingTextMessageViewHolder {
     public &lt;init&gt;(android.view.View, java.lang.Object);
     public &lt;init&gt;(android.view.View);
 }
-keep class * extends com.stfalcon.chatkit.messages.MessageHolders$IncomingImageMessageViewHolder {
     public &lt;init&gt;(android.view.View, java.lang.Object);
     public &lt;init&gt;(android.view.View);
 }
-keep class * extends com.stfalcon.chatkit.messages.MessageHolders$OutcomingImageMessageViewHolder {
     public &lt;init&gt;(android.view.View, java.lang.Object);
     public &lt;init&gt;(android.view.View);
 }

License

Copy

Download

Copyright (C) 2017 stfalcon.com

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

https://github.com/stfalcon-studio/ChatKit/blob/master/LICENSE

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Stream.io Chat API - Member state omitted from queryChannels response

Copy

Download

  public async getChannelUserIds(channelId: string): Promise<string[]> {
    try {
      const queryChannelsResponse = await this.client.queryChannels(
        { id: channelId },
        { last_updated_at: -1 },
        { message_limit: 0, limit: 1, state: true },
      )
      const channel = queryChannelsResponse[0]

      const userIds = Object.keys(channel.state.members)
      console.log('userIds:', userIds)

      return userIds
    } catch (err) {
      throw new InternalServerErrorException(
        `Error getting user ids for channel ('${channelId}').`,
        err,
      )
    }
  }

  public async getOfflineUserIds(userIds: string[]): Promise<string[]> {
    try {
      const queryUsersResponse = await this.client.queryUsers(
        { id: { $in: userIds } },
        { last_active: -1 },
        {},
      )

      console.log('queryUsersResponse:', queryUsersResponse)

      const offlineUserIds = queryUsersResponse.users
        .filter(u => !u.online)
        .map(u => u.user_id)

      return offlineUserIds
    } catch (err) {
      throw new InternalServerErrorException(
        `Error getting offline user ids from ('${JSON.stringify(
          userIds,
          null,
          2,
        )}').`,
        err,
      )
    }
  }

@Post('stream/messages')
  public async onReceive(
    @Req() req: Request,
    @Headers('x-signature') signature: string,
    @Body() body: any,
  ) {
    try {
      console.debug('webhooks-stream.messages.onReceive')
      this.chatService.verifyWebhook((req as any).rawBody, signature)

      console.log('DEBUG WEBHOOK BODY', JSON.stringify(body, null, 2))

      switch (body.type) {
        case 'message.new': {
          const offlineMemberIds = await this.chatService.getOfflineUserIds(
            body.members.map(member => member.user_id),
          )

      ...

-----------------------

  public async getChannelUserIds(channelId: string): Promise<string[]> {
    try {
      const queryChannelsResponse = await this.client.queryChannels(
        { id: channelId },
        { last_updated_at: -1 },
        { message_limit: 0, limit: 1, state: true },
      )
      const channel = queryChannelsResponse[0]

      const userIds = Object.keys(channel.state.members)
      console.log('userIds:', userIds)

      return userIds
    } catch (err) {
      throw new InternalServerErrorException(
        `Error getting user ids for channel ('${channelId}').`,
        err,
      )
    }
  }

  public async getOfflineUserIds(userIds: string[]): Promise<string[]> {
    try {
      const queryUsersResponse = await this.client.queryUsers(
        { id: { $in: userIds } },
        { last_active: -1 },
        {},
      )

      console.log('queryUsersResponse:', queryUsersResponse)

      const offlineUserIds = queryUsersResponse.users
        .filter(u => !u.online)
        .map(u => u.user_id)

      return offlineUserIds
    } catch (err) {
      throw new InternalServerErrorException(
        `Error getting offline user ids from ('${JSON.stringify(
          userIds,
          null,
          2,
        )}').`,
        err,
      )
    }
  }

@Post('stream/messages')
  public async onReceive(
    @Req() req: Request,
    @Headers('x-signature') signature: string,
    @Body() body: any,
  ) {
    try {
      console.debug('webhooks-stream.messages.onReceive')
      this.chatService.verifyWebhook((req as any).rawBody, signature)

      console.log('DEBUG WEBHOOK BODY', JSON.stringify(body, null, 2))

      switch (body.type) {
        case 'message.new': {
          const offlineMemberIds = await this.chatService.getOfflineUserIds(
            body.members.map(member => member.user_id),
          )

      ...

-----------------------

  public async getChannelUserIds(channelId: string): Promise<string[]> {
    try {
      const queryChannelsResponse = await this.client.queryChannels(
        { id: channelId },
        { last_updated_at: -1 },
        { message_limit: 0, limit: 1, state: true },
      )
      const channel = queryChannelsResponse[0]

      const userIds = Object.keys(channel.state.members)
      console.log('userIds:', userIds)

      return userIds
    } catch (err) {
      throw new InternalServerErrorException(
        `Error getting user ids for channel ('${channelId}').`,
        err,
      )
    }
  }

  public async getOfflineUserIds(userIds: string[]): Promise<string[]> {
    try {
      const queryUsersResponse = await this.client.queryUsers(
        { id: { $in: userIds } },
        { last_active: -1 },
        {},
      )

      console.log('queryUsersResponse:', queryUsersResponse)

      const offlineUserIds = queryUsersResponse.users
        .filter(u => !u.online)
        .map(u => u.user_id)

      return offlineUserIds
    } catch (err) {
      throw new InternalServerErrorException(
        `Error getting offline user ids from ('${JSON.stringify(
          userIds,
          null,
          2,
        )}').`,
        err,
      )
    }
  }

@Post('stream/messages')
  public async onReceive(
    @Req() req: Request,
    @Headers('x-signature') signature: string,
    @Body() body: any,
  ) {
    try {
      console.debug('webhooks-stream.messages.onReceive')
      this.chatService.verifyWebhook((req as any).rawBody, signature)

      console.log('DEBUG WEBHOOK BODY', JSON.stringify(body, null, 2))

      switch (body.type) {
        case 'message.new': {
          const offlineMemberIds = await this.chatService.getOfflineUserIds(
            body.members.map(member => member.user_id),
          )

      ...

Debugging deploying full-stack app to Heroku

Copy

Download

app.post('/authenticate', (req, res) => {
  const authData = chatkit.authenticate({ userId: req.query.user_id })
  res.status(authData.status).send(authData.body)
})

// if (process.env.NODE_ENV === 'production') { // This is your thang, I commented it out to reach a solution, but probably not necessary for you
  app.use(express.static('build')); // 'react-scripts build' places a /build directory at root, not /client/build

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'build', 'index.html')); // Removed client here also
  });
// }

"scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "postinstall": "npm run build"
  },

-----------------------

app.post('/authenticate', (req, res) => {
  const authData = chatkit.authenticate({ userId: req.query.user_id })
  res.status(authData.status).send(authData.body)
})

// if (process.env.NODE_ENV === 'production') { // This is your thang, I commented it out to reach a solution, but probably not necessary for you
  app.use(express.static('build')); // 'react-scripts build' places a /build directory at root, not /client/build

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'build', 'index.html')); // Removed client here also
  });
// }

"scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "postinstall": "npm run build"
  },

Stripe Firebase Cloud Functions - res.send() is not a function

Copy

Download

exports.stripeCreateOathResponseToken =
functions.https.onRequest((req, res) => {
    return cors(req, res, () => {
        // put your function code here
    });
});

How to send document or images in group using plain javascript pusher chatkit

Copy

Download

currentUser.sendMultipartMessage({
  roomId: myRoom.id,
  parts: [
    { type: "text/plain", content: "" },
    {
      type: "image/gif",
      url: "https://gfycat.com/failingforkedheterodontosaurus",
    },
    {
      file: document.querySelector("#attach").files[0],
      customData: { metadata: 42 },
    }
  ],
});

How to show badges using pusher data

Copy

Download

currentUser.subscribeToRoomMultipart({
  roomId: this.currentRoom,
  messageLimit: 100,
  hooks: {
    //Message is received
    onMessage: message => {
      this.lastMessage = message.id;
      //set cursor
        currentUser.setReadCursor({
        roomId: this.currentRoom,
        position: this.lastMessage
      })
      .then(() => {
        console.log(`Set cursor to message ${this.lastMessage}`)
      })
      .catch(err => {
        console.log(`Error setting cursor: ${err}`)
      })
    }
  },

}).then(room => {
  //log unread count
  console.log(`Unread count: ${room.unreadCount}`)
});

kotlin.UninitializedPropertyAccessException: lateinit property roomClickedInterface has not been initialized

Copy

Download

override fun onClick(p0: View?) {

    if(this::roomClickedInterface.isInitialized) {
        roomClickedInterface.roomSelected(list[adapterPosition])
    }
}

//lateinit var roomClickedInterface:RoomClickedInterface

class ChatRoomsListAdapter(val roomClickedInterface:RoomClickedInterface):
     RecyclerView.Adapter<ChatRoomsListAdapter.ViewHolder>() {

    //Implementation
}

private var roomClickedInterface: RoomClickedInterface? = null

override fun onClick(p0: View?) {
    roomClickedInterface?.roomSelected(list[adapterPosition])
}

-----------------------

override fun onClick(p0: View?) {

    if(this::roomClickedInterface.isInitialized) {
        roomClickedInterface.roomSelected(list[adapterPosition])
    }
}

//lateinit var roomClickedInterface:RoomClickedInterface

class ChatRoomsListAdapter(val roomClickedInterface:RoomClickedInterface):
     RecyclerView.Adapter<ChatRoomsListAdapter.ViewHolder>() {

    //Implementation
}

private var roomClickedInterface: RoomClickedInterface? = null

override fun onClick(p0: View?) {
    roomClickedInterface?.roomSelected(list[adapterPosition])
}

-----------------------

override fun onClick(p0: View?) {

    if(this::roomClickedInterface.isInitialized) {
        roomClickedInterface.roomSelected(list[adapterPosition])
    }
}

//lateinit var roomClickedInterface:RoomClickedInterface

class ChatRoomsListAdapter(val roomClickedInterface:RoomClickedInterface):
     RecyclerView.Adapter<ChatRoomsListAdapter.ViewHolder>() {

    //Implementation
}

private var roomClickedInterface: RoomClickedInterface? = null

override fun onClick(p0: View?) {
    roomClickedInterface?.roomSelected(list[adapterPosition])
}

-----------------------

override fun onClick(p0: View?) {

    if(this::roomClickedInterface.isInitialized) {
        roomClickedInterface.roomSelected(list[adapterPosition])
    }
}

//lateinit var roomClickedInterface:RoomClickedInterface

class ChatRoomsListAdapter(val roomClickedInterface:RoomClickedInterface):
     RecyclerView.Adapter<ChatRoomsListAdapter.ViewHolder>() {

    //Implementation
}

private var roomClickedInterface: RoomClickedInterface? = null

override fun onClick(p0: View?) {
    roomClickedInterface?.roomSelected(list[adapterPosition])
}

-----------------------

override fun onClick(p0: View?) {

    if(this::roomClickedInterface.isInitialized) {
        roomClickedInterface.roomSelected(list[adapterPosition])
    }
}

//lateinit var roomClickedInterface:RoomClickedInterface

class ChatRoomsListAdapter(val roomClickedInterface:RoomClickedInterface):
     RecyclerView.Adapter<ChatRoomsListAdapter.ViewHolder>() {

    //Implementation
}

private var roomClickedInterface: RoomClickedInterface? = null

override fun onClick(p0: View?) {
    roomClickedInterface?.roomSelected(list[adapterPosition])
}

React.js Duplicate key and Unreachable code BUGS

Copy

Download

return (
  <div>

  </div>
)

const myObject = {
  currentUsername: 'bob',
  currentUsername: 'alice',
}

<ChatScreen
  currentUsername="bob"
  currentUsername="alice"
/>

-----------------------

return (
  <div>

  </div>
)

const myObject = {
  currentUsername: 'bob',
  currentUsername: 'alice',
}

<ChatScreen
  currentUsername="bob"
  currentUsername="alice"
/>

-----------------------

return (
  <div>

  </div>
)

const myObject = {
  currentUsername: 'bob',
  currentUsername: 'alice',
}

<ChatScreen
  currentUsername="bob"
  currentUsername="alice"
/>

-----------------------

constructor() {
    super();
    this.state = {
      currentUsername: '', 
      currentUsername: 'WhatIsYournameScreen',
    }
    this.onUsernameSubmitted = this.onUsernameSubmitted.bind(this)
  }

import React, { Component } from 'react'
import Chatkit from '@pusher/chatkit-client'

class ChatScreen extends Component{
  constructor(props) {
    super(props)
    this.state = {
      currentUser: {}
    }
  }

  componentDidMount() {
    const chatManager = new Chatkit.ChatManager({
      instanceLocator: 'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa',
      userId: this.props.currentUsername,
      tokenProvider: new Chatkit.TokenProvider({
        url: 'http://localhost:3000/authenticate',
      }),
    })

    chatManager
      .connect()
      .then(currentUser => {
        this.setState({ currentUser })
      })
      .catch(error => console.error('error', error))
  }

  render() {
    return (
      <div style={styles.container}>
        <div style={styles.chatContainer}>
          <aside style={styles.whosOnlineListContainer}>
            <h2>Who's online PLACEHOLDER</h2>
          </aside>
          <section style={styles.chatListContainer}>
            <h2>Chat PLACEHOLDER</h2>
          </section>
        </div>
      </div>
    );
  }
}

const styles = {
      container: {
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
      },
      chatContainer: {
        display: 'flex',
        flex: 1,
      },
      whosOnlineListContainer: {
        width: '300px',
        flex: 'none',
        padding: 20,
        backgroundColor: '#2c303b',
        color: 'white',
      },
      chatListContainer: {
        padding: 20,
        width: '85%',
        display: 'flex',
        flexDirection: 'column',
      },
    }

export default ChatScreen;

-----------------------

constructor() {
    super();
    this.state = {
      currentUsername: '', 
      currentUsername: 'WhatIsYournameScreen',
    }
    this.onUsernameSubmitted = this.onUsernameSubmitted.bind(this)
  }

import React, { Component } from 'react'
import Chatkit from '@pusher/chatkit-client'

class ChatScreen extends Component{
  constructor(props) {
    super(props)
    this.state = {
      currentUser: {}
    }
  }

  componentDidMount() {
    const chatManager = new Chatkit.ChatManager({
      instanceLocator: 'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa',
      userId: this.props.currentUsername,
      tokenProvider: new Chatkit.TokenProvider({
        url: 'http://localhost:3000/authenticate',
      }),
    })

    chatManager
      .connect()
      .then(currentUser => {
        this.setState({ currentUser })
      })
      .catch(error => console.error('error', error))
  }

  render() {
    return (
      <div style={styles.container}>
        <div style={styles.chatContainer}>
          <aside style={styles.whosOnlineListContainer}>
            <h2>Who's online PLACEHOLDER</h2>
          </aside>
          <section style={styles.chatListContainer}>
            <h2>Chat PLACEHOLDER</h2>
          </section>
        </div>
      </div>
    );
  }
}

const styles = {
      container: {
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
      },
      chatContainer: {
        display: 'flex',
        flex: 1,
      },
      whosOnlineListContainer: {
        width: '300px',
        flex: 'none',
        padding: 20,
        backgroundColor: '#2c303b',
        color: 'white',
      },
      chatListContainer: {
        padding: 20,
        width: '85%',
        display: 'flex',
        flexDirection: 'column',
      },
    }

export default ChatScreen;

-----------------------

import React, { Component } from 'react'
import Chatkit from '@pusher/chatkit-client'

class ChatScreen extends Component{
  constructor(props) {
    super(props)
    this.state = {
      currentUser: {}
    }
  }

  componentDidMount() {
    const chatManager = new Chatkit.ChatManager({
      instanceLocator: 'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa',
      userId: this.props.currentUsername,
      tokenProvider: new Chatkit.TokenProvider({
        url: 'http://localhost:3000/authenticate',
      }),
    })

    chatManager
      .connect()
      .then(currentUser => {
        this.setState({ currentUser })
      })
      .catch(error => console.error('error', error))
  }

  render() {
    const styles = {
      container: {
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
      },
      chatContainer: {
        display: 'flex',
        flex: 1,
      },
      whosOnlineListContainer: {
        width: '300px',
        flex: 'none',
        padding: 20,
        backgroundColor: '#2c303b',
        color: 'white',
      },
      chatListContainer: {
        padding: 20,
        width: '85%',
        display: 'flex',
        flexDirection: 'column',
      },
    }
    return (
      <div style={styles.container}>
        <div style={styles.chatContainer}>
          <aside style={styles.whosOnlineListContainer}>
            <h2>Who's online PLACEHOLDER</h2>
          </aside>
          <section style={styles.chatListContainer}>
            <h2>Chat PLACEHOLDER</h2>
          </section>
        </div>
      </div>
    );
  }
}




export default ChatScreen;

import React, { Component } from 'react'
import UsernameForm from './components/UsernameForm'
import ChatScreen from './components/ChatScreen'

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentUsername: '',
      currentScreen: 'WhatIsYournameScreen',
    }
    this.onUsernameSubmitted = this.onUsernameSubmitted.bind(this)
  }

  onUsernameSubmitted(username) {
    fetch('http://localhost:3000/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username }),
    })
      .then(response => {
        this.setState({
          currentUsername: username,
          currentScreen: 'ChatScreen'
        })
      })
      .catch(error => console.error('error', error))
  }

  render() {
    if (this.state.currentScreen === 'WhatIsYourUsernameScreen') {
      return <UsernameForm onSubmit={this.onUsernameSubmitted} />
    }
    if (this.state.currentScreen === 'ChatScreen') {
      return <ChatScreen currentUsername={this.state.currentUsername} /> 
    }
    return (
      <div>
        <h1>Hoş geldin</h1>
        <UsernameForm onSubmit={this.onUsernameSubmitted} />
      </div>
    );
  }
}


export default App;

-----------------------

import React, { Component } from 'react'
import Chatkit from '@pusher/chatkit-client'

class ChatScreen extends Component{
  constructor(props) {
    super(props)
    this.state = {
      currentUser: {}
    }
  }

  componentDidMount() {
    const chatManager = new Chatkit.ChatManager({
      instanceLocator: 'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa',
      userId: this.props.currentUsername,
      tokenProvider: new Chatkit.TokenProvider({
        url: 'http://localhost:3000/authenticate',
      }),
    })

    chatManager
      .connect()
      .then(currentUser => {
        this.setState({ currentUser })
      })
      .catch(error => console.error('error', error))
  }

  render() {
    const styles = {
      container: {
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
      },
      chatContainer: {
        display: 'flex',
        flex: 1,
      },
      whosOnlineListContainer: {
        width: '300px',
        flex: 'none',
        padding: 20,
        backgroundColor: '#2c303b',
        color: 'white',
      },
      chatListContainer: {
        padding: 20,
        width: '85%',
        display: 'flex',
        flexDirection: 'column',
      },
    }
    return (
      <div style={styles.container}>
        <div style={styles.chatContainer}>
          <aside style={styles.whosOnlineListContainer}>
            <h2>Who's online PLACEHOLDER</h2>
          </aside>
          <section style={styles.chatListContainer}>
            <h2>Chat PLACEHOLDER</h2>
          </section>
        </div>
      </div>
    );
  }
}




export default ChatScreen;

import React, { Component } from 'react'
import UsernameForm from './components/UsernameForm'
import ChatScreen from './components/ChatScreen'

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentUsername: '',
      currentScreen: 'WhatIsYournameScreen',
    }
    this.onUsernameSubmitted = this.onUsernameSubmitted.bind(this)
  }

  onUsernameSubmitted(username) {
    fetch('http://localhost:3000/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username }),
    })
      .then(response => {
        this.setState({
          currentUsername: username,
          currentScreen: 'ChatScreen'
        })
      })
      .catch(error => console.error('error', error))
  }

  render() {
    if (this.state.currentScreen === 'WhatIsYourUsernameScreen') {
      return <UsernameForm onSubmit={this.onUsernameSubmitted} />
    }
    if (this.state.currentScreen === 'ChatScreen') {
      return <ChatScreen currentUsername={this.state.currentUsername} /> 
    }
    return (
      <div>
        <h1>Hoş geldin</h1>
        <UsernameForm onSubmit={this.onUsernameSubmitted} />
      </div>
    );
  }
}


export default App;

See all related Code Snippets

Community Discussions

Trending Discussions on ChatKit

Stream.io Chat API - Member state omitted from queryChannels response
Debugging deploying full-stack app to Heroku
Stripe Firebase Cloud Functions - res.send() is not a function
How to send document or images in group using plain javascript pusher chatkit
How to show badges using pusher data
Pusher Chatkit Android get status readout of specified room
kotlin.UninitializedPropertyAccessException: lateinit property roomClickedInterface has not been initialized
React.js Duplicate key and Unreachable code BUGS

Trending Discussions on ChatKit

QUESTION

Stream.io Chat API - Member state omitted from queryChannels response

Asked 2020-Apr-07 at 12:44

When I do the following:

      const queryChannelsResponse = await this.client.queryChannels(
        { id: channelId },
        { last_updated_at: -1 },
        { state: true },

This does not include the members. How am I able to get the member information?

I am writing a webhook and I want it to send a push notification (I am currently sending these myself via expo) to all offline users.

I am migrating from pusher chatkit which is now being discontinued. They had a new_message_users_offline hook for this purpose.

In the message.new webhook payload in the documentation the members are present but they are not present in the request body:

{
    "type": "message.new",
    "cid": "messaging:394f36fd-d512-4f2b-a785-ab8dfe82af49",
    "message": {
        "id": "f73ee1a8-f6fd-450b-bc64-0840b4df8fd9-2b4908ad-e267-4c48-8f41-8c26c8f769ce",
        "text": "Ffddf",
        "html": "<p>Ffddf</p>\n",
        "type": "regular",
        "user": {
            "id": "f73ee1a8-f6fd-450b-bc64-0840b4df8fd9",
            "role": "user",
            "created_at": "2020-04-06T14:06:37.979584Z",
            "updated_at": "2020-04-06T19:45:39.556842Z",
            "last_active": "2020-04-06T19:45:39.54939Z",
            "banned": false,
            "online": true,
            "name": "Mark Everett",
            "image": "https://8dc-user-files-dev.s3.eu-west-1.amazonaws.com/MEMBER_PROFILE_IMAGE-f73ee1a8-f6fd-450b-bc64-0840b4df8fd9.png?v=6"
        },
        "attachments": [],
        "latest_reactions": [],
        "own_reactions": [],
        "reaction_counts": null,
        "reaction_scores": {},
        "reply_count": 0,
        "created_at": "2020-04-06T19:51:14.114803Z",
        "updated_at": "2020-04-06T19:51:14.114803Z",
        "mentioned_users": []
    },
    "user": {
        "id": "f73ee1a8-f6fd-450b-bc64-0840b4df8fd9",
        "role": "user",
        "created_at": "2020-04-06T14:06:37.979584Z",
        "updated_at": "2020-04-06T19:45:39.556842Z",
        "last_active": "2020-04-06T19:45:39.54939Z",
        "banned": false,
        "online": true,
        "channel_unread_count": 0,
        "channel_last_read_at": "1970-01-01T00:00:00Z",
        "total_unread_count": 0,
        "unread_channels": 0,
        "unread_count": 0,
        "image": "https://8dc-user-files-dev.s3.eu-west-1.amazonaws.com/MEMBER_PROFILE_IMAGE-f73ee1a8-f6fd-450b-bc64-0840b4df8fd9.png?v=6",
        "name": "Mark Everett"
    },
    "watcher_count": 1,
    "created_at": "2020-04-06T19:51:14.121213459Z",
    "channel_type": "messaging",
    "channel_id": "394f36fd-d512-4f2b-a785-ab8dfe82af49"
}

My plan is do do something like this:

  public async getOfflineUserIds(channelId: string): Promise<string[]> {
    try {
      // Get the channel
      const queryChannelsResponse = await this.client.queryChannels(
        { id: channelId },
        { last_updated_at: -1 },
        { message_limit: 0, limit: 1, state: true},
      )
      const channel = queryChannelsResponse[0]

      console.log('channel: ', channel)

      // Get the channels members
      const userIds: string[] = []
      // tslint:disable-next-line: forin
      for (const index in channel.state.members) {
        userIds.push(channel.state.members[index].user_id)
      }
      console.log('userIds:', userIds)

      const queryUsersResponse = await this.client.queryUsers(
        { id: { $in: userIds } },
        { last_active: -1 },
        {},
      )

      console.log('queryUsersResponse:', queryUsersResponse)

      // Work out who is offline/online
      const offlineUserIds = queryUsersResponse.users
        .filter(u => !u.online)
        .map(u => u.id)

      return offlineUserIds
    } catch (err) {
      throw new InternalServerErrorException(
        'Error getting offline users for channel.',
        err,
      )
    }
  }

ANSWER

Answered 2020-Apr-07 at 12:44

This is now resolved.

I did not add the members to the channel with channel.addMembers. I create and add members on the server as this works perfectly for my use case.

If it helps anyone I ended up with these two methods:

  public async getChannelUserIds(channelId: string): Promise<string[]> {
    try {
      const queryChannelsResponse = await this.client.queryChannels(
        { id: channelId },
        { last_updated_at: -1 },
        { message_limit: 0, limit: 1, state: true },
      )
      const channel = queryChannelsResponse[0]

      const userIds = Object.keys(channel.state.members)
      console.log('userIds:', userIds)

      return userIds
    } catch (err) {
      throw new InternalServerErrorException(
        `Error getting user ids for channel ('${channelId}').`,
        err,
      )
    }
  }

  public async getOfflineUserIds(userIds: string[]): Promise<string[]> {
    try {
      const queryUsersResponse = await this.client.queryUsers(
        { id: { $in: userIds } },
        { last_active: -1 },
        {},
      )

      console.log('queryUsersResponse:', queryUsersResponse)

      const offlineUserIds = queryUsersResponse.users
        .filter(u => !u.online)
        .map(u => u.user_id)

      return offlineUserIds
    } catch (err) {
      throw new InternalServerErrorException(
        `Error getting offline user ids from ('${JSON.stringify(
          userIds,
          null,
          2,
        )}').`,
        err,
      )
    }
  }

And then in my webhook I:

@Post('stream/messages')
  public async onReceive(
    @Req() req: Request,
    @Headers('x-signature') signature: string,
    @Body() body: any,
  ) {
    try {
      console.debug('webhooks-stream.messages.onReceive')
      this.chatService.verifyWebhook((req as any).rawBody, signature)

      console.log('DEBUG WEBHOOK BODY', JSON.stringify(body, null, 2))

      switch (body.type) {
        case 'message.new': {
          const offlineMemberIds = await this.chatService.getOfflineUserIds(
            body.members.map(member => member.user_id),
          )

      ...

Source https://stackoverflow.com/questions/61067984

QUESTION

Stripe Firebase Cloud Functions - res.send() is not a function

Asked 2020-Mar-03 at 05:44

I'm new to server development and trying to get my cloud firebase function working. I'm getting a res.send() is not a function on my firebase Log when my stripe webhook fires and I'm not too sure why. I'm pretty sure I'm missing something. The only conclusion I can come up with is that it is because I'm not using App from const app = express(); but I'm seeing it used elsewhere.

Any and all help/direction is appreciated

I'm getting the following:

res.send() is not a function

res.end() is not a function

res.json() is not a function

Anything that is dealing with res seems to be an issue.

Here is my code:

const admin = require('firebase-admin');
const functions = require('firebase-functions');
admin.initializeApp(functions.config().firebase);
const Chatkit = require('@pusher/chatkit-server');
const stripeToken = require('stripe')(functions.config().stripe.token);
const stripeWebhooks = require('stripe')(functions.config().keys.webhooks);
const express = require('express');
const cors = require('cors');
const endpointSecret = functions.config().keys.signing;
const request = require('request-promise');
const app = express();

app.use(cors({ origin: true }));

exports.stripeCreateOathResponseToken = functions.https.onRequest(cors((req, res) => {

    const endpointSecret = "whsec_XXXXXXXXXXXXXXXXXXX";

    // Get the signature from the request header
    let sig = req.headers["stripe-signature"];

    let rawbody = req.rawBody;
    // res.send("testing res.send()"); // doesnt work. cant use res.send() here

    console.log("rawbody: " + rawbody);
    console.log("request.body: " + req.body);
    console.log("request.query.code: " + req.query.code);
    console.log("request.query.body: " + req.query.body);
    console.log("request.query.state: " + req.query.state);
    // console.log("res.body: " + res.json({received: true}));
    stripeWebhooks.webhooks.constructEvent(req.rawBody, sig, endpointSecret);
    res.end("testing res.end()"); // doesnt work. cant use res.end() here
}));

ANSWER

Answered 2020-Mar-03 at 05:44

That doesn't look like the correct way to use the cors module with Cloud Functions for Firebase. Try this instead:

exports.stripeCreateOathResponseToken =
functions.https.onRequest((req, res) => {
    return cors(req, res, () => {
        // put your function code here
    });
});

Cribbed from an official sample.

Source https://stackoverflow.com/questions/60500716

QUESTION

Pusher Chatkit Android get status readout of specified room

Asked 2020-Jan-17 at 14:06

I'm trying to integrate pusher chatkit and I'm curious of a couple of things:

1) is there a way to get a readout of the status of a specific room similar to when you join a room...or get denied from a room. Here's an example below when you join a room.

D/TAG: Message(id=102785662, sender=User(id=username1-PCKid, createdAt=2020-01-02T01:44:28Z, updatedAt=2020-01-02T01:44:28Z, name=username1, avatarURL=null, customData=null, online=true), room=Room(id=my-room2, createdById=alice, name=my room2, pushNotificationTitleOverride=null, isPrivate=false, customData=null, unreadCount=14, lastMessageAt=2020-01-15T15:34:45Z, createdAt=2020-01-01T20:48:29Z, updatedAt=2020-01-01T20:48:29Z, deletedAt=null), parts=[Part(partType=Inline, payload=Inline(type=text/plain, content=updates on click))], createdAt=Wed Jan 15 07:34:45 PST 2020, updatedAt=Wed Jan 15 07:34:45 PST 2020, deletedAt=null)

******UPDATE*** was able to solve number 1 with this being called from adapter:

    fun addRoom(room:Room){

        list.add(room);
        Log.d(AppActivityTags.chatRoomsListAdapterTAG, "Room name: " + room.name)
        Log.d(AppActivityTags.chatRoomsListAdapterTAG, "Room id: " + room.id)
        Log.d(AppActivityTags.chatRoomsListAdapterTAG, "Room memberUserIds: " + room.memberUserIds)
        Log.d(AppActivityTags.chatRoomsListAdapterTAG, "Room isPrivate: " + room.isPrivate)

    }

2) how can I get a list of a room's members? I tried room.memberUserIds but it comes back empty.

3) I am new to kotlin and also pusher chatkit, could someone please show me an example of how to log

currentUser.getJoinableRooms { result ->
  when (result) {
    is Result.Success -> {
      // Do something with List<Room>
      // show me joinable rooms
    }
  }
}

I'm guessing this will crank out nonPrivate rooms.

4) I am getting this error D/ChatRoomsActivity: on subscripetoRoomMultipart reason:: Room membership required however, the user is already a member of the room as is shown in the pusher chatkit console. currently user id=username1-PCKid

ANSWER

Answered 2020-Jan-17 at 14:06

1 - You can get all the rooms you're a member of with CurrentUser.rooms and most of the status information will be available as soon as you connect to Chatkit e.g. unread counts and room name. You could write a for each loop to log out the information after you connect. However...

2 - It looks like you want the current users for a given room. For this you will need to be subscribed to the room before this is populated.

3 - You are correct, that will return all the joinable rooms. You could write a for each loop to log out each joinable room.

4 - Can you provide some more info - it'd be useful to see what your code is doing and in what order!

We have a public demo app that models some of this - https://github.com/pusher/chatkit-android-public-demo

We have also got a getting started guide here that might be useful - https://pusher.com/docs/chatkit/getting_started/android

Finally, the reference docs might be another good place to checkout - https://pusher.com/docs/chatkit/reference/android

Hope that helps :-)

Source https://stackoverflow.com/questions/59771313

QUESTION

kotlin.UninitializedPropertyAccessException: lateinit property roomClickedInterface has not been initialized

Asked 2020-Jan-08 at 16:16

I am trying to follow Pusher Chatkit's tutorial for "BUILDING A GROUP CHAT APP USING KOTLIN AND PUSHER CHATKIT" however I am running into an issue with the Recycler View adapter. FYI, I am still learning Kotlin. I've been reading up on lateinit vars but I can't find anything that addresses this case. The error occurs in the recycler view adapter.

This is the error I get:

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.android_myneighborsbookshelf, PID: 26692
    kotlin.UninitializedPropertyAccessException: lateinit property roomClickedInterface has not been initialized
        at com.example.android_myneighborsbookshelf.adapters.ChatRoomsListAdapter.getRoomClickedInterface(ChatRoomsListAdapter.kt:13)
        at com.example.android_myneighborsbookshelf.adapters.ChatRoomsListAdapter$ViewHolder.onClick(ChatRoomsListAdapter.kt:66)
        at android.view.View.performClick(View.java:6597)
        at android.view.View.performClickInternal(View.java:6574)
        at android.view.View.access$3100(View.java:778)
        at android.view.View$PerformClick.run(View.java:25885)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:193)
        at android.app.ActivityThread.main(ActivityThread.java:6669)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

ChatRoomsListActivity.kt

class ChatRoomsListActivity : AppCompatActivity() {
    val adapter = ChatRoomsListAdapter();

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_chat_room_list)
        initRecyclerView()
        initChatManager()
    }

    private fun initRecyclerView() {
        recycler_view.layoutManager = LinearLayoutManager(this@ChatRoomsListActivity)
        recycler_view.adapter = adapter
    }

    private fun initChatManager() {
        val chatManager = ChatManager(
                instanceLocator = "blahblahblah",
                userId = "username1-PCKid",
                dependencies = AndroidChatkitDependencies(
                        tokenProvider = ChatkitTokenProvider(
                                endpoint = "blahblahblah",
//                                endpoint = "http://10.0.2.2:3000/auth",
                                userId = "username1-PCKid"
                        )
                )
        )

        chatManager.connect(listeners = ChatListeners(
                onErrorOccurred = { },
                onAddedToRoom = { },
                onRemovedFromRoom = { },
                onCurrentUserReceived = { },
                onNewReadCursor = { },
                onRoomDeleted = { },
                onRoomUpdated = { },
                onPresenceChanged = { u, n, p -> },
                onUserJoinedRoom = { u, r -> },
                onUserLeftRoom = { u, r -> },
                onUserStartedTyping = { u, r -> },
                onUserStoppedTyping = { u, r -> }
        )) { result ->
            when (result) {
                is Result.Success -> {
                    // We have connected!
                    val currentUser = result.value
                    AppController.currentUser = currentUser
                    val userJoinedRooms = ArrayList<Room>(currentUser.rooms)
                    for (i in 0 until userJoinedRooms.size) {
                        adapter.addRoom(userJoinedRooms[i])
                    }

                    currentUser.getJoinableRooms { result ->
                        when (result) {
                            is Result.Success -> {
                                // Do something with List<Room>
                                val rooms = result.value
                                runOnUiThread {
                                    for (i in 0 until rooms.size) {
                                        adapter.addRoom(rooms[i])
                                    }
                                }
                            }
                        }
                    }

                    adapter.setInterface(object : ChatRoomsListAdapter.RoomClickedInterface {
                        override fun roomSelected(room: Room) {
                            if (room.memberUserIds.contains(currentUser.id)) {
                                // user already belongs to this room
                                roomJoined(room)
                            } else {
                                currentUser.joinRoom(
                                        roomId = room.id,
                                        callback = { result ->
                                            when (result) {
                                                is Result.Success -> {
                                                    // Joined the room!
                                                    roomJoined(result.value)
                                                }
                                                is Result.Failure -> {
                                                    Log.d("TAG", result.error.toString())
                                                }
                                            }
                                        }
                                )
                            }
                        }
                    })
                }

                is Result.Failure -> {
                    // Failure
                    Log.d("TAG", result.error.toString())
                }
            }
        }
    }

    private fun roomJoined(room: Room) {
        val intent = Intent(this@ChatRoomsListActivity, ChatRoomsListActivity::class.java)
        intent.putExtra("room_id", room.id)
        intent.putExtra("room_name", room.name)
        startActivity(intent)
    }
}

RecyclerView Adapter

import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import com.pusher.chatkit.rooms.Room
import android.view.LayoutInflater
import androidx.recyclerview.widget.RecyclerView
import com.example.android_myneighborsbookshelf.R

class ChatRoomsListAdapter: RecyclerView.Adapter<ChatRoomsListAdapter.ViewHolder>() {
    private var list = ArrayList<Room>()
    lateinit var roomClickedInterface:RoomClickedInterface // <-- Error occurs here - kt.13

    fun addRoom(room:Room){
        list.add(room)
        notifyDataSetChanged()
    }

    fun setInterface(roomClickedInterface:RoomClickedInterface){
        this.roomClickedInterface = roomClickedInterface
    }

    override fun getItemCount(): Int {
        return list.size
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context)
                .inflate(
                        android.R.layout.simple_list_item_1,
                        parent,
                        false
                )

        return ViewHolder(view)
    }


    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.roomName.text = list[position].name

    }

    inner class ViewHolder(itemView: View): RecyclerView.ViewHolder(itemView), View.OnClickListener {
        override fun onClick(p0: View?) {
            roomClickedInterface.roomSelected(list[adapterPosition]) // <-- Error occurs here kt.66
        }

        var roomName: TextView = itemView.findViewById(android.R.id.text1)

        init {
            itemView.setOnClickListener(this)
        }
    }

    interface RoomClickedInterface{
        fun roomSelected(room:Room)
    }
}

Any and all help is appreciated.

ANSWER

Answered 2020-Jan-08 at 05:55

lateinit means late initialization. If you do not want to initialize a variable in the constructor, instead you want to initialize it later on and if you can guarantee the initialization before using it, then declare that variable with lateinit keyword. It will not allocate memory until initialized.

So, You have to initialize the lateinit property before try to use it.

Option - 1: Call setInterface() to initialize the property before click the list item. You can also check whether a lateinit var has already been initialized or not using .isInitialized like below:

override fun onClick(p0: View?) {

    if(this::roomClickedInterface.isInitialized) {
        roomClickedInterface.roomSelected(list[adapterPosition])
    }
}

Option - 2: Remove lateinit property from your adapter and also it's setter

//lateinit var roomClickedInterface:RoomClickedInterface

And pass RoomClickedInterface as parameter of your adapter's constructor

class ChatRoomsListAdapter(val roomClickedInterface:RoomClickedInterface):
     RecyclerView.Adapter<ChatRoomsListAdapter.ViewHolder>() {

    //Implementation
}

Option - 3: Remove lateinit and use nullable property

private var roomClickedInterface: RoomClickedInterface? = null

And then use like below using null safety notation ?.:

override fun onClick(p0: View?) {
    roomClickedInterface?.roomSelected(list[adapterPosition])
}

Source https://stackoverflow.com/questions/59632501

QUESTION

React.js Duplicate key and Unreachable code BUGS

Asked 2020-Jan-05 at 20:49

Hi I'm learning React.js and I'm making a ChatApp right now. Here is my bug and codes.

./src/App.js Line 10:7: Duplicate key 'currentUsername' no-dupe-keys

./src/components/ChatScreen.jsx Line 35:5: Unreachable code no-unreachable

Search for the keywords to learn more about each warning.To ignore, add // eslint-disable-next-line to the line before.

import React, { Component } from 'react'
import Chatkit from '@pusher/chatkit-client'

class ChatScreen extends Component{
  constructor(props) {
    super(props)
    this.state = {
      currentUser: {}
    }
  }

  componentDidMount() {
    const chatManager = new Chatkit.ChatManager({
      instanceLocator: 'v1:us1:1308c34d-00c3-4257-b1c3-647cf56fd5fa',
      userId: this.props.currentUsername,
      tokenProvider: new Chatkit.TokenProvider({
        url: 'http://localhost:3000/authenticate',
      }),
    })

    chatManager
      .connect()
      .then(currentUser => {
        this.setState({ currentUser })
      })
      .catch(error => console.error('error', error))
  }

  render() {
    return (
      <div>

      </div>
    )
    const styles = {
      container: {
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
      },
      chatContainer: {
        display: 'flex',
        flex: 1,
      },
      whosOnlineListContainer: {
        width: '300px',
        flex: 'none',
        padding: 20,
        backgroundColor: '#2c303b',
        color: 'white',
      },
      chatListContainer: {
        padding: 20,
        width: '85%',
        display: 'flex',
        flexDirection: 'column',
      },
    }

    return (
      <div style={styles.container}>
        <div style={styles.chatContainer}>
          <aside style={styles.whosOnlineListContainer}>
            <h2>Who's online PLACEHOLDER</h2>
          </aside>
          <section style={styles.chatListContainer}>
            <h2>Chat PLACEHOLDER</h2>
          </section>
        </div>
      </div>
    );
  }
}


export default ChatScreen;

Could you help me?

ANSWER

Answered 2020-Jan-05 at 18:22

./src/components/ChatScreen.jsx Line 35:5: Unreachable code no-unreachable

This lint error is warning you that you have a return statement at the top of your render method, followed by code that will never execute below it. Ie, this code makes the rest of the function useless:

return (
  <div>

  </div>
)

Duplicate key 'currentUsername' no-dupe-keys

This error is occurring in App.js, which you havn't shared with us. But it's telling you that you've given an object the property currentUsername twice. For example, maybe you have something like:

const myObject = {
  currentUsername: 'bob',
  currentUsername: 'alice',
}

Or are trying to create a component with the same issue:

<ChatScreen
  currentUsername="bob"
  currentUsername="alice"
/>

Source https://stackoverflow.com/questions/59602859

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install ChatKit

Add jitpack to the root build.gradle file of your project at the end of repositories.
Add the dependency

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .