Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How work with customChannel? #10

Open
jarikus18 opened this issue Apr 21, 2020 · 1 comment
Open

How work with customChannel? #10

jarikus18 opened this issue Apr 21, 2020 · 1 comment

Comments

@jarikus18
Copy link

No description provided.

@vardius
Copy link
Owner

vardius commented Apr 26, 2020

Hi @jarukus, sorry for the delay but I just noticed you issue. Below simple example, please let me know if you have more questions.

As shown in basic example https://github.com/vardius/react-peer-data#examples

  1. Use PeerDataProvider to instantiate and pass peerData object down the component tree
  2. Use hook
  3. Connect to room and send some data as follow
  • send to single participant only participant.send('Hi mate! this is private message.');
  • send to every participant in the room room.send('Some message, can be anything, object etc.');

Simple example, probably could be improved. It is draft only, you have to make it work yourself. But I hope you get the idea.

import React, { useEffect } from 'react';
import { usePeerData } from 'react-peer-data';

function App() {
  const peerData = usePeerData();
  const room = peerData.connect('my-room);

  useEffect(() => {
      room
        .on("participant", participant => {
            participant
                .on("disconnected", () => { console.log('disconnected', participant.id); })
                .on("track", event => { console.log('stream', participant.id, event.streams[0]); })
                .on("message", payload => { console.log(participant.id, payload); })
                .on("error", event => {
                    console.error('peer', participant.id, event);
                    participant.renegotiate();
                });

                // @TODO: store participants in global context or global state ?
                // send only to given participant
                participant.send('Hi mate! this is private message.');
        })
        .on("error", event => { console.error('room', name, event); });


      return () => room.disconnect()
  }, [room]);

//payload object can be everything
const payload = {msg: "Hi there!", date: now()};
//send to everybody in room
room.send(payload);

  return null; // @TODO: render participants
}

export default App;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants