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

58
src/db.ts
View File

@@ -4,6 +4,9 @@
// email: string;
// }
// Efficiently storing data in indexdb: https://stackoverflow.com/a/62975917
const postStoreName: string = "posts";
let keyBase = "dandelion_posts_v1_"
let key = "";
@@ -156,6 +159,60 @@ export async function addDataArray(userID: string, array: any[]): Promise<void>
}
}
export async function mergeDataArray(userID: string, array:any[]): Promise<void> {
try {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readwrite");
const store = transaction.objectStore(postStoreName);
const index = store.index("postIDIndex");
transaction.oncomplete = () => {
console.log("Transaction completed successfully");
db.close();
};
transaction.onerror = (event) => {
console.error("Transaction error:", (event.target as any).error);
db.close();
};
let postsToWrite:any = [];
for (let post of array) {
try {
let havePost = await new Promise<boolean>((resolve, reject) => {
const getRequest = index.getKey(post.post_id);
getRequest.onerror = (e) => {
console.log((e.target as IDBRequest).error);
reject(e);
};
getRequest.onsuccess = async (e) => {
const key = (e.target as IDBRequest).result;
resolve(key !== undefined)
};
});
// console.log(post.post_id, havePost);
if (!havePost ) {
postsToWrite.push(post);
}
} catch (error) {
console.error("Error processing post:", error);
}
}
console.log(`Writing ${postsToWrite.length} posts`);
await addDataArray(userID, postsToWrite);
} catch (error) {
console.error("Error in opening database:", error);
}
}
export async function getData(userID: string, lowerID: Date, upperID: Date): Promise<any | undefined> {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readonly");
@@ -191,6 +248,7 @@ export async function getData(userID: string, lowerID: Date, upperID: Date): Pro
});
}
export async function getAllData(userID: string): Promise<any | undefined> {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readonly");

506
src/main.ts
View File

@@ -1,4 +1,8 @@
import { openDatabase, getData, addData, addDataArray, clearData, deleteData} from "./db.js"
// TODO: virtual list, only rerender what's needed so things can keep playing.
import { openDatabase, getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData } from "./db.js"
declare let WebTorrent: any;
@@ -31,6 +35,7 @@ function uuidv4() {
let logLines: string[] = [];
let logLength = 10;
function log(message: string) {
console.log(message);
logLines.push(`${new Date().toLocaleTimeString()}: ${message}`);
if (logLines.length > 10) {
logLines = logLines.slice(logLines.length - logLength);
@@ -93,14 +98,16 @@ window.addEventListener('scroll', () => {
// 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);
// let postIDs = await peerConnection.getPostIDs();
// let postsWeDontHave = this.diffPostIDs(postIDs);
// let newPosts = await peerConnection.getPosts(postsWeDontHave);
// this.addPosts(newPosts);
@@ -108,7 +115,6 @@ window.addEventListener('scroll', () => {
// }
// }
class wsConnection {
websocket: WebSocket | null = null;
userID = "";
@@ -116,7 +122,88 @@ class wsConnection {
websocketPingInterval: number = 0;
retry = 10;
state = 'disconnected';
peers: Map<string, string[]> = new Map();
messageHandlers: Map<string, (event: any) => void> = new Map();
peerMessageHandlers: Map<string, (data: any) => void> = new Map();
send(message: any) {
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: any) {
for (let [userID, peerIDs] of Object.entries(data.userPeers)) {
this.peers.set(userID, [...Object.keys(peerIDs as any)]);
for (let peerID of [...Object.keys(peerIDs as any)]) {
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: any) {
}
async getPostsForUserResponseHandler(data: any) {
// 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: any) {
let message = data.message;
let posts = await getAllData(message.user_id) ?? []; // this doesn't get all posts!
posts = posts.map((post:any)=>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: any) {
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(): void {
if (this.websocket?.readyState === WebSocket.OPEN) {
@@ -133,18 +220,18 @@ class wsConnection {
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});
}, 10_000)
};
this.websocket.onclose = (evt) => {
this.websocket.onclose = (event) => {
log("ws:disconnected");
// this.retry *= 2;
log(`Retrying in ${this.retry} seconds`);
@@ -152,7 +239,20 @@ class wsConnection {
};
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) => {
@@ -168,6 +268,13 @@ class wsConnection {
constructor(userID: string, peerID: string) {
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) {
@@ -177,34 +284,11 @@ class wsConnection {
}
}
// 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 {
userID:string = '';
peerID:string = '';
username: string = '';
userID: string = '';
peerID: string = '';
posts: Post[] = [];
initMarkdown() {
const renderer = new marked.Renderer();
@@ -213,12 +297,12 @@ class App {
};
marked.setOptions({ renderer: renderer });
}
arrayBufferToBase64(buffer: ArrayBuffer) {
return new Promise((resolve, reject) => {
const blob = new Blob([buffer], { type: 'application/octet-stream' });
const reader = new FileReader();
reader.onloadend = () => {
const dataUrl = reader.result as string;
if (!dataUrl) {
@@ -228,70 +312,70 @@ class App {
const base64 = dataUrl.split(',')[1];
resolve(base64);
};
reader.onerror = (error) => {
reject(error);
};
reader.readAsDataURL(blob);
});
}
async createTestData() {
let postsTestData = await (await fetch("./postsTestData.json")).json();
return postsTestData;
}
time = 0;
timerStart() {
this.time = performance.now();
}
timerDelta() {
return performance.now() - this.time;
}
getFixedTweetText(entry: any) {
let fullText = entry.tweet.full_text;
let linkMarkdown = "";
for (const url of entry.tweet.entities.urls) {
linkMarkdown = `[${url.display_url}](${url.expanded_url})`;
fullText = fullText.replace(url.url, linkMarkdown);
}
return fullText
}
async importTweetArchive(userID: string, tweetArchive: any[]) {
async importTweetArchive(userID: string, tweetArchive: any[]) {
log("Importing tweet archive")
let postsTestData: any[] = [];
// let response = await fetch("./tweets.js");
// let tweetsText = await response.text();
// tweetsText = tweetsText.replace("window.YTD.tweets.part0", "window.tweetData");
// new Function(tweetsText)();
// 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: string = entry.tweet?.entities?.media?.[0]?.media_url_https;
let isImage = false;
if (mediaURL) {
isImage = mediaURL.includes('jpg');
}
let imageData = null;
// if (isImage) {
// try {
@@ -304,46 +388,46 @@ class App {
// } catch (e) {
// console.log(e);
// }
// }
let timeStamp = new Date(entry.tweet.created_at);
let tweetText = this.getFixedTweetText(entry);
let newPost = new Post('bobbydigitales', userID, tweetText, timeStamp, imageData, 'twitter', entry);
postsTestData.push(newPost);
count++;
if (count % 100 === 0) {
log(`Imported ${count} posts...`);
// render(postsTestData);
}
// if (count == 100-1) {
// break;
// }
}
return postsTestData;
}
async createTestData3(userID: string) {
let posts = await (await (fetch('./posts.json'))).json();
return posts;
}
async registerServiceWorker() {
if (!("serviceWorker" in navigator)) {
return;
}
let registrations = await navigator.serviceWorker.getRegistrations();
if (registrations.length > 0) {
console.log("Service worker already registered.");
return registrations[0];
}
navigator.serviceWorker
.register("/sw.js")
.then((registration) => {
@@ -354,107 +438,119 @@ class App {
console.error("Service Worker registration failed:", error);
});
}
addPost(userID: string, posts: Post[], postText: string) {
addPost(userID: string, postText: string) {
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");
if (!id) {
id = generateID();
localStorage.setItem("peer_id", id);
}
return id;
}
getUserID() {
let id = localStorage.getItem("dandelion_id");
if (!id) {
id = generateID();
localStorage.setItem("dandelion_id", id);
}
return id;
}
getUsername() {
let username = localStorage.getItem("dandelion_username");
if (!username) {
username = "not_set"
localStorage.setItem("dandelion_username", username);
}
return username;
}
setFont(fontName: string, fontSize: string) {
let content = document.getElementById('content');
if (!content) {
return;
}
content.style.fontFamily = fontName;
content.style.fontSize = fontSize;
let textArea = document.getElementById('textarea_post');
if (!textArea) {
return;
}
textArea.style.fontFamily = fontName;
textArea.style.fontSize = fontSize;
}
initOffline(connection: wsConnection) {
// Event listener for going offline
window.addEventListener('offline', () => {
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"}`)
}
selectFile(contentType: string): Promise<File | null> {
return new Promise(resolve => {
let input = document.createElement('input');
input.type = 'file';
// input.multiple = multiple;
input.accept = contentType;
input.onchange = () => {
if (input.files == null) {
resolve(null);
return;
}
let files = Array.from(input.files);
// if (multiple)
// resolve(files);
// else
resolve(files[0]);
};
input.click();
});
}
readFile(file: File): Promise<string> {
// Always return a Promise
return new Promise((resolve, reject) => {
@@ -472,161 +568,181 @@ class App {
reader.readAsText(file);
});
}
initButtons(userID: string, posts: Post[], registration: ServiceWorkerRegistration | undefined) {
let font1Button = document.getElementById("button_font1") as HTMLButtonElement;
let font2Button = document.getElementById("button_font2") as HTMLButtonElement;
// let font1Button = document.getElementById("button_font1") as HTMLButtonElement;
// let font2Button = document.getElementById("button_font2") as HTMLButtonElement;
let importTweetsButton = document.getElementById("import_tweets") as HTMLButtonElement;
let clearPostsButton = document.getElementById("clear_posts") as HTMLButtonElement;
let updateApp = document.getElementById("update_app") as HTMLButtonElement;
let ddlnLogoButton = document.getElementById('ddln-logo-button') as HTMLDivElement;
font1Button.addEventListener('click', () => { this.setFont('Bookerly', '16px') });
font2Button.addEventListener('click', () => { this.setFont('Virgil', '16px') });
let usernameField = document.getElementById('username');
usernameField?.addEventListener('input', (event:any)=>{
this.username = event.target.innerText;
localStorage.setItem("dandelion_username", this.username);
})
importTweetsButton.addEventListener('click', async () => {
let file = await this.selectFile('text/*');
console.log(file);
if (file == null) {
return;
}
let tweetData = await this.readFile(file);
tweetData = tweetData.replace('window.YTD.tweets.part0 = ', '');
const tweets = JSON.parse(tweetData);
let imported_posts = await this.importTweetArchive(userID, tweets);
clearData(userID);
// posts = posts.reverse();
addDataArray(userID, imported_posts);
posts = await this.loadPosts(userID) ?? [];
this.render(posts);
});
clearPostsButton.addEventListener('click', () => { clearData(userID); posts = []; this.render(posts) });
let postButton = document.getElementById("button_post") as HTMLButtonElement;
let postText = document.getElementById("textarea_post") as HTMLTextAreaElement;
if (!(postButton && postText)) {
throw new Error();
}
postButton.addEventListener("click", () => {
this.addPost(userID, posts, postText.value);
this.addPost(userID, postText.value);
postText.value = "";
});
updateApp.addEventListener("click", () => {
registration?.active?.postMessage({ type: "update_app" });
});
let infoElement = document.getElementById('info');
if (infoElement === null) {
return;
}
ddlnLogoButton.addEventListener('click', ()=>{infoElement.style.display=='none'? infoElement.style.display='block' : infoElement.style.display='none';});
ddlnLogoButton.addEventListener('click', () => { infoElement.style.display == 'none' ? infoElement.style.display = 'block' : infoElement.style.display = 'none'; });
}
async loadPosts(userID: string) {
this.timerStart();
let posts: any = await getData(userID, new Date(2022, 8), new Date());
if (posts.length > 0) {
log(`Loaded ${posts.length} posts in ${this.timerDelta().toFixed(2)}ms`);
return posts;
}
// posts = await createTestData2(userID);
// log("Adding test data...");
// addDataArray(userID, posts);
// return await getData(userID, new Date(2022, 8), new Date());
}
async main() {
async main() {
let urlParams = (new URL(window.location.href)).searchParams;
let connection_userID = urlParams.get('connect');
let registration = undefined;
if (urlParams.get("sw") === "true") {
// 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: Post[] = [];
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:HTMLImageElement = document.querySelector('#qrcode > img') as HTMLImageElement;
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 as any)?.memory) {
log(`memory used: ${((performance as any).memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`)
}
// const client = new WebTorrent()
// // Sintel, a free, Creative Commons movie
// const torrentId = 'magnet:?xt=urn:btih:6091e199a8d9272a40dd9a25a621a5c355d6b0be&dn=WING+IT!+-+Blender+Open+Movie+1080p.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337';
// client.add(torrentId, function (torrent: any) {
// // Torrents can contain many files. Let's use the .mp4 file
// const file = torrent.files.find(function (file: any) {
// return file.name.endsWith('.mp4')
// })
// // Display the file by adding it to the DOM.
// // Supports video, audio, image files, and more!
// file.appendTo(document.getElementById('torrent-content'));
// })
}
render(posts: Post[]) {
render(posts: Post[]) {
const fragment = document.createDocumentFragment();
let contentDiv = document.getElementById("content");
if (!contentDiv) {
@@ -634,15 +750,12 @@ 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);
if (post) {
fragment.appendChild(post);
count++;
@@ -651,65 +764,72 @@ class App {
break;
}
}
if (!contentDiv) {
throw new Error("Couldn't get content div!");
}
contentDiv.appendChild(fragment);
}
deletePost(userID:string, postID:string) {
async deletePost(userID: string, postID: string) {
deleteData(userID, postID)
this.posts = await this.loadPosts(userID) ?? [];
this.render(this.posts);
}
renderPost(post: Post, posts:Post[]) {
renderPost(post: Post, posts: Post[]) {
if (!(post.hasOwnProperty("text"))) {
throw new Error("Post is malformed!");
}
let containerDiv = document.createElement("div");
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 deleteButton = document.createElement('button'); deleteButton.innerText = 'delete';
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><hr>
<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;
// // return null;
// }
// let image = document.createElement("img");
// const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/jpg' });
// const url = URL.createObjectURL(blob);
// image.onload = () => {
// URL.revokeObjectURL(url);
// };
// image.src = url;
// // image.src = image.src = "data:image/png;base64," + post.image;
// image.className = "postImage";
// containerDiv.appendChild(image);
// containerDiv.appendChild(timestampDiv);
return containerDiv;
}

88
src/sw.ts
View File

@@ -2,16 +2,16 @@
const cacheName = "dandelion_cache_v1";
const contentToCache = [
"/index.html",
"/main.js",
"/marked.min.js",
"/db.js",
"/bookerly.woff2",
"/virgil.woff2",
"/favicon.ico"
'/index.html',
'/main.css',
'/main.js',
'lib//marked.min.js',
'lib/qrcode.min.js',
'/db.js',
'/favicon.ico'
];
self.addEventListener("install", (e:any) => {
self.addEventListener("install", (e: any) => {
e.waitUntil(
(async () => {
const cache = await caches.open(cacheName);
@@ -24,49 +24,53 @@ self.addEventListener("install", (e:any) => {
);
});
self.addEventListener("fetch", (e:any) => {
e.respondWith(
(async () => {
const r = await caches.match(e.request);
if (r) {
console.log(
`[Service Worker] Cache hit for resource: ${e.request.url}`
);
return r;
}
async function responder(event: any) {
console.log('Fetching', event.request.url);
let response;
try {
console.log(
`[Service Worker] Cache miss, attempting to fetch resource: ${e.request.url}`
);
let response = await fetch(event.request);
response = await fetch(e.request);
} catch (e) {
console.warn(e);
}
const cache = await caches.open(cacheName);
console.log(
`[Service Worker] Adding resource to cache: ${e.request.url}`
);
if (!response) {
console.log('Fetch failed, falling back to cache', event.request.url);
let cacheMatch = await caches.match(event.request);
if (!cacheMatch) {
// DUnno what to return here!
}
return cacheMatch;
}
if (!response) {
throw new Error(`Failed to fetch resource: ${e.request.url}`)
}
cache.put(e.request, response.clone());
return response;
})()
);
if (response.status === 206) {
console.log('Not caching partial content');
return response;
}
console.log('Fetch successful, updating cache');
const cache = await caches.open(cacheName);
try {
cache.put(event.request, response.clone()).catch((error)=>console.log('failed to cache', event.request, error));
} catch (e) {
console.log('failed to cache', event.request)
}
return response;
}
self.addEventListener('fetch', function (event: any) {
event.respondWith(responder(event));
});
addEventListener("message", async (e) => {
console.log(`Message received: ${e.data}`);
console.log(`Message received:`, e.data);
switch (e.data.type) {
case "updateMain":
case "update_app":
const cache = await caches.open(cacheName);
console.log(`[Service Worker] Caching new resource: main.js`);
cache.put("/main.js", new Response());
console.log(`[Service Worker] Caching resources`);
// cache.put("/main.js", new Response());
for (let item of contentToCache) {
cache.delete(item);
}
await cache.addAll(contentToCache);
break;
}
});

159
src/webRTC.ts
View File

@@ -1,83 +1,112 @@
const config = {
iceServers: [{ urls: "stun: stun.l.google.com" }],
};
class PeerManager {
connect(peerID:string) {
// Connect to the peer that has the peer id peerID
}
let localConnection = new RTCPeerConnection();
function handleSendChannelStatusChange() {
console.log(handleSendChannelStatusChange);
disconnect(peerID:string) {
}
}
let sendChannel = localConnection.createDataChannel("sendChannel");
sendChannel.onopen = handleSendChannelStatusChange;
sendChannel.onclose = handleSendChannelStatusChange;
let remoteConnection = new RTCPeerConnection();
remoteConnection.ondatachannel = receiveChannelCallback;
localConnection.onicecandidate = (e:any) =>
!e.candidate ||
remoteConnection.addIceCandidate(e.candidate).catch(handleAddCandidateError);
remoteConnection.onicecandidate = (e) =>
!e.candidate ||
localConnection.addIceCandidate(e.candidate).catch(handleAddCandidateError);
class PeerConnection {
static config = {
iceServers: [
{ urls: "stun:stun.l.google.com" },
{ urls: "stun:stun1.l.google.com" },
{ urls: "stun:stun2.l.google.com" },
{ urls: "stun:stun3.l.google.com" },
{ urls: "stun:stun4.l.google.com" },
],};
}
function handleCreateDescriptionError(error:any) {
console.log(`Unable to create an offer: ${error.toString()}`);
}
function handleLocalAddCandidateSuccess() {
console.log('handleLocalAddCandidateSuccess');
}
function handleRemoteAddCandidateSuccess() {
console.log('handleRemoteAddCandidateSuccess');
}
function handleAddCandidateError() {
console.log("Oh noes! addICECandidate failed!");
}
localConnection
.createOffer()
.then((offer) => localConnection.setLocalDescription(offer))
.then(() =>
remoteConnection.setRemoteDescription(localConnection.localDescription as RTCSessionDescriptionInit),
)
.then(() => remoteConnection.createAnswer())
.then((answer) => remoteConnection.setLocalDescription(answer))
.then(() =>
localConnection.setRemoteDescription(remoteConnection.localDescription as RTCSessionDescriptionInit),
)
.catch(handleCreateDescriptionError);
const config = {
iceServers: [{ urls: "stun:stun.mystunserver.tld" }],
};
function handleReceiveChannelStatusChange(event:any) {
let receiveChannel = event.channel;
let polite = true;
if (receiveChannel) {
console.log(
`Receive channel's status has changed to ${receiveChannel.readyState}`,
);
// const signaler = new SignalingChannel();
const signaler:any = {}
const pc = new RTCPeerConnection(config);
const constraints = { audio: true, video: true };
const selfVideo = document.querySelector("video.selfview");
const remoteVideo = document.querySelector("video.remoteview");
async function start() {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
for (const track of stream.getTracks()) {
pc.addTrack(track, stream);
}
// selfVideo.srcObject = stream;
} catch (err) {
console.error(err);
}
}
function receiveChannelCallback(event:any) {
let receiveChannel = event.channel;
receiveChannel.onmessage = handleReceiveMessage;
receiveChannel.onopen = handleReceiveChannelStatusChange;
receiveChannel.onclose = handleReceiveChannelStatusChange;
pc.ontrack = ({ track, streams }) => {
track.onunmute = () => {
// if (remoteVideo.srcObject) {
// return;
// }
// remoteVideo.srcObject = streams[0];
};
};
let makingOffer = false;
pc.onnegotiationneeded = async () => {
try {
makingOffer = true;
await pc.setLocalDescription();
signaler.send({ description: pc.localDescription });
} catch (err) {
console.error(err);
} finally {
makingOffer = false;
}
};
function sendMessage(message:string) {
sendChannel.send(message);
pc.onicecandidate = ({ candidate }) => signaler.send({ candidate });
let ignoreOffer = false;
signaler.onmessage = async ({ data: { description, candidate } }: MessageEvent) => {
try {
if (description) {
const offerCollision =
description.type === "offer" &&
(makingOffer || pc.signalingState !== "stable");
ignoreOffer = !polite && offerCollision;
if (ignoreOffer) {
return;
}
await pc.setRemoteDescription(description);
if (description.type === "offer") {
await pc.setLocalDescription();
signaler.send({ description: pc.localDescription });
}
} else if (candidate) {
try {
await pc.addIceCandidate(candidate);
} catch (err) {
if (!ignoreOffer) {
throw err;
}
}
}
} catch (err) {
console.error(err);
}
function handleReceiveMessage(event:any) {
console.log(event.data);
}
};