mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-19 02:56:23 +08:00
init: the first public commit for AFFiNE
This commit is contained in:
DarkSky
@@ -0,0 +1,347 @@
|
||||
import * as Y from 'yjs';
|
||||
import * as bc from 'lib0/broadcastchannel';
|
||||
import * as time from 'lib0/time';
|
||||
import * as encoding from 'lib0/encoding';
|
||||
import * as decoding from 'lib0/decoding';
|
||||
import * as syncProtocol from 'y-protocols/sync';
|
||||
import * as awarenessProtocol from 'y-protocols/awareness';
|
||||
import * as math from 'lib0/math';
|
||||
|
||||
import { WebsocketProvider } from './provider';
|
||||
import { Message } from './handler';
|
||||
|
||||
export const readMessage = (
|
||||
provider: WebsocketProvider,
|
||||
buf: Uint8Array,
|
||||
emitSynced: boolean
|
||||
): encoding.Encoder => {
|
||||
const decoder = decoding.createDecoder(buf);
|
||||
const encoder = encoding.createEncoder();
|
||||
const messageType = decoding.readVarUint(decoder) as Message;
|
||||
const messageHandler = provider.messageHandlers[messageType];
|
||||
if (/** @type {any} */ messageHandler) {
|
||||
messageHandler(encoder, decoder, provider, emitSynced, messageType);
|
||||
} else {
|
||||
console.error('Unable to compute message');
|
||||
}
|
||||
return encoder;
|
||||
};
|
||||
|
||||
export const registerBroadcastSubscriber = (
|
||||
provider: WebsocketProvider,
|
||||
awareness: awarenessProtocol.Awareness,
|
||||
document: Y.Doc
|
||||
) => {
|
||||
const channel = provider.broadcastChannel;
|
||||
|
||||
const subscriber = (data: ArrayBuffer, origin: any) => {
|
||||
if (origin !== provider) {
|
||||
const encoder = readMessage(provider, new Uint8Array(data), false);
|
||||
if (encoding.length(encoder) > 1) {
|
||||
bc.publish(channel, encoding.toUint8Array(encoder), provider);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
bc.subscribe(channel, subscriber);
|
||||
let connected = true;
|
||||
|
||||
// send sync step1 to bc
|
||||
// write sync step 1
|
||||
const encoderSync = encoding.createEncoder();
|
||||
encoding.writeVarUint(encoderSync, Message.sync);
|
||||
syncProtocol.writeSyncStep1(encoderSync, document);
|
||||
bc.publish(channel, encoding.toUint8Array(encoderSync), this);
|
||||
// broadcast local state
|
||||
const encoderState = encoding.createEncoder();
|
||||
encoding.writeVarUint(encoderState, Message.sync);
|
||||
syncProtocol.writeSyncStep2(encoderState, document);
|
||||
bc.publish(channel, encoding.toUint8Array(encoderState), this);
|
||||
// write queryAwareness
|
||||
const encoderAwarenessQuery = encoding.createEncoder();
|
||||
encoding.writeVarUint(encoderAwarenessQuery, Message.queryAwareness);
|
||||
bc.publish(channel, encoding.toUint8Array(encoderAwarenessQuery), this);
|
||||
// broadcast local awareness state
|
||||
const encoderAwarenessState = encoding.createEncoder();
|
||||
encoding.writeVarUint(encoderAwarenessState, Message.awareness);
|
||||
encoding.writeVarUint8Array(
|
||||
encoderAwarenessState,
|
||||
awarenessProtocol.encodeAwarenessUpdate(awareness, [document.clientID])
|
||||
);
|
||||
bc.publish(channel, encoding.toUint8Array(encoderAwarenessState), this);
|
||||
|
||||
const broadcastMessage = (buf: ArrayBuffer) => {
|
||||
if (connected) bc.publish(channel, buf, provider);
|
||||
};
|
||||
|
||||
const disconnect = () => {
|
||||
const encoder = encoding.createEncoder();
|
||||
encoding.writeVarUint(encoder, Message.awareness);
|
||||
encoding.writeVarUint8Array(
|
||||
encoder,
|
||||
awarenessProtocol.encodeAwarenessUpdate(
|
||||
awareness,
|
||||
[document.clientID],
|
||||
new Map()
|
||||
)
|
||||
);
|
||||
broadcastMessage(encoding.toUint8Array(encoder));
|
||||
if (connected) {
|
||||
bc.unsubscribe(channel, subscriber);
|
||||
connected = false;
|
||||
}
|
||||
};
|
||||
|
||||
return { broadcastMessage, disconnect };
|
||||
};
|
||||
|
||||
export const registerUpdateHandler = (
|
||||
provider: WebsocketProvider,
|
||||
awareness: awarenessProtocol.Awareness,
|
||||
doc: Y.Doc,
|
||||
broadcastMessage: (buf: ArrayBuffer) => void
|
||||
) => {
|
||||
const beforeUnloadHandler = () => {
|
||||
awarenessProtocol.removeAwarenessStates(
|
||||
awareness,
|
||||
[doc.clientID],
|
||||
'window unload'
|
||||
);
|
||||
};
|
||||
|
||||
const awarenessUpdateHandler = ({ added, updated, removed }: any) => {
|
||||
const changedClients = added.concat(updated).concat(removed);
|
||||
const encoder = encoding.createEncoder();
|
||||
encoding.writeVarUint(encoder, Message.awareness);
|
||||
encoding.writeVarUint8Array(
|
||||
encoder,
|
||||
awarenessProtocol.encodeAwarenessUpdate(awareness, changedClients)
|
||||
);
|
||||
broadcastMessage(encoding.toUint8Array(encoder));
|
||||
};
|
||||
|
||||
// Listens to Yjs updates and sends them to remote peers (ws and broadcastchannel)
|
||||
const documentUpdateHandler = (update: Uint8Array, origin: any) => {
|
||||
if (origin !== provider) {
|
||||
const encoder = encoding.createEncoder();
|
||||
encoding.writeVarUint(encoder, Message.sync);
|
||||
syncProtocol.writeUpdate(encoder, update);
|
||||
broadcastMessage(encoding.toUint8Array(encoder));
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('beforeunload', beforeUnloadHandler);
|
||||
} else if (typeof process !== 'undefined') {
|
||||
process.on('exit', beforeUnloadHandler);
|
||||
}
|
||||
|
||||
awareness.on('update', awarenessUpdateHandler);
|
||||
doc.on('update', documentUpdateHandler);
|
||||
return () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.removeEventListener('beforeunload', beforeUnloadHandler);
|
||||
} else if (typeof process !== 'undefined') {
|
||||
process.off('exit', beforeUnloadHandler);
|
||||
}
|
||||
|
||||
awareness.off('update', awarenessUpdateHandler);
|
||||
doc.off('update', documentUpdateHandler);
|
||||
};
|
||||
};
|
||||
|
||||
enum WebSocketState {
|
||||
disconnected = 0,
|
||||
connecting,
|
||||
connected,
|
||||
}
|
||||
|
||||
// @todo - this should depend on awareness.outdatedTime
|
||||
const WEBSOCKET_RECONNECT = 30000;
|
||||
|
||||
const _getToken = async (
|
||||
remote: string,
|
||||
token: string,
|
||||
existsProtocol?: string,
|
||||
reconnect = 3
|
||||
) => {
|
||||
if (existsProtocol && reconnect > 0) {
|
||||
return { protocol: existsProtocol };
|
||||
}
|
||||
const url = new URL(remote);
|
||||
url.protocol = window.location.protocol;
|
||||
return fetch(url, { method: 'POST', headers: { token } }).then(r =>
|
||||
r.json()
|
||||
);
|
||||
};
|
||||
|
||||
export const registerWebsocket = (
|
||||
provider: WebsocketProvider,
|
||||
token: string,
|
||||
resync = -1,
|
||||
reconnect = 3,
|
||||
existsProtocol?: string
|
||||
) => {
|
||||
let state = WebSocketState.disconnected;
|
||||
let lastMessageReceived = 0;
|
||||
|
||||
let websocket: WebSocket | undefined = undefined;
|
||||
|
||||
_getToken(provider.url, token, existsProtocol, reconnect)
|
||||
.then(({ protocol }) => {
|
||||
websocket = new WebSocket(provider.url, protocol);
|
||||
websocket.binaryType = 'arraybuffer';
|
||||
state = WebSocketState.connecting;
|
||||
|
||||
provider.synced = false;
|
||||
|
||||
websocket.onmessage = event => {
|
||||
lastMessageReceived = time.getUnixTime();
|
||||
const encoder = readMessage(
|
||||
provider,
|
||||
new Uint8Array(event.data),
|
||||
true
|
||||
);
|
||||
if (encoding.length(encoder) > 1) {
|
||||
websocket?.send(encoding.toUint8Array(encoder));
|
||||
}
|
||||
};
|
||||
websocket.onerror = event => {
|
||||
provider.emit('connection-error', [event, provider]);
|
||||
};
|
||||
websocket.onclose = event => {
|
||||
provider.emit('connection-close', [event, provider]);
|
||||
websocket = undefined;
|
||||
|
||||
if (
|
||||
[
|
||||
WebSocketState.connecting,
|
||||
WebSocketState.connected,
|
||||
].includes(state)
|
||||
) {
|
||||
state = WebSocketState.disconnected;
|
||||
provider.synced = false;
|
||||
// update awareness (all users except local left)
|
||||
awarenessProtocol.removeAwarenessStates(
|
||||
provider.awareness,
|
||||
Array.from(
|
||||
provider.awareness.getStates().keys()
|
||||
).filter(client => client !== provider.doc.clientID),
|
||||
provider
|
||||
);
|
||||
provider.emit('status', [{ status: 'disconnected' }]);
|
||||
} else {
|
||||
provider.wsUnsuccessfulReconnects++;
|
||||
}
|
||||
if (reconnect <= 0) {
|
||||
provider.emit('lost-connection', []);
|
||||
}
|
||||
// Start with no reconnect timeout and increase timeout by
|
||||
// using exponential backoff starting with 100ms
|
||||
setTimeout(
|
||||
registerWebsocket,
|
||||
math.min(
|
||||
math.pow(2, provider.wsUnsuccessfulReconnects) * 100,
|
||||
provider.maxBackOffTime
|
||||
),
|
||||
provider,
|
||||
token,
|
||||
resyncInterval,
|
||||
reconnect > 0 ? reconnect - 1 : 3,
|
||||
protocol
|
||||
);
|
||||
};
|
||||
websocket.onopen = () => {
|
||||
lastMessageReceived = time.getUnixTime();
|
||||
state = WebSocketState.connected;
|
||||
provider.wsUnsuccessfulReconnects = 0;
|
||||
provider.emit('status', [{ status: 'connected' }]);
|
||||
// always send sync step 1 when connected
|
||||
const encoder = encoding.createEncoder();
|
||||
encoding.writeVarUint(encoder, Message.sync);
|
||||
syncProtocol.writeSyncStep1(encoder, provider.doc);
|
||||
websocket?.send(encoding.toUint8Array(encoder));
|
||||
// broadcast local awareness state
|
||||
if (provider.awareness.getLocalState() !== null) {
|
||||
const encoderAwarenessState = encoding.createEncoder();
|
||||
encoding.writeVarUint(
|
||||
encoderAwarenessState,
|
||||
Message.awareness
|
||||
);
|
||||
encoding.writeVarUint8Array(
|
||||
encoderAwarenessState,
|
||||
awarenessProtocol.encodeAwarenessUpdate(
|
||||
provider.awareness,
|
||||
[provider.doc.clientID]
|
||||
)
|
||||
);
|
||||
websocket?.send(
|
||||
encoding.toUint8Array(encoderAwarenessState)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
provider.emit('status', [{ status: 'connecting' }]);
|
||||
})
|
||||
.catch(err => {
|
||||
if (reconnect <= 0) {
|
||||
provider.emit('lost-connection', []);
|
||||
}
|
||||
provider.wsUnsuccessfulReconnects++;
|
||||
setTimeout(
|
||||
registerWebsocket,
|
||||
math.min(
|
||||
math.pow(2, provider.wsUnsuccessfulReconnects) * 100,
|
||||
provider.maxBackOffTime
|
||||
),
|
||||
provider,
|
||||
token,
|
||||
resyncInterval,
|
||||
reconnect > 0 ? reconnect - 1 : 3
|
||||
);
|
||||
});
|
||||
|
||||
let resyncInterval = 0;
|
||||
if (resync > 0) {
|
||||
resyncInterval = setInterval(() => {
|
||||
if (websocket?.readyState === WebSocket.OPEN) {
|
||||
// resend sync step 1
|
||||
const encoder = encoding.createEncoder();
|
||||
encoding.writeVarUint(encoder, Message.sync);
|
||||
syncProtocol.writeSyncStep1(encoder, provider.doc);
|
||||
websocket.send(encoding.toUint8Array(encoder));
|
||||
}
|
||||
}, resync) as unknown as number;
|
||||
}
|
||||
|
||||
const checkInterval = setInterval(() => {
|
||||
if (
|
||||
state === WebSocketState.connected &&
|
||||
WEBSOCKET_RECONNECT < time.getUnixTime() - lastMessageReceived
|
||||
) {
|
||||
// no message received in a long time - not even your own awareness
|
||||
// updates (which are updated every 15 seconds)
|
||||
websocket?.close();
|
||||
}
|
||||
}, WEBSOCKET_RECONNECT / 10);
|
||||
|
||||
const broadcastMessage = (buf: ArrayBuffer) => {
|
||||
if (state === WebSocketState.connected) {
|
||||
websocket?.send(buf);
|
||||
}
|
||||
};
|
||||
|
||||
const disconnect = () => {
|
||||
if (websocket != null) {
|
||||
websocket.close();
|
||||
websocket = undefined;
|
||||
state = WebSocketState.disconnected;
|
||||
if (resyncInterval !== 0) {
|
||||
clearInterval(resyncInterval);
|
||||
}
|
||||
clearInterval(checkInterval);
|
||||
}
|
||||
};
|
||||
|
||||
return { broadcastMessage, disconnect };
|
||||
};
|
||||
@@ -0,0 +1,82 @@
|
||||
import * as encoding from 'lib0/encoding';
|
||||
import * as decoding from 'lib0/decoding';
|
||||
import * as authProtocol from 'y-protocols/auth';
|
||||
import * as awarenessProtocol from 'y-protocols/awareness';
|
||||
import * as syncProtocol from 'y-protocols/sync';
|
||||
|
||||
import { WebsocketProvider } from './provider';
|
||||
|
||||
const permissionDeniedHandler = (provider: WebsocketProvider, reason: string) =>
|
||||
console.warn(`Permission denied to access ${provider.url}.\n${reason}`);
|
||||
|
||||
export enum Message {
|
||||
sync = 0,
|
||||
queryAwareness,
|
||||
awareness,
|
||||
auth,
|
||||
}
|
||||
|
||||
export type MessageCallback = (
|
||||
encoder: encoding.Encoder,
|
||||
decoder: decoding.Decoder,
|
||||
provider: WebsocketProvider,
|
||||
emitSynced: boolean,
|
||||
messageType: number
|
||||
) => void;
|
||||
|
||||
export const handler: Record<Message, MessageCallback> = {
|
||||
[Message.sync]: (encoder, decoder, provider, emitSynced, messageType) => {
|
||||
encoding.writeVarUint(encoder, Message.sync);
|
||||
const syncMessageType = syncProtocol.readSyncMessage(
|
||||
decoder,
|
||||
encoder,
|
||||
provider.doc,
|
||||
provider
|
||||
);
|
||||
if (
|
||||
emitSynced &&
|
||||
syncMessageType === syncProtocol.messageYjsSyncStep2 &&
|
||||
!provider.synced
|
||||
) {
|
||||
provider.synced = true;
|
||||
}
|
||||
},
|
||||
[Message.queryAwareness]: (
|
||||
encoder,
|
||||
decoder,
|
||||
provider,
|
||||
emitSynced,
|
||||
messageType
|
||||
) => {
|
||||
encoding.writeVarUint(encoder, Message.queryAwareness);
|
||||
encoding.writeVarUint8Array(
|
||||
encoder,
|
||||
awarenessProtocol.encodeAwarenessUpdate(
|
||||
provider.awareness,
|
||||
Array.from(provider.awareness.getStates().keys())
|
||||
)
|
||||
);
|
||||
},
|
||||
|
||||
[Message.awareness]: (
|
||||
encoder,
|
||||
decoder,
|
||||
provider,
|
||||
emitSynced,
|
||||
messageType
|
||||
) => {
|
||||
awarenessProtocol.applyAwarenessUpdate(
|
||||
provider.awareness,
|
||||
decoding.readVarUint8Array(decoder),
|
||||
provider
|
||||
);
|
||||
},
|
||||
|
||||
[Message.auth]: (encoder, decoder, provider, emitSynced, messageType) => {
|
||||
authProtocol.readAuthMessage(
|
||||
decoder,
|
||||
provider.doc,
|
||||
permissionDeniedHandler
|
||||
);
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { WebsocketProvider } from './provider';
|
||||
@@ -0,0 +1,134 @@
|
||||
import * as Y from 'yjs';
|
||||
|
||||
import { Observable } from 'lib0/observable';
|
||||
import * as url from 'lib0/url';
|
||||
|
||||
import * as awarenessProtocol from 'y-protocols/awareness';
|
||||
|
||||
import { handler } from './handler';
|
||||
import {
|
||||
registerBroadcastSubscriber,
|
||||
registerUpdateHandler,
|
||||
registerWebsocket,
|
||||
} from './connector';
|
||||
|
||||
/**
|
||||
* Websocket Provider for Yjs. Creates a websocket connection to sync the shared document.
|
||||
* The document name is attached to the provided url. I.e. the following example
|
||||
* creates a websocket connection to http://localhost:3000/my-document-name
|
||||
*
|
||||
* @example
|
||||
* import * as Y from 'yjs'
|
||||
* import { WebsocketProvider } from 'jwt-rpc'
|
||||
* const doc = new Y.Doc()
|
||||
* const provider = new WebsocketProvider('http://localhost:3000', 'my-document-name', doc)
|
||||
*/
|
||||
export class WebsocketProvider extends Observable<string> {
|
||||
maxBackOffTime: number;
|
||||
url: string;
|
||||
roomName: string;
|
||||
|
||||
awareness: awarenessProtocol.Awareness;
|
||||
doc: Y.Doc;
|
||||
|
||||
wsUnsuccessfulReconnects: number;
|
||||
private _synced: boolean;
|
||||
|
||||
broadcastChannel: string;
|
||||
private _broadcast?: {
|
||||
broadcastMessage: (buf: ArrayBuffer) => void;
|
||||
disconnect: () => void;
|
||||
};
|
||||
|
||||
private _websocket?: {
|
||||
broadcastMessage: (buf: ArrayBuffer) => void;
|
||||
disconnect: () => void;
|
||||
};
|
||||
|
||||
private _updateHandlerDestroy: () => void;
|
||||
|
||||
constructor(
|
||||
token: string,
|
||||
serverUrl: string,
|
||||
roomName: string,
|
||||
doc: Y.Doc,
|
||||
{
|
||||
awareness = new awarenessProtocol.Awareness(doc),
|
||||
params = {},
|
||||
resyncInterval = -1,
|
||||
maxBackOffTime = 2500,
|
||||
} = {}
|
||||
) {
|
||||
super();
|
||||
|
||||
this.roomName = roomName;
|
||||
// ensure that url is always ends with /
|
||||
while (serverUrl[serverUrl.length - 1] === '/') {
|
||||
serverUrl = serverUrl.slice(0, serverUrl.length - 1);
|
||||
}
|
||||
this.broadcastChannel = serverUrl + '/' + roomName;
|
||||
const encodedParams = url.encodeQueryParams(params);
|
||||
this.url =
|
||||
this.broadcastChannel +
|
||||
(encodedParams.length === 0 ? '' : '?' + encodedParams);
|
||||
|
||||
this.awareness = awareness;
|
||||
this.doc = doc;
|
||||
|
||||
this.maxBackOffTime = maxBackOffTime;
|
||||
this.wsUnsuccessfulReconnects = 0;
|
||||
|
||||
this._synced = false;
|
||||
|
||||
this._websocket = registerWebsocket(this, token, resyncInterval);
|
||||
// TODO: The current implementation will cause a broadcast storm, and then re-implement one, or just go websocket synchronization
|
||||
// this._broadcast = registerBroadcastSubscriber(
|
||||
// this,
|
||||
// this.awareness,
|
||||
// this.doc
|
||||
// );
|
||||
|
||||
this._updateHandlerDestroy = registerUpdateHandler(
|
||||
this,
|
||||
awareness,
|
||||
doc,
|
||||
buf => {
|
||||
this._websocket?.broadcastMessage(buf);
|
||||
this._broadcast?.broadcastMessage(buf);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
get messageHandlers() {
|
||||
return handler;
|
||||
}
|
||||
|
||||
get synced() {
|
||||
return this._synced;
|
||||
}
|
||||
|
||||
set synced(state) {
|
||||
if (this._synced !== state) {
|
||||
this._synced = state;
|
||||
this.emit('synced', [state]);
|
||||
this.emit('sync', [state]);
|
||||
}
|
||||
}
|
||||
|
||||
override destroy() {
|
||||
if (this._broadcast) {
|
||||
const disconnect = this._broadcast.disconnect;
|
||||
this._broadcast = undefined;
|
||||
disconnect();
|
||||
}
|
||||
|
||||
if (this._websocket) {
|
||||
const disconnect = this._websocket.disconnect;
|
||||
this._websocket = undefined;
|
||||
disconnect();
|
||||
}
|
||||
|
||||
this._updateHandlerDestroy?.();
|
||||
super.destroy();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user