add basic frontend modules to access the api
This commit is contained in:
parent
3a81b952c4
commit
a9a4cdbb5c
5 changed files with 157 additions and 1 deletions
63
frontend/src/gateway.js
Normal file
63
frontend/src/gateway.js
Normal 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));
|
||||||
|
}
|
||||||
|
};
|
|
@ -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
41
frontend/src/request.js
Normal 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
52
frontend/src/storage.js
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue