Agora RTM SDK React Wrapper

Overview

Agora RTM SDK React Wrapper

A react (react.js) wrapper for Agora RTM SDK.

This wrapper supports React >= v16.8

Install

npm install agora-rtm-react

Usage

import React from 'react'
import { createChannel, createClient, RtmMessage } from 'agora-rtm-react'

const useClient = createClient('
   
    '
   );
const useChannel = createChannel('channelName')

const App = () => {
  const client = useClient();
  const testChannel = useChannel(client)

  const login = async () => {
    await client.login({ uid: 'userId' })
    await testChannel.join()
  }
  
  const sendMsg = async (text: string) => {
    const message = client.createMessage({ text, messageType: 'TEXT' })
    await testChannel.sendMessage(message)
  }
...
}

Example

A chat example using the wrapper can be found in ./example.

Comments
  • RtmInvalidStatusError:  Error Code 5 - The channel does not join. Cannot do the operation.

    RtmInvalidStatusError: Error Code 5 - The channel does not join. Cannot do the operation.

    I'm getting below error

    Uncaught (in promise) RtmInvalidStatusError:  Error Code 5 - The channel does not join. Cannot do the operation.
    

    when trying to send message via

    const sendMessage = async () => {
      const bytes = new Uint8Array([97, 100, 100, 83, 116, 114, 111, 107, 101, 80, 111, 105, 110, 116, 115, 58, 0, 4, 61, 7, -57, 126, -67, -11, -52, 99, -66, -8, 123, 33, 0, 4, 61, 8, -102, -108, -67, -37, -59, -91, -66, -7, -3, 108, 0, 4, 61, 3, -69, 20, -67, -59, -126, -67, -66, -5, 47, -62, 0, 4, 60, -7, 12, 19, -67, -81, 124, -67, -66, -4, 66, -20])
            await rtmChannel?.sendMessage({ rawMessage: bytes })
    }
    
    
    opened by jojonarte 5
  • Not working with React 18

    Not working with React 18

    Running on npm install agora-rtm-react on newly created react app

    using npx create-react-app my-app --template typescript

    gives this error

    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR! 
    npm ERR! While resolving: [email protected]
    npm ERR! Found: [email protected]
    npm ERR! node_modules/react
    npm ERR!   react@"^18.2.0" from the root project
    npm ERR! 
    npm ERR! Could not resolve dependency:
    npm ERR! peer react@"^16.0.0 || ^17" from [email protected]
    npm ERR! node_modules/agora-rtm-react
    npm ERR!   agora-rtm-react@"*" from the root project
    npm ERR! 
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    npm ERR! 
    npm ERR! See /home/codespace/.npm/eresolve-report.txt for a full report.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/codespace/.npm/_logs/2022-07-30T10_52_19_973Z-debug-0.log
    
    opened by souhailmerroun 3
  • createClient() not working with environment variables

    createClient() not working with environment variables

    createClient() won't accept an environment variable.

    I'm trying to use environment variables inside createClient() like this:

    const useRtmClient = createClient(${agoraAppId});

    But I get this error when I do: RtmInvalidArgumentError: Error Code 1 - The appId in the arguments is invalid

    If instead I do

    const useRtmClient = createClient('#####');

    There is no error.

    opened by BMTCompany2 2
  • Integration with agora-rtc-react

    Integration with agora-rtc-react

    I'm currently playing around with a prototype using both agora-rtc-react and agora-rtm-react.

    I plan to use the agora-rtc-react for the video call while agora-rtm-react for communicating between connected clients. I'm currently encountering below error whenever I try to connect to both.

    Current app structure gist

    const App = () => {
      const { ready, tracks } = useMicrophoneAndCameraTracks();
    
      const rtcClient = useRtcClient();
      const rtmClient = useRtmClient()
      const rtmChannel = useChannel(rtmClient)
    
      useEffect(() => {
        // function to initialise the SDK
        const init = async (name: string) => {
          
          try  {
            await rtcClient.join(appId, name, null, 0);
            await rtmClient.login({ uid: '123' })
            await rtmChannel.join()
    
            if (tracks) await rtcClient.publish([tracks[0], tracks[1]]);
          } catch (err) {
            console.error('@@@ERR', err)
          }
        };
    
        if (ready && tracks) {
          console.log('init ready');
          init(channelName)
        }
      }, [rtcClient, ready, tracks, rtmChannel, rtmClient]);
    
      return /* components here */
    };
    

    I'm getting below error:

    AgoraRTCException: AgoraRTCError INVALID_OPERATION: [client-5f56d] Client already in connecting/connected state
    
    opened by jojonarte 1
  • Nextjs unhandledRejection- ReferenceError: window is not defined

    Nextjs unhandledRejection- ReferenceError: window is not defined

    Hello, when i try to import agora-rtm-react in nextjs

    import { createClient, createLazyChannel } from 'agora-rtm-react'

    I get a 'Window is not defined' error that I can't fix.

    I know there are a few solutions posted for agora-rtm-sdk but I don't know how to use those to import non-default exports.

    https://github.com/AgoraIO/RTM/issues/152#issuecomment-1225501069

    opened by Drishtantr 0
  • ByteArray data from native RTM received as UInt8Array in agora-rtm-sdk web

    ByteArray data from native RTM received as UInt8Array in agora-rtm-sdk web

    There currently is a likely conversion/communication problem between different platforms.

    Example data sent from native that supports ByteArray is turned into UInt8Array

    From ByteArray: [97, 114, 69, 110, 118, 8[97, 114, 69, 110, 118, 80, 97, 114, 97, 109, 58, 63, -128]

    to Uint8Array [97, 114, 69, 110, 118, 8[97, 114, 69, 110, 118, 80, 97, 114, 97, 109, 58, 63, 128

    The negative is gone.

    opened by jojonarte 0
Releases(v1.1.0)
Owner
Agora.io Community
For & by the community 🤓
Agora.io Community
A React wrapper for Typeform Embed SDK.

React wrapper for Typeform Embed SDK

Alex Garces 123 Nov 17, 2022
Our SDK for the 3D rendering platform React-Three-Fiber.

Zappar for React Three Fiber This library allows you use Zappar's best-in-class AR technology with content built using the 3D rendering platform React

Zappar 36 Dec 28, 2022
Google OAuth2 using the new Google Identity Services SDK for React 🚀

React OAuth2 | Google Google OAuth2 using the new Google Identity Services SDK for React @react-oauth/google ?? Install $ npm install @react-oauth/goo

Mo'men Sherif 398 Jan 3, 2023
Inteliver React SDK. Inteliver is an image management as a service.

This repository is Inteliver's official SDK for react framework. Using this SDK you can integrate your react project with inteliver image management service.

Inteliver 2 Sep 8, 2022
Learn how to use the Web3Button component from the thirdweb React SDK!

Web3Button This template shows you how you can use our Web3Button component from our React SDK to call any function on any smart contract; and ensure

thirdweb templates 12 Dec 14, 2022
Foxpage SDK for JavaScript in the browser and Node.js.

Foxpage SDK for JavaScript in the browser and Node.js.

Trip.com Tech 6 Nov 21, 2021
The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers

The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers. Build your product and stop worrying about config files and the odd peculiarities of building browser extensions.

Plasmo 4.8k Dec 27, 2022
React Query Typed Api - An opinioneted wrapper around react-query to implement fully typed api requests

React Query Typed Api - An opinioneted wrapper around react-query to implement fully typed api requests

Apperside 5 Jan 2, 2023
react-disqus-components wrapper for official disqus web api

react-disqus-components React Functional Component with disqus webapi integration. Usage Only support React Functional Component Required Props See Di

Aquariuslt 2 Dec 14, 2022
Basic React wrapper for the Leaflet Geoman Plugin

Basic React wrapper for the Leaflet Geoman Plugin

Derick M. 7 Oct 30, 2022
A very simple wrapper of pinia to try difference API

pinia-dx Pinia DX improvement experiment (Composition API Only). This is a very simple wrapper of pinia to try difference API. import { reactive, toRe

Johnson Chu 3 Oct 27, 2021
🏷️ Type-safe Github API Wrapper

??️ Type-safe Github API Wrapper

Bereket Semagn 17 Mar 2, 2022
🌐🔨 A wrapper for a web worker to simplify workers usage

Extended worker library A wrapper for a web worker Basic usage Use makeWorker function inside a worker file to attach the library interface to methods

Rinat R. 9 Jul 27, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Salvatore Ravidà 177 Oct 10, 2022
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Kévin Dunglas 632 Dec 29, 2022
30 Days of React challenge is a step by step guide to learn React in 30 days

30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take up to 100 days, follow your own pace.

Asabeneh 18.4k Jan 5, 2023
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content.

MohammadAli Karimi 11 Nov 27, 2022
React People lists and connects React developers around the world.

React People React People lists and connects React developers around the world. Progress View the Project page for details on what's planned and what'

Vitor Leonel 15 Aug 23, 2022
React Backbone Binding that works with React 16

WithBackbone React Higher Order Component which will bind Backbone Data that works with React Fiber (v.16) Why did we make it There are already a coup

Beanworks 2 Mar 19, 2021