ui: SharedWorker notification

pull/422/head^2
undefined 2 years ago
parent 4e9e6ddbcb
commit 023a13b066

@ -146,10 +146,21 @@ export default function (env: { production?: boolean, measure?: boolean } = {})
},
{
test: /\.[mc]?[jt]sx?$/,
exclude: /@types\//,
exclude: [/@types\//, /components\/message\//],
type: 'javascript/auto',
use: [esbuildLoader()],
},
{
test: /\.[mc]?[jt]sx?$/,
include: /components\/message\//,
type: 'javascript/auto',
use: [{
loader: 'ts-loader',
options: {
transpileOnly: true,
},
}],
},
{
test: /\.styl$/,
use: [extractCssLoader(), cssLoader(), postcssLoader(), stylusLoader()],

@ -9,9 +9,10 @@ import tpl from 'vj/utils/tpl';
const onmessage = (msg) => {
console.log('Received message', msg);
if (document.hidden) return false;
if (msg.mdoc.flag & FLAG_ALERT) {
// Is alert
return new InfoDialog({
new InfoDialog({
cancelByClickingBack: false,
$body: tpl`
<div class="typo">
@ -19,9 +20,10 @@ const onmessage = (msg) => {
<p>${i18n(msg.mdoc.content)}</p>
</div>`,
}).open();
return true;
}
// Is message
return new VjNotification({
new VjNotification({
...(msg.udoc._id === 1 && msg.mdoc.flag & 4)
? { message: i18n('You received a system message, click here to view.') }
: {
@ -32,6 +34,26 @@ const onmessage = (msg) => {
duration: 15000,
action: () => window.open(`/home/messages?uid=${msg.udoc._id}`, '_blank'),
}).show();
return true;
};
const url = new URL('/home/messages-conn', window.location.href);
// TODO handle a better way for cookie
url.searchParams.append('sid', document.cookie);
const endpoint = url.toString().replace('http', 'ws');
const initWorkerMode = () => {
console.log('Messages: using SharedWorker');
const worker = new SharedWorker(new URL('./worker', import.meta.url), { name: 'Hydro Messages Worker' });
worker.port.start();
worker.port.postMessage({ type: 'conn', path: endpoint, cookie: document.cookie });
worker.port.onmessage = async (message) => {
if (process.env.NODE_ENV !== 'production') console.log('onmessage: ', message);
const { payload, type } = message.data;
if (type === 'message') {
if (onmessage(payload)) worker.port.postMessage({ type: 'ack', id: payload.mdoc._id });
}
};
};
const messagePage = new AutoloadPage('messagePage', (pagename) => {
@ -44,11 +66,16 @@ const messagePage = new AutoloadPage('messagePage', (pagename) => {
action: () => window.open('/home/messages', '_blank'),
}).show();
}
if (window.SharedWorker) {
initWorkerMode();
return;
}
if (!window.BroadcastChannel) {
console.error('BoardcastChannel not supported');
return;
}
console.log('Messages: using BroadcastChannel');
let isMaster = false;
const selfId = nanoid();
const channel = new BroadcastChannel('hydro-messages');
@ -70,45 +97,19 @@ const messagePage = new AutoloadPage('messagePage', (pagename) => {
isMaster = true;
localStorage.setItem('page.master', selfId);
const masterChannel = new BroadcastChannel('hydro-messages');
const url = new URL('/home/messages-conn', window.location.href.replace('http', 'ws'));
// TODO handle a better way for cookie
url.searchParams.append('sid', document.cookie);
const sock = new ReconnectingWebsocket(url.toString());
const pending = {};
sock.onopen = () => console.log('Connected');
sock.onerror = console.error;
sock.onclose = (...args) => console.log('Closed', ...args);
sock.onmessage = async (message) => {
if (process.env.NODE_ENV !== 'production') console.log('onmessage: ', message);
const payload = JSON.parse(message.data);
const id = nanoid();
masterChannel.postMessage({ type: 'message', id, payload });
const success = await new Promise<boolean>((resolve) => {
pending[id] = resolve;
setTimeout(() => {
delete pending[id];
resolve(false);
}, 1000);
});
if (!success && window.Notification?.permission === 'granted') {
const notification = new window.Notification(
payload.udoc.uname || 'Hydro Notification',
{
icon: payload.udoc.avatarUrl || '/android-chrome-192x192.png',
body: payload.mdoc.content,
},
);
notification.onclick = () => window.open('/home/messages');
}
};
masterChannel.onmessage = (msg) => {
if (msg.data.type === 'message-push') pending[msg.data.id]?.(true);
masterChannel.postMessage({ type: 'message', payload });
};
}
channel.onmessage = (msg) => {
if (msg.data.type === 'message' && !document.hidden) {
channel.postMessage({ type: 'message-push', id: msg.data.id });
onmessage(msg.data.payload);
}
if (msg.data.type === 'master') {

@ -0,0 +1,80 @@
/* eslint-disable no-restricted-globals */
/// <reference types="@types/sharedworker" />
import ReconnectingWebsocket from 'reconnecting-websocket';
console.log('SharedWorker init');
let conn: ReconnectingWebsocket;
let lcookie: string;
const ports: MessagePort[] = [];
interface RequestInitSharedConnPayload {
type: 'conn';
cookie: string;
path: string;
}
interface RequestAckPayload {
type: 'ack';
id: string;
}
type RequestPayload = RequestInitSharedConnPayload | RequestAckPayload;
const ack = {};
function broadcastMsg(message: any) {
for (const p of ports) p.postMessage(message);
}
function initConn(path: string, port: MessagePort, cookie: any) {
if (cookie !== lcookie) conn?.close();
else if (conn && conn.readyState === conn.OPEN) return;
lcookie = cookie;
console.log('Init connection for', path);
conn = new ReconnectingWebsocket(path);
ports.push(port);
conn.onopen = () => conn.send(cookie);
conn.onerror = () => broadcastMsg({ type: 'error' });
conn.onclose = (ev) => broadcastMsg({ type: 'close', error: ev.reason });
conn.onmessage = (message) => {
if (process.env.NODE_ENV !== 'production') console.log('SharedWorker.port.onmessage: ', message);
const payload = JSON.parse(message.data);
if (payload.event === 'auth') {
if (['PermissionError', 'PrivilegeError'].includes(payload.error)) {
broadcastMsg({ type: 'close', error: payload.error });
conn.close();
} else {
console.log('Connected to', path);
broadcastMsg({ type: 'open' });
}
} else {
broadcastMsg({ type: 'message', payload });
let acked = false;
ack[payload.mdoc.id] = () => { acked = true; };
setTimeout(() => {
delete ack[payload.mdoc.id];
if (acked) return;
if (Notification?.permission !== 'granted') {
console.log('Notification permission denied');
return;
}
const notification = new Notification(
payload.udoc.uname || 'Hydro Notification',
{
icon: payload.udoc.avatarUrl || '/android-chrome-192x192.png',
body: payload.mdoc.content,
},
);
notification.onclick = () => window.open('/home/messages');
}, 5000);
}
};
}
// eslint-disable-next-line no-undef
onconnect = function (e) {
const port = e.ports[0];
port.addEventListener('message', (msg: { data: RequestPayload }) => {
if (msg.data.type === 'conn') initConn(msg.data.path, port, msg.data.cookie);
if (msg.data.type === 'ack') ack[msg.data.id]();
});
port.start();
};

@ -1,6 +1,6 @@
{
"name": "@hydrooj/ui-default",
"version": "4.39.19",
"version": "4.39.20",
"author": "undefined <i@undefined.moe>",
"license": "AGPL-3.0",
"main": "hydro.js",
@ -31,6 +31,7 @@
"@types/qrcode": "^1.5.0",
"@types/react-dom": "^18.0.6",
"@types/redux-logger": "^3.0.9",
"@types/sharedworker": "^0.0.80",
"@vscode/codicons": "^0.0.32",
"autoprefixer": "^10.4.8",
"browser-update": "^3.3.40",
@ -104,6 +105,7 @@
"through2": "^4.0.2",
"timeago-react": "^3.0.5",
"timeago.js": "^4.0.2",
"ts-loader": "^9.3.1",
"vditor": "^3.8.17",
"vinyl-buffer": "^1.0.1",
"web-streams-polyfill": "^3.2.1",

Loading…
Cancel
Save