hiimgoodpack/brainlet
1
0
Fork 0
forked from hippoz/brainlet
Code Issues Pull requests Projects Releases Wiki Activity

make socket connection more robust

Browse source
This commit is contained in:
hippoz 2020-11-17 17:20:33 +02:00
parent 667a843370
commit 68e2bd1a6c
1 changed files with 41 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
app/resources/js/app.js
View file

@ -64,6 +64,12 @@ class GatewayConnection {
} }
} }
GatewayConnection.prototype.disconnect = function() {
this.socket?.disconnect();
this.socket = null;
this.isConnected = false;
};
GatewayConnection.prototype.connect = function(token) { GatewayConnection.prototype.connect = function(token) {
console.log('[*] [gateway] [handshake] Trying to connect to gateway'); console.log('[*] [gateway] [handshake] Trying to connect to gateway');
this.socket = io('/gateway', { this.socket = io('/gateway', {
@ -73,21 +79,25 @@ GatewayConnection.prototype.connect = function(token) {
transports: ['websocket'] transports: ['websocket']
}); });
this.socket.on('hello', () => { this.socket.on('connect', () => {
console.log('[*] [gateway] [handshake] Got hello from server, sending yoo...'); this.socket.once('hello', () => {
this.socket.emit('yoo'); console.log('[*] [gateway] [handshake] Got hello from server, sending yoo...');
this.isConnected = true; this.socket.emit('yoo');
this.onConnect('CONNECT_RECEIVED_HELLO'); this.isConnected = true;
this.onConnect('CONNECT_RECEIVED_HELLO');
});
}); });
this.socket.on('error', (e) => { this.socket.on('error', (e) => {
console.log('[E] [gateway] Gateway error', e); console.log('[E] [gateway] Gateway error', e);
this.isConnected = false; this.isConnected = false;
this.socket = null;
this.onDisconnect('DISCONNECT_ERR', e); this.onDisconnect('DISCONNECT_ERR', e);
}); });
this.socket.on('disconnectNotification', (e) => { this.socket.on('disconnectNotification', (e) => {
console.log('[E] [gateway] Received disconnect notfication', e); console.log('[E] [gateway] Received disconnect notfication', e);
this.isConnected = false; this.isConnected = false;
this.socket = null;
this.onDisconnect('DISCONNECT_NOTIF', e); this.onDisconnect('DISCONNECT_NOTIF', e);
}); });
this.socket.on('disconnect', (e) => { this.socket.on('disconnect', (e) => {
@ -171,7 +181,7 @@ const app = new Vue({
credentials: 'include' credentials: 'include'
}); });
if (res.status === 200) { if (res.ok) {
const json = await res.json(); const json = await res.json();
if (json.user.permissionLevel >= 1) { if (json.user.permissionLevel >= 1) {
this.loggedInUser = json.user; this.loggedInUser = json.user;
@ -202,21 +212,17 @@ const app = new Vue({
performGatewayConnection: function() { performGatewayConnection: function() {
// TODO: again, the thing im doing with the token is not very secure, since its being sent by the current user info endpoint and is also being send through query parameters // TODO: again, the thing im doing with the token is not very secure, since its being sent by the current user info endpoint and is also being send through query parameters
this.gateway.onDisconnect = (e) => { this.gateway.onDisconnect = (e) => {
this.resetSnackbarButton(); this.okNotification('Connection lost.');
this.notification('ERROR: You have been disconnected from the gateway. Realtime features such as chat will not work and unexpected errors may occur.');
};
this.gateway.onConnect = () => {
this.gateway.socket.on('message', this.processMessage);
}; };
this.gateway.connect(this.loggedInUser.token); this.gateway.connect(this.loggedInUser.token);
this.gateway.socket.on('message', this.processMessage);
}, },
processMessage: async function(messageObject) { processMessage: async function(messageObject) {
if (!this.messages[messageObject.category._id]) this.$set(this.messages, messageObject.category._id, []); if (!this.messages[messageObject.category._id]) this.$set(this.messages, messageObject.category._id, []);
this.messages[messageObject.category._id].push(messageObject); this.messages[messageObject.category._id].push(messageObject);
if (messageObject.author.username !== this.loggedInUser.username && messageObject.category._id !== this.selection.category._id) { if (messageObject.author.username !== this.loggedInUser.username && messageObject.category._id !== this.selection.category._id) {
this.resetSnackbarButton(); this.okNotification(`${messageObject.author.username}: ${messageObject.content}`);
this.notification(`${messageObject.author.username}: ${messageObject.content}`);
} }
}, },
openChatForCategory: async function(categoryId) { openChatForCategory: async function(categoryId) {
@ -238,7 +244,7 @@ const app = new Vue({
credentials: 'include' credentials: 'include'
}); });
if (res.status === 200) { if (res.ok) {
const json = await res.json(); const json = await res.json();
this.selection.category.title = 'categories'; this.selection.category.title = 'categories';
@ -264,8 +270,7 @@ const app = new Vue({
this.selection.posts.push({ title: v.title, body: '', _id: v._id, creator: v.creator }); this.selection.posts.push({ title: v.title, body: '', _id: v._id, creator: v.creator });
} }
} else { } else {
this.resetSnackbarButton(); this.okNotification('Failed to fetch category list');
this.notification('Failed to fetch category list');
} }
}, },
browse: async function(category) { browse: async function(category) {
@ -279,7 +284,7 @@ const app = new Vue({
credentials: 'include' credentials: 'include'
}); });
if (res.status === 200) { if (res.ok) {
const json = await res.json(); const json = await res.json();
this.selection.category.title = title; this.selection.category.title = title;
@ -296,8 +301,7 @@ const app = new Vue({
this.selection.posts.push({ title: v.title, body: v.body, _id: v._id, creator: v.creator }); this.selection.posts.push({ title: v.title, body: v.body, _id: v._id, creator: v.creator });
} }
} else { } else {
this.resetSnackbarButton(); this.okNotification('Failed to fetch category');
this.notification('Failed to fetch category');
} }
}, },
refresh: function() { refresh: function() {
@ -331,23 +335,21 @@ const app = new Vue({
credentials: 'include' credentials: 'include'
}); });
if (res.status === 200) { if (res.ok) {
const json = await res.json(); const json = await res.json();
this.viewingProfile.username = json.user.username; this.viewingProfile.username = json.user.username;
this.viewingProfile._id = json.user._id; this.viewingProfile._id = json.user._id;
this.viewingProfile.role = json.user.role; this.viewingProfile.role = json.user.role;
this.viewingProfile.show = true; this.viewingProfile.show = true;
} else { } else {
this.resetSnackbarButton(); this.okNotification('Failed to fetch user data');
this.notification('Failed to fetch user data');
} }
}, },
// Content creation // Content creation
showCreatePostDialog: function() { showCreatePostDialog: function() {
if (!this.selection.category.isCategory) { if (!this.selection.category.isCategory) {
this.resetSnackbarButton(); this.okNotification('You are not in a category');
this.notification('You are not in a category');
return; return;
} }
@ -355,8 +357,7 @@ const app = new Vue({
}, },
createPost: async function() { createPost: async function() {
if (!this.selection.category.isCategory) { if (!this.selection.category.isCategory) {
this.resetSnackbarButton(); this.okNotification('You are not in a category');
this.notification('You are not in a category');
return; return;
} }
@ -377,25 +378,21 @@ const app = new Vue({
}) })
}); });
if (res.status !== 200) { if (res.ok) {
if (res.status === 401 || res.status === 403) { if (res.status === 401 || res.status === 403) {
this.resetSnackbarButton(); this.okNotification('You are not allowed to do that');
this.notification('You are not allowed to do that');
return; return;
} }
if (res.status === 429) { if (res.status === 429) {
this.resetSnackbarButton(); this.okNotification('Chill! You are posting too much!');
this.notification('Chill! You are posting too much!');
return; return;
} }
const json = await res.json(); const json = await res.json();
this.resetSnackbarButton(); this.okNotification(getCreatePostError(json));
this.notification(getCreatePostError(json));
return; return;
} else { } else {
this.resetSnackbarButton(); this.okNotification('Successfully created post');
this.notification('Successfully created post');
this.dialog.show.createPost = false; this.dialog.show.createPost = false;
this.browse(this.selection.category); this.browse(this.selection.category);
return; return;
@ -416,25 +413,21 @@ const app = new Vue({
}) })
}); });
if (res.status !== 200) { if (res.ok) {
if (res.status === 401 || res.status === 403) { if (res.status === 401 || res.status === 403) {
this.resetSnackbarButton(); this.okNotification('You are not allowed to do that');
this.notification('You are not allowed to do that');
return; return;
} }
if (res.status === 429) { if (res.status === 429) {
this.resetSnackbarButton(); this.okNotification('Chill! You are posting too much!');
this.notification('Chill! You are posting too much!');
return; return;
} }
const json = await res.json(); const json = await res.json();
this.resetSnackbarButton(); this.okNotification(getCreateCategoryError(json));
this.notification(getCreateCategoryError(json));
return; return;
} else { } else {
this.resetSnackbarButton(); this.okNotification('Successfully created category');
this.notification('Successfully created category');
this.dialog.show.createCategory = false; this.dialog.show.createCategory = false;
this.browseCategories(); this.browseCategories();
return; return;
@ -467,5 +460,9 @@ const app = new Vue({
this.snackbarNotification = text; this.snackbarNotification = text;
this.showSnackbarNotification = true; this.showSnackbarNotification = true;
}, },
okNotification: function(text) {
this.resetSnackbarButton();
this.notification(text);
}
} }
}); });