add basic frontend modules to access the api

This commit is contained in:
hippoz 2022-04-14 02:12:38 +03:00
parent 3a81b952c4
commit a9a4cdbb5c
No known key found for this signature in database
GPG key ID: 7C52899193467641
5 changed files with 157 additions and 1 deletions

63
frontend/src/gateway.js Normal file
View file

@ -0,0 +1,63 @@
import { getAuthToken, getItem } from "./storage";
export const GatewayPayloadType = {
Hello: 0,
Authenticate: 1,
Ready: 2,
Ping: 3,
ChannelCreate: 110,
ChannelUpdate: 111,
ChannelDelete: 112,
MessageCreate: 120,
MessageUpdate: 121,
MessageDelete: 122,
}
export default {
ws: null,
authenticated: false,
heartbeatInterval: null,
user: null,
channels: null,
init() {
this.ws = new WebSocket(getItem("gatewayBase"));
this.ws.onmessage = (message) => {
const payload = JSON.parse(message);
switch (payload.t) {
case GatewayPayloadType.Hello: {
this.send({
t: GatewayPayloadType.Authenticate,
d: getAuthToken()
});
this.heartbeatInterval = setInterval(() => {
this.send({
t: GatewayPayloadType.Ping,
d: 0
});
}, payload.d.pingInterval);
break;
}
case GatewayPayloadType.Ready: {
this.user = payload.d.user;
this.channels = payload.d.channels;
break;
}
}
};
this.ws.onclose = () => {
this.authenticated = false;
this.user = null;
this.channels = null;
if (this.heartbeatInterval) {
clearInterval(this.heartbeatInterval);
}
};
},
send(data) {
return this.ws.send(JSON.stringify(data));
}
};

View file

@ -1,4 +1,4 @@
import App from './App.svelte'; import App from './components/App.svelte';
const app = new App({ const app = new App({
target: document.body target: document.body

41
frontend/src/request.js Normal file
View file

@ -0,0 +1,41 @@
import { getAuthToken } from "./storage";
export default async function(method, endpoint, auth=true, body=null) {
const options = {
method,
};
if (body) {
options.headers = {
...options.headers || {},
"Content-Type": "application/json"
};
}
if (auth) {
const token = getAuthToken();
if (token) {
options.headers = {
...options.headers || {},
"Authorization": `Bearer ${token}`
};
}
}
try {
const res = await fetch(endpoint, options);
return {
success: true,
json: await res.json(),
ok: res.ok,
status: res.status
}
} catch (e) {
return {
success: false,
json: null,
ok: res.ok,
status: res.status
}
}
}

52
frontend/src/storage.js Normal file
View file

@ -0,0 +1,52 @@
const defaults = {
apiBase: `${window.location.origin}/api/v1`,
gatewayBase: `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/gateway`
};
const dummyProvider = {
_store: {},
getItem(key) {
return this._store[key];
},
setItem(key, value) {
this._store[key] = value;
}
};
function getProvider() {
if (!window.localStorage || !window.localStorage.getItem || !window.localStorage.setItem) {
return dummyProvider;
}
return window.localStorage;
}
export function getItem(key) {
return getProvider().getItem(key);
}
export function setItem(key, value) {
return getProvider().setItem(key, value);
}
export function getAuthToken() {
return getItem("token");
}
export function setAuthToken(value) {
return setItem("token", value);
}
export function setItemIfNull(key, value) {
const provider = getProvider();
if (!provider.getItem(key)) {
provider.setItem(key, value);
return true;
}
return false;
}
export function initStorageDefaults() {
for (const [k, v] of Object.entries(defaults)) {
setItemIfNull(k, v);
}
}