Experimenting with PeerJS
So, several month ago, I made my own notetaking app. Markdown support, autosave, saved locally inside the browser's IndexedDB.
Later, i need a sync feature, so i can transfer my notes from my phone to my PC easily.
My first approach? Quite naive. Just upload the local notes into a centralized server. Good, working, but it's quite costly (I have to cover its monthly server cost) and there's quite a privacy issue (I technically can read everyone's note).
Is there any alternative?
Then, I tried PeerJS. The idea is simple : send the data from phone to PC directly by using P2P protocol.
It's done. Here's the procedure.
First, setup the receiving device. Open "recv.html" (https://altilunium.github.io/md/recv.html), then set the p2p key. This key must be globally unique, so if there's a duplicate error, you have to refresh the page and pick another key.
Then, prepare to send the data. Open your notes (https://altilunium.github.io/md/), click the p2p-upload button (middle), then enter the p2p key that we created on first step.
Done, your notes will be copied to your recv.html.
Here's the recv.html source code :
var pro = prompt("Input p2p key")
var p2p_key = "cpad_receiver_" + pro
var peer = new Peer(p2p_key);
peer.on('error', function(err){
console.log(err)
alert(err)
})
// Display P2P key on the screen
peer.on('open',function(e){
alert("Connection successful!")
var keyh1 = document.getElementById("not")
keyh1.innerHTML = pro
})
// Data received. Show it on the screen
peer.on('connection', function(conn) {
conn.on('data', function(data){
var nyo = document.getElementById("main-txtbox")
nyo.innerHTML = data
});
});
Here's the p2p-upload button source code :
var peer = new Peer();
async function publish_p2p() {
var pro = prompt("Input p2p key")
var p2p_key = "cpad_receiver_" + pro
conn = peer.connect(p2p_key);
conn.on('open', function(){
var payload = document.getElementById("main-txtbox")
conn.send(payload.innerHTML);
alert("Successful!")
})
}
Quick and simple.
At this point, I'm using free PeerJS's PeerServer connection broker. If their server is down, then this functionality will also down as well.
For reliability reasons, maybe I should set-up my own PeerServer instance later.