Coder Social home page Coder Social logo

elizabethhudnott / peerjs-groups Goto Github PK

View Code? Open in Web Editor NEW
28.0 5.0 7.0 2.2 MB

A thin abstraction layer over Peer.js that allows peers to easily find and communicate with other peers that share a common group ID tag.

Home Page: https://elizabethhudnott.github.io/peerjs-groups

HTML 6.52% JavaScript 93.48%
peerjs webrtc-datachannel webrtc-data peerjs-platform peer-to-peer javascript javascript-library webrtc webrtc-demos webrtc-javascript-library p2p

peerjs-groups's Introduction

Peer.js Groups

Using Peer.js Groups, a web browser on one machine can send encrypted data to (and receive encryped data from) other web browsers spread across the internet without needing to send the data via an intermediate server (in most cases). The data sent and received can be any JavaScript objects (or any other JavaScript values such as strings).

Peer.js Groups is a thin layer of abstraction over the Peer.js library that allows peers to easily find and communicate with other peers that share an interest in a common group ID tag (e.g. a chat room name or a gaming session name).

How Peeer.js Groups Differs from EasyRTC, SimpleRTC, RTCMultiConnection, etc.

Great projects though the others are, I decided to roll my own. This was initially primarily for the benefit of my own learning. But as this project develops I'd like it to stick to a few principles that I've developed, and these principles perhaps distinguish this project from the competition (aside from this project being in the very early experimental stages!).

  1. A focus on data connections as the first priority rather than audio or video.
  2. Minimalistic - no extra bells or whistles.
  3. The API is kept as simple as possible.
  4. Minimal assumptions about what you want to do with the library.

An example of the last principle is that you are able to implement whatever logic you wish in response to a joinrequest event.

How it Works

  • WebRTC is an API built into modern browsers that allows encrypted, peer-to-peer communication directly between browsers.
  • Before a peer can start sending data to another peer, the peers need a way of finding each other and negotiating the creation of a peer-to-peer connection. These are called discovery and signalling respectively. WebRTC doesn't come with built-in discovery or signalling protocol implementations. These usually require a server, but only to set up the initial connection. Once the connection is established then the signalling phase is finished. The server doesn't receive any of the actual messages of the conversation because it's all sent peer-to-peer.
  • Peer.js Groups uses a JavaScript library called Peer.js, which provides the signalling protocol. (SIP is another popular alternative.)
  • Peer.js enables one peer to instantiate a point-to-point connection with one other peer, provided that it knows the other peer's peer ID in advance. The Peer.js documentation strongly recommends allowing Peer.js to assign each peer an ID randomly (although it does let programmers go against the advice and choose their own peer IDs instead).
  • Peer.js Groups uses Peer.js to create a "three-way" (or "four way"...) connection between peers. A "three-way" connection between peers, say A, B and C, is actually implemented as 3 two-way connections (A<->B, A<->C, B<->C). These details are all handled automatically behind the scenes. From the perspective of someone using Peer.js Groups it works like a group chat (except the messages are JavaScript objects).

Software Required

  • A modern web browser with support for WebRTC.
  • The Peer.js client-side library.
  • Peer.js Groups (also client-side).
  • A server running the Peer.js server-side code such peerjs.com.
  • If you have two peers trying to connect to each other and both are behind separate NATs then you may encounter connection problems, in which case you'll need access to a TURN server.

A TURN server enables a peer A to send an encrypted message to a peer B by first sending the message to the TURN server, and then the TURN server sends it B. The TURN server cannot decrypt the content of the messages. However, many people behind NATs can still communicate with each other without an intermediate TURN server by using something called STUN, which is an extra step at the connection set-up stage, which Peer.js handles automatically.

Server Installation

  1. Install Node.js.
  2. Install the Peer.js server using the Terminal/Command Prompt.
npm install peer
  1. Start the server.
cd node_modules/peer/bin
./peerjs -p 9000

Client-Side Code

See the "Hello World!" demo for a complete example.

  1. Link to the JavaScript files from your HTML.
<script src="peerjs.min.js"></script>
<script src="peerjs-groups.js"></script>
  1. Create a PeerGroup object.
var group = new PeerGroup(function (error) {
  console.error(error);
  //TODO Put some better error handling code in here...
 }, {host: 'localhost'});

To be continued...

peerjs-groups's People

Contributors

elizabethhudnott avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

peerjs-groups's Issues

Name randomization of group.

So I've been trying to use this code for my project on the side and the main problem I'm trying to tackle is the admin disconnecting issue mentioned in #2. I've tried to solving this by having each client listen for the 'userleft' event and adding an extra parameter to that event that lest them know if it was the admin that left, after this each client disconnects from the group and attempts to reconnect, my thinking was that which ever client did this first would become the new group admin (as no other client would be connected) and then each other client would connect to it.

And while this does work it introduces a new problem where the new admin keeps its previous name(which is passed to the connect function) but when the other clients attempt to connect to it their names become randomizes regardless of what is passed to their connect function.

image

I have been trying to check for a while what could be causing this and the only thing I narrowed down upon is that this happens if the clients try to connect within a small amount of time of each other(give or take 300ms).
What would be a possible cause of this issue?

if admin is disconnected then the room is useless

how to handle the way if an admin decided to disconnect!
is there a way to make the users keep chatting without the need for an administrator
if not then the admin must be connected all the time?

Is this project abandoned?

The examples don't work on my server, I tried to use it with the peerjs version in this repo and with the latest one. I see the last commit was in 2018, any chance to update it and make the doc?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.