nutomic/lemmy
Archived
2
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

Testing out reconnecting websocket instead of rxJS one. #496

Browse source
This commit is contained in:
Dessalines 2020-02-01 22:52:16 -05:00
parent 323c5dc26c
commit bc1b7afd60
3 changed files with 64 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/package.json vendored
View file

@ -35,6 +35,7 @@
"markdown-it-emoji": "^1.4.0", "markdown-it-emoji": "^1.4.0",
"moment": "^2.24.0", "moment": "^2.24.0",
"prettier": "^1.18.2", "prettier": "^1.18.2",
"reconnecting-websocket": "^4.3.0",
"rxjs": "^6.4.0", "rxjs": "^6.4.0",
"terser": "^4.6.3", "terser": "^4.6.3",
"toastify-js": "^1.6.2", "toastify-js": "^1.6.2",

139
ui/src/services/WebSocketService.ts vendored
View file

@ -40,37 +40,33 @@ import {
GetPrivateMessagesForm, GetPrivateMessagesForm,
MessageType, MessageType,
} from '../interfaces'; } from '../interfaces';
import { webSocket } from 'rxjs/webSocket';
import { Subject } from 'rxjs';
import { retryWhen, delay } from 'rxjs/operators';
import { UserService } from './'; import { UserService } from './';
import { i18n } from '../i18next'; import { i18n } from '../i18next';
import { toast } from '../utils'; import { toast } from '../utils';
import { Observable } from 'rxjs';
import { share } from 'rxjs/operators';
import ReconnectingWebSocket from 'reconnecting-websocket';
export class WebSocketService { export class WebSocketService {
private static _instance: WebSocketService; private static _instance: WebSocketService;
public subject: Subject<any>; public ws: ReconnectingWebSocket;
public subject: Observable<any>;
public site: Site; public site: Site;
public admins: Array<UserView>; public admins: Array<UserView>;
public banned: Array<UserView>; public banned: Array<UserView>;
private constructor() { private constructor() {
this.subject = webSocket(wsUri); this.ws = new ReconnectingWebSocket(wsUri);
this.ws.onopen = () => {
console.log(`Connected to ${wsUri}`);
};
// Necessary to not keep reconnecting this.subject = Observable.create((obs: any) => {
this.subject this.ws.onmessage = e => {
.pipe( obs.next(JSON.parse(e.data));
retryWhen(errors => };
errors.pipe( }).pipe(share());
delay(1000)
// take(999)
)
)
)
.subscribe();
console.log(`Connected to ${wsUri}`);
} }
public static get Instance() { public static get Instance() {
@ -78,241 +74,223 @@ export class WebSocketService {
} }
public login(loginForm: LoginForm) { public login(loginForm: LoginForm) {
this.subject.next(this.wsSendWrapper(UserOperation.Login, loginForm)); this.ws.send(this.wsSendWrapper(UserOperation.Login, loginForm));
} }
public register(registerForm: RegisterForm) { public register(registerForm: RegisterForm) {
this.subject.next(this.wsSendWrapper(UserOperation.Register, registerForm)); this.ws.send(this.wsSendWrapper(UserOperation.Register, registerForm));
} }
public createCommunity(communityForm: CommunityForm) { public createCommunity(communityForm: CommunityForm) {
this.setAuth(communityForm); this.setAuth(communityForm);
this.subject.next( this.ws.send(
this.wsSendWrapper(UserOperation.CreateCommunity, communityForm) this.wsSendWrapper(UserOperation.CreateCommunity, communityForm)
); );
} }
public editCommunity(communityForm: CommunityForm) { public editCommunity(communityForm: CommunityForm) {
this.setAuth(communityForm); this.setAuth(communityForm);
this.subject.next( this.ws.send(
this.wsSendWrapper(UserOperation.EditCommunity, communityForm) this.wsSendWrapper(UserOperation.EditCommunity, communityForm)
); );
} }
public followCommunity(followCommunityForm: FollowCommunityForm) { public followCommunity(followCommunityForm: FollowCommunityForm) {
this.setAuth(followCommunityForm); this.setAuth(followCommunityForm);
this.subject.next( this.ws.send(
this.wsSendWrapper(UserOperation.FollowCommunity, followCommunityForm) this.wsSendWrapper(UserOperation.FollowCommunity, followCommunityForm)
); );
} }
public listCommunities(form: ListCommunitiesForm) { public listCommunities(form: ListCommunitiesForm) {
this.setAuth(form, false); this.setAuth(form, false);
this.subject.next(this.wsSendWrapper(UserOperation.ListCommunities, form)); this.ws.send(this.wsSendWrapper(UserOperation.ListCommunities, form));
} }
public getFollowedCommunities() { public getFollowedCommunities() {
let form: GetFollowedCommunitiesForm = { auth: UserService.Instance.auth }; let form: GetFollowedCommunitiesForm = { auth: UserService.Instance.auth };
this.subject.next( this.ws.send(
this.wsSendWrapper(UserOperation.GetFollowedCommunities, form) this.wsSendWrapper(UserOperation.GetFollowedCommunities, form)
); );
} }
public listCategories() { public listCategories() {
this.subject.next( this.ws.send(this.wsSendWrapper(UserOperation.ListCategories, {}));
this.wsSendWrapper(UserOperation.ListCategories, {})
);
} }
public createPost(postForm: PostForm) { public createPost(postForm: PostForm) {
this.setAuth(postForm); this.setAuth(postForm);
this.subject.next(this.wsSendWrapper(UserOperation.CreatePost, postForm)); this.ws.send(this.wsSendWrapper(UserOperation.CreatePost, postForm));
} }
public getPost(form: GetPostForm) { public getPost(form: GetPostForm) {
this.setAuth(form, false); this.setAuth(form, false);
this.subject.next(this.wsSendWrapper(UserOperation.GetPost, form)); this.ws.send(this.wsSendWrapper(UserOperation.GetPost, form));
} }
public getCommunity(form: GetCommunityForm) { public getCommunity(form: GetCommunityForm) {
this.setAuth(form, false); this.setAuth(form, false);
this.subject.next(this.wsSendWrapper(UserOperation.GetCommunity, form)); this.ws.send(this.wsSendWrapper(UserOperation.GetCommunity, form));
} }
public createComment(commentForm: CommentForm) { public createComment(commentForm: CommentForm) {
this.setAuth(commentForm); this.setAuth(commentForm);
this.subject.next( this.ws.send(this.wsSendWrapper(UserOperation.CreateComment, commentForm));
this.wsSendWrapper(UserOperation.CreateComment, commentForm)
);
} }
public editComment(commentForm: CommentForm) { public editComment(commentForm: CommentForm) {
this.setAuth(commentForm); this.setAuth(commentForm);
this.subject.next( this.ws.send(this.wsSendWrapper(UserOperation.EditComment, commentForm));
this.wsSendWrapper(UserOperation.EditComment, commentForm)
);
} }
public likeComment(form: CommentLikeForm) { public likeComment(form: CommentLikeForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next( this.ws.send(this.wsSendWrapper(UserOperation.CreateCommentLike, form));
this.wsSendWrapper(UserOperation.CreateCommentLike, form)
);
} }
public saveComment(form: SaveCommentForm) { public saveComment(form: SaveCommentForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.SaveComment, form)); this.ws.send(this.wsSendWrapper(UserOperation.SaveComment, form));
} }
public getPosts(form: GetPostsForm) { public getPosts(form: GetPostsForm) {
this.setAuth(form, false); this.setAuth(form, false);
this.subject.next(this.wsSendWrapper(UserOperation.GetPosts, form)); this.ws.send(this.wsSendWrapper(UserOperation.GetPosts, form));
} }
public likePost(form: CreatePostLikeForm) { public likePost(form: CreatePostLikeForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.CreatePostLike, form)); this.ws.send(this.wsSendWrapper(UserOperation.CreatePostLike, form));
} }
public editPost(postForm: PostForm) { public editPost(postForm: PostForm) {
this.setAuth(postForm); this.setAuth(postForm);
this.subject.next(this.wsSendWrapper(UserOperation.EditPost, postForm)); this.ws.send(this.wsSendWrapper(UserOperation.EditPost, postForm));
} }
public savePost(form: SavePostForm) { public savePost(form: SavePostForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.SavePost, form)); this.ws.send(this.wsSendWrapper(UserOperation.SavePost, form));
} }
public banFromCommunity(form: BanFromCommunityForm) { public banFromCommunity(form: BanFromCommunityForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.BanFromCommunity, form)); this.ws.send(this.wsSendWrapper(UserOperation.BanFromCommunity, form));
} }
public addModToCommunity(form: AddModToCommunityForm) { public addModToCommunity(form: AddModToCommunityForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next( this.ws.send(this.wsSendWrapper(UserOperation.AddModToCommunity, form));
this.wsSendWrapper(UserOperation.AddModToCommunity, form)
);
} }
public transferCommunity(form: TransferCommunityForm) { public transferCommunity(form: TransferCommunityForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next( this.ws.send(this.wsSendWrapper(UserOperation.TransferCommunity, form));
this.wsSendWrapper(UserOperation.TransferCommunity, form)
);
} }
public transferSite(form: TransferSiteForm) { public transferSite(form: TransferSiteForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.TransferSite, form)); this.ws.send(this.wsSendWrapper(UserOperation.TransferSite, form));
} }
public banUser(form: BanUserForm) { public banUser(form: BanUserForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.BanUser, form)); this.ws.send(this.wsSendWrapper(UserOperation.BanUser, form));
} }
public addAdmin(form: AddAdminForm) { public addAdmin(form: AddAdminForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.AddAdmin, form)); this.ws.send(this.wsSendWrapper(UserOperation.AddAdmin, form));
} }
public getUserDetails(form: GetUserDetailsForm) { public getUserDetails(form: GetUserDetailsForm) {
this.setAuth(form, false); this.setAuth(form, false);
this.subject.next(this.wsSendWrapper(UserOperation.GetUserDetails, form)); this.ws.send(this.wsSendWrapper(UserOperation.GetUserDetails, form));
} }
public getReplies(form: GetRepliesForm) { public getReplies(form: GetRepliesForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.GetReplies, form)); this.ws.send(this.wsSendWrapper(UserOperation.GetReplies, form));
} }
public getUserMentions(form: GetUserMentionsForm) { public getUserMentions(form: GetUserMentionsForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.GetUserMentions, form)); this.ws.send(this.wsSendWrapper(UserOperation.GetUserMentions, form));
} }
public editUserMention(form: EditUserMentionForm) { public editUserMention(form: EditUserMentionForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.EditUserMention, form)); this.ws.send(this.wsSendWrapper(UserOperation.EditUserMention, form));
} }
public getModlog(form: GetModlogForm) { public getModlog(form: GetModlogForm) {
this.subject.next(this.wsSendWrapper(UserOperation.GetModlog, form)); this.ws.send(this.wsSendWrapper(UserOperation.GetModlog, form));
} }
public createSite(siteForm: SiteForm) { public createSite(siteForm: SiteForm) {
this.setAuth(siteForm); this.setAuth(siteForm);
this.subject.next(this.wsSendWrapper(UserOperation.CreateSite, siteForm)); this.ws.send(this.wsSendWrapper(UserOperation.CreateSite, siteForm));
} }
public editSite(siteForm: SiteForm) { public editSite(siteForm: SiteForm) {
this.setAuth(siteForm); this.setAuth(siteForm);
this.subject.next(this.wsSendWrapper(UserOperation.EditSite, siteForm)); this.ws.send(this.wsSendWrapper(UserOperation.EditSite, siteForm));
} }
public getSite() { public getSite() {
this.subject.next(this.wsSendWrapper(UserOperation.GetSite, {})); this.ws.send(this.wsSendWrapper(UserOperation.GetSite, {}));
} }
public search(form: SearchForm) { public search(form: SearchForm) {
this.setAuth(form, false); this.setAuth(form, false);
this.subject.next(this.wsSendWrapper(UserOperation.Search, form)); this.ws.send(this.wsSendWrapper(UserOperation.Search, form));
} }
public markAllAsRead() { public markAllAsRead() {
let form = {}; let form = {};
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.MarkAllAsRead, form)); this.ws.send(this.wsSendWrapper(UserOperation.MarkAllAsRead, form));
} }
public saveUserSettings(userSettingsForm: UserSettingsForm) { public saveUserSettings(userSettingsForm: UserSettingsForm) {
this.setAuth(userSettingsForm); this.setAuth(userSettingsForm);
this.subject.next( this.ws.send(
this.wsSendWrapper(UserOperation.SaveUserSettings, userSettingsForm) this.wsSendWrapper(UserOperation.SaveUserSettings, userSettingsForm)
); );
} }
public deleteAccount(form: DeleteAccountForm) { public deleteAccount(form: DeleteAccountForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.DeleteAccount, form)); this.ws.send(this.wsSendWrapper(UserOperation.DeleteAccount, form));
} }
public passwordReset(form: PasswordResetForm) { public passwordReset(form: PasswordResetForm) {
this.subject.next(this.wsSendWrapper(UserOperation.PasswordReset, form)); this.ws.send(this.wsSendWrapper(UserOperation.PasswordReset, form));
} }
public passwordChange(form: PasswordChangeForm) { public passwordChange(form: PasswordChangeForm) {
this.subject.next(this.wsSendWrapper(UserOperation.PasswordChange, form)); this.ws.send(this.wsSendWrapper(UserOperation.PasswordChange, form));
} }
public createPrivateMessage(form: PrivateMessageForm) { public createPrivateMessage(form: PrivateMessageForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next( this.ws.send(this.wsSendWrapper(UserOperation.CreatePrivateMessage, form));
this.wsSendWrapper(UserOperation.CreatePrivateMessage, form)
);
} }
public editPrivateMessage(form: EditPrivateMessageForm) { public editPrivateMessage(form: EditPrivateMessageForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next( this.ws.send(this.wsSendWrapper(UserOperation.EditPrivateMessage, form));
this.wsSendWrapper(UserOperation.EditPrivateMessage, form)
);
} }
public getPrivateMessages(form: GetPrivateMessagesForm) { public getPrivateMessages(form: GetPrivateMessagesForm) {
this.setAuth(form); this.setAuth(form);
this.subject.next( this.ws.send(this.wsSendWrapper(UserOperation.GetPrivateMessages, form));
this.wsSendWrapper(UserOperation.GetPrivateMessages, form)
);
} }
private wsSendWrapper(op: UserOperation, data: MessageType) { private wsSendWrapper(op: UserOperation, data: MessageType) {
let send = { op: UserOperation[op], data: data }; let send = { op: UserOperation[op], data: data };
console.log(send); console.log(send);
return send; return JSON.stringify(send);
} }
private setAuth(obj: any, throwErr: boolean = true) { private setAuth(obj: any, throwErr: boolean = true) {
@ -325,6 +303,5 @@ export class WebSocketService {
} }
window.onbeforeunload = () => { window.onbeforeunload = () => {
WebSocketService.Instance.subject.unsubscribe(); WebSocketService.Instance.ws.close();
WebSocketService.Instance.subject = null;
}; };

5
ui/yarn.lock vendored
View file

@ -3753,6 +3753,11 @@ realm-utils@^1.0.9:
app-root-path "^1.3.0" app-root-path "^1.3.0"
mkdirp "^0.5.1" mkdirp "^0.5.1"
reconnecting-websocket@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/reconnecting-websocket/-/reconnecting-websocket-4.3.0.tgz#aaefbc7629a89450aa45324b89aec2276e728cc5"
integrity sha512-3eaHIEVYB9Zb0GfYy1xdEHKJLA2JaawAegByZ1AZ8Npb3AiRgUN5l89cvE2H+pHTsFcoC88t32ky9qET6DJ75Q==
regenerate-unicode-properties@^8.1.0: regenerate-unicode-properties@^8.1.0:
version "8.1.0" version "8.1.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"