bobbydigitales/dandelion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

peers syncing for a single user

Browse Source
This commit is contained in:
bobbydigitales
2024-09-20 20:54:54 -07:00
parent 88f5cb677b
commit 998840ec2c
17 changed files with 1099 additions and 733 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
main.js
View File

@@ -1,4 +1,5 @@
import { getData, addData, addDataArray, clearData, deleteData } from "./db.js";
// TODO: virtual list, only rerender what's needed so things can keep playing.
import { getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData } from "./db.js";
// let posts:any;
// let keyBase = "dandelion_posts_v1_"
// let key:string = "";
@@ -19,6 +20,7 @@ function uuidv4() {
let logLines = [];
let logLength = 10;
function log(message) {
console.log(message);
logLines.push(`${new Date().toLocaleTimeString()}: ${message}`);
if (logLines.length > 10) {
logLines = logLines.slice(logLines.length - logLength);
@@ -59,8 +61,9 @@ window.addEventListener('scroll', () => {
// You can perform your action here
}
});
// let peer = await new PeerConnection(peer_id);
// let connectionReply = await wsConnection.send('hello');
// for (let peeer of connectionReply) {
// for (let peer of connectionReply) {
// let peerConnection = await wsConnection.send('connect', peer.id);
// if (peerConnection) {
// this.peers.push(peerConnection);
@@ -71,6 +74,67 @@ window.addEventListener('scroll', () => {
// }
// }
class wsConnection {
send(message) {
let json = "";
try {
json = JSON.stringify(message);
}
catch (e) {
console.log(e, "wsConnection send: Couldn't serialize message", message);
}
log(`ws->${json.slice(0, 80)}`);
this.websocket.send(json);
}
helloResponseHandler(data) {
for (let [userID, peerIDs] of Object.entries(data.userPeers)) {
this.peers.set(userID, [...Object.keys(peerIDs)]);
for (let peerID of [...Object.keys(peerIDs)]) {
if (peerID === this.peerID) {
continue;
}
this.send({
type: "peer_message",
from: this.peerID,
to: peerID,
message: { type: "get_posts_for_user", user_id: userID }
});
}
}
}
pongHandler(data) {
}
async getPostsForUserResponseHandler(data) {
// log(`getPostsForUserResponse: ${data}`)
let message = data.message;
console.log(`getPostsForUserResponseHandler Got ${message.posts.length} from peer ${data.from}`);
for (let post of message.posts) {
post.post_timestamp = new Date(post.post_timestamp);
}
console.log(`Merging same user peer posts...`);
await mergeDataArray(message.user_id, data.message.posts);
if (message.user_id === this.userID) {
app.posts = await app.loadPosts(this.userID) ?? [];
app.render(app.posts);
}
}
async getPostsForUserHandler(data) {
let message = data.message;
let posts = await getAllData(message.user_id) ?? []; // this doesn't get all posts!
posts = posts.map((post) => post.data);
// let posts = await getAllData(message.user_id) ?? [];
let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_posts_for_user_response", posts: posts, user_id: message.user_id } };
this.send(responseMessage);
}
async peerMessageHandler(data) {
log(`peerMessageHandler ${data}`);
let peerMessageType = data.message.type;
let handler = this.peerMessageHandlers.get(peerMessageType);
if (!handler) {
console.error(`got peer message type we don't have a handler for: ${peerMessageType}`);
return;
}
handler(data);
}
connect() {
if (this.websocket?.readyState === WebSocket.OPEN) {
return;
@@ -87,24 +151,32 @@ class wsConnection {
console.log(error.message);
return;
}
this.websocket.onopen = (evt) => {
this.websocket.onopen = (event) => {
log("ws:connected");
this.websocket.send(`{"type":"hello", "user_id": "${this.userID}", "peer_id":"${this.peerID}"}`);
this.send({ type: "hello", user_id: this.userID, peer_id: this.peerID });
this.websocketPingInterval = window.setInterval(() => {
if (!navigator.onLine) {
return;
}
this.websocket.send(`{"type":"ping", "peer_id": "${this.peerID}"}`);
this.send({ type: "ping", peer_id: this.peerID });
}, 10000);
};
this.websocket.onclose = (evt) => {
this.websocket.onclose = (event) => {
log("ws:disconnected");
// this.retry *= 2;
log(`Retrying in ${this.retry} seconds`);
window.setTimeout(() => { this.connect(); }, this.retry * 1000);
};
this.websocket.onmessage = (event) => {
log('ws:response: ' + event.data);
log('ws:<-' + event.data.slice(0, 80));
let data = JSON.parse(event.data);
let { type } = data;
let handler = this.messageHandlers.get(type);
if (!handler) {
console.warn(`Got a message we can't handle:`, type);
return;
}
handler(data);
};
this.websocket.onerror = (event) => {
log('ws:error: ' + event);
@@ -120,36 +192,28 @@ class wsConnection {
this.websocketPingInterval = 0;
this.retry = 10;
this.state = 'disconnected';
this.peers = new Map();
this.messageHandlers = new Map();
this.peerMessageHandlers = new Map();
this.userID = userID;
this.peerID = peerID;
this.messageHandlers.set('hello', this.helloResponseHandler.bind(this));
this.messageHandlers.set('pong', this.pongHandler);
this.messageHandlers.set('peer_message', this.peerMessageHandler.bind(this));
this.peerMessageHandlers.set('get_posts_for_user', this.getPostsForUserHandler.bind(this));
this.peerMessageHandlers.set('get_posts_for_user_response', this.getPostsForUserResponseHandler.bind(this));
this.connect();
if (!this.websocket) {
// set a timer and retry?
}
}
}
// function connectWebsocket(userID: string) {
// let websocket = new WebSocket(`ws://${window.location.hostname}:${window.location.port}/ws`);
// websocket.onopen = function (evt) {
// log("Websocket: CONNECTED");
// websocket.send(`{"messageType":"connect", "id": "${userID}"}`);
// let websocketPingInterval = window.setInterval(() => { websocket.send(`{"messageType":"ping", "id": "${userID}"}`); }, 5000)
// };
// websocket.onclose = function (evt) {
// log("Websocket: DISCONNECTED");
// };
// websocket.onmessage = function (evt) {
// log('Websocket: RESPONSE: ' + evt.data);
// };
// websocket.onerror = function (evt) {
// log('Websocket: ERROR: ' + evt);
// };
// return websocket;
// }
class App {
constructor() {
this.username = '';
this.userID = '';
this.peerID = '';
this.posts = [];
this.time = 0;
}
initMarkdown() {
@@ -207,9 +271,9 @@ class App {
// let tweets = JSON.parse(tweetJSON);
let count = 0;
for (let entry of tweetArchive) {
if (entry.tweet.hasOwnProperty("in_reply_to_screen_name") || entry.tweet.retweeted || entry.tweet.full_text.startsWith("RT")) {
continue;
}
// if (entry.tweet.hasOwnProperty("in_reply_to_screen_name") || entry.tweet.retweeted || entry.tweet.full_text.startsWith("RT")) {
// continue;
// }
let mediaURL = entry.tweet?.entities?.media?.[0]?.media_url_https;
let isImage = false;
if (mediaURL) {
@@ -266,16 +330,16 @@ class App {
console.error("Service Worker registration failed:", error);
});
}
addPost(userID, posts, postText) {
addPost(userID, postText) {
if ((typeof postText !== "string") || postText.length === 0) {
log("Not posting an empty string...");
return;
}
let post = new Post(`bobbydigitales`, userID, postText, new Date());
posts.push(post);
let post = new Post(this.username, userID, postText, new Date());
this.posts.push(post);
// localStorage.setItem(key, JSON.stringify(posts));
addData(userID, post);
this.render(posts);
this.render(this.posts);
}
getPeerID() {
let id = localStorage.getItem("peer_id");
@@ -293,6 +357,14 @@ class App {
}
return id;
}
getUsername() {
let username = localStorage.getItem("dandelion_username");
if (!username) {
username = "not_set";
localStorage.setItem("dandelion_username", username);
}
return username;
}
setFont(fontName, fontSize) {
let content = document.getElementById('content');
if (!content) {
@@ -313,9 +385,11 @@ class App {
log("offline");
});
// Event listener for going online
window.addEventListener('online', () => {
window.addEventListener('online', async () => {
log("online");
connection.connect();
this.posts = await this.loadPosts(this.userID) ?? [];
this.render(this.posts);
});
log(`Online status: ${navigator.onLine ? "online" : "offline"}`);
}
@@ -357,14 +431,17 @@ class App {
});
}
initButtons(userID, posts, registration) {
let font1Button = document.getElementById("button_font1");
let font2Button = document.getElementById("button_font2");
// let font1Button = document.getElementById("button_font1") as HTMLButtonElement;
// let font2Button = document.getElementById("button_font2") as HTMLButtonElement;
let importTweetsButton = document.getElementById("import_tweets");
let clearPostsButton = document.getElementById("clear_posts");
let updateApp = document.getElementById("update_app");
let ddlnLogoButton = document.getElementById('ddln-logo-button');
font1Button.addEventListener('click', () => { this.setFont('Bookerly', '16px'); });
font2Button.addEventListener('click', () => { this.setFont('Virgil', '16px'); });
let usernameField = document.getElementById('username');
usernameField?.addEventListener('input', (event) => {
this.username = event.target.innerText;
localStorage.setItem("dandelion_username", this.username);
});
importTweetsButton.addEventListener('click', async () => {
let file = await this.selectFile('text/*');
console.log(file);
@@ -388,7 +465,7 @@ class App {
throw new Error();
}
postButton.addEventListener("click", () => {
this.addPost(userID, posts, postText.value);
this.addPost(userID, postText.value);
postText.value = "";
});
updateApp.addEventListener("click", () => {
@@ -416,40 +493,54 @@ class App {
let urlParams = (new URL(window.location.href)).searchParams;
let connection_userID = urlParams.get('connect');
let registration = undefined;
if (urlParams.get("sw") === "true") {
registration = await this.registerServiceWorker();
}
// if (urlParams.get("sw") === "true") {
registration = await this.registerServiceWorker();
// }
if (connection_userID) {
console.log('connect', connection_userID);
localStorage.setItem("dandelion_id", connection_userID);
}
let posts = [];
this.username = this.getUsername();
document.getElementById('username').innerText = this.username;
let userID = this.getUserID();
let peerID = this.getPeerID();
this.userID = userID;
this.peerID = peerID;
let connectURL = `https://${document.location.hostname}?connect=${this.userID}`;
document.getElementById('connectURL').innerHTML = `<a href="${connectURL}">connect</a>`;
let qrcode = await new QRCode(document.getElementById('qrcode'), {
text: connectURL,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
let qrcodeImage = document.querySelector('#qrcode > img');
qrcodeImage.classList.add('qrcode_image');
log(`user:${userID} peer:${peerID}`);
let websocket = new wsConnection(userID, peerID);
window.addEventListener('beforeunload', () => { websocket.disconnect(); });
this.initOffline(websocket);
this.initButtons(userID, posts, registration);
this.initButtons(userID, this.posts, registration);
let time = 0;
let delta = 0;
if (navigator.storage && navigator.storage.persist && !navigator.storage.persisted) {
debugger;
const isPersisted = await navigator.storage.persist();
log(`Persisted storage granted: ${isPersisted}`);
}
log(`Persisted: ${(await navigator?.storage?.persisted())?.toString()}`);
// let isPersisted = await navigator?.storage?.persisted();
// if (!isPersisted) {
// debugger;
// const isPersisted = await navigator.storage.persist();
// log(`Persisted storage granted: ${isPersisted}`);
// }
// log(`Persisted: ${(await navigator?.storage?.persisted())?.toString()}`);
this.initMarkdown();
// let main = await fetch("/main.js");
// let code = await main.text();
// console.log(code);
// registration.active.postMessage({type:"updateMain", code:code});
posts = await this.loadPosts(userID) ?? [];
this.posts = await this.loadPosts(userID) ?? [];
// debugger;
this.timerStart();
this.render(posts); // , (postID:string)=>{this.deletePost(userID, postID)}
this.render(this.posts); // , (postID:string)=>{this.deletePost(userID, postID)}
let renderTime = this.timerDelta();
log(`render took: ${renderTime.toFixed(2)}ms`);
if (performance?.memory) {
@@ -476,7 +567,6 @@ class App {
}
contentDiv.innerHTML = "";
let count = 0;
new QRCode(document.getElementById('qrcode'), `https://ddlion.net/?connect=${this.userID}`);
for (let i = posts.length - 1; i >= 0; i--) {
let postData = posts[i];
let post = this.renderPost(postData, posts);
@@ -493,8 +583,10 @@ class App {
}
contentDiv.appendChild(fragment);
}
deletePost(userID, postID) {
async deletePost(userID, postID) {
deleteData(userID, postID);
this.posts = await this.loadPosts(userID) ?? [];
this.render(this.posts);
}
renderPost(post, posts) {
if (!(post.hasOwnProperty("text"))) {
@@ -504,13 +596,20 @@ class App {
let timestamp = `${post.post_timestamp.toLocaleTimeString()} · ${post.post_timestamp.toLocaleDateString()}`;
let deleteButton = document.createElement('button');
deleteButton.innerText = 'delete';
// deleteButton.onclick = ()=>{deletefunc(post.post_id)};
let editButton = document.createElement('button');
editButton.innerText = 'edit';
deleteButton.onclick = () => { this.deletePost(this.userID, post.post_id); };
let postTemplate = `<div><hr>
<div><span class='header' title='${timestamp}'>@${post.author} - ${post.post_timestamp.toLocaleDateString()}</span></div>
<div>
<span class='header' title='${timestamp}'>@${post.author} -
<span style="color:rgb(128,128,128)">${post.post_timestamp.toLocaleDateString()}</span>
</span>
<span id="deleteButton"></span><span id="editButton"></span></div>
<div>${marked.parse(post.text)}</div>
</div>`;
containerDiv.innerHTML = postTemplate;
containerDiv.appendChild(deleteButton);
containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton);
containerDiv.querySelector('#editButton')?.appendChild(editButton);
// if (!("image_data" in post && post.image_data)) {
// containerDiv.appendChild(timestampDiv);
// return containerDiv;