Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michal-wrzosek/p2p-chat
Serverless peer to peer chat on WebRTC
https://github.com/michal-wrzosek/p2p-chat
p2p p2p-chat react reactjs typescript typescript-library webrtc webrtc-demos
Last synced: 3 months ago
JSON representation
Serverless peer to peer chat on WebRTC
- Host: GitHub
- URL: https://github.com/michal-wrzosek/p2p-chat
- Owner: michal-wrzosek
- License: mit
- Created: 2019-11-03T09:59:41.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T21:41:18.000Z (almost 2 years ago)
- Last Synced: 2024-07-31T09:49:49.496Z (3 months ago)
- Topics: p2p, p2p-chat, react, reactjs, typescript, typescript-library, webrtc, webrtc-demos
- Language: HTML
- Size: 3.16 MB
- Stars: 207
- Watchers: 9
- Forks: 35
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-webrtc - p2p-chat - Serverless peer to peer chat on WebRTC. (Samples)
README
# p2p-chat
p2p chat on WebRTC with additional AES256 encryption and file sharing (no signaling server required)
# [>pitu-pitu chat<](https://michal-wrzosek.github.io/p2p-chat/)
The source code of demo chat is [here](https://github.com/michal-wrzosek/p2p-chat/tree/master/example/src)
This is an example of how you can build p2p chat on WebRTC with no signaling servers. It should work in both Chrome and Firefox. WebRTC needs STUN and TURN servers to successfully establish p2p connection over the network. In my demo app I used some publicly available endpoints:
- stun:stun.l.google.com:19302
- turn:turn.anyfirewall.com:443?transport=tcp (webrtc:webrtc)
Additional features:
- AES256 encryption to all messages and files
- file sharing
- chat available as a single HTML file with no dependencies over the network so you can just save that file locally [index.html](https://raw.githubusercontent.com/michal-wrzosek/p2p-chat/master/example/build/index.html)
Since there's no signaling server in between, you have to send a WebRTC connection description manually to your friend :D Sounds funny but it works (like 70% of times - sometimes you have to try to connect one more time by reloading a chat)
# Library
I made a small wrapper around WebRTC for the purpose of constructing a demo chat. It boils down to a function I called `createPeerConnection`.
### To install:
```
npm install --save p2p-chat
```
### To use:
To initiate a new connection (as a HOST):
```typescript
import { createPeerConnection } from 'p2p-chat';
const iceServers: RTCIceServer[] = [
{
urls: 'stun:stun.l.google.com:19302',
},
{
urls: 'turn:turn.anyfirewall.com:443?transport=tcp',
username: 'webrtc',
credential: 'webrtc',
},
];
const someAsyncFunc = async () => {
const onChannelOpen = () => console.log(`Connection ready!`);
const onMessageReceived = (message: string) => console.log(`New incomming message: ${message}`);
const { localDescription, setAnswerDescription, sendMessage } = await createPeerConnection({ iceServers, onMessageReceived, onChannelOpen });
// you will send localDescription to your SLAVE and he will give you his localDescription. You will set it as an answer to establish connection
const answerDescription = 'This is a string you will get from a SLAVE trying to connect with your localDescription';
setAnswerDescription(answerDescription);
// later on you can send a message to SLAVE
sendMessage('Hello SLAVE');
}
```
To join a connection (as a SLAVE):
```typescript
import { createPeerConnection } from 'p2p-chat';
const iceServers: RTCIceServer[] = [
{
urls: 'stun:stun.l.google.com:19302',
},
{
urls: 'turn:turn.anyfirewall.com:443?transport=tcp',
username: 'webrtc',
credential: 'webrtc',
},
];
const someAsyncFunc = async () => {
const remoteDescription = 'This is a string you will get from a host...';
const onChannelOpen = () => console.log(`Connection ready!`);
const onMessageReceived = (message: string) => console.log(`New incomming message: ${message}`);
const { localDescription, sendMessage } = await createPeerConnection({ remoteDescription, iceServers, onMessageReceived, onChannelOpen });
// Send your local description to HOST and wait for a connection to start
// Later on you can send a message to HOST
sendMessage('Hello HOST');
};
```
You can take a look how I implemented it in a demo chat app:
[example/src/App.tsx](https://github.com/michal-wrzosek/p2p-chat/blob/master/example/src/App.tsx)
### Typescript
This lib has types already built in. No need for @types/...
---
This package was bootstrapped with [typescript-lib-boilerplate](https://github.com/michal-wrzosek/typescript-lib-boilerplate)