mirror of
https://github.com/LemmyNet/lemmy.git
synced 2024-12-25 04:11:31 +00:00
Testing out reconnecting websocket instead of rxJS one. #496
This commit is contained in:
parent
323c5dc26c
commit
bc1b7afd60
3 changed files with 64 additions and 81 deletions
1
ui/package.json
vendored
1
ui/package.json
vendored
|
@ -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
139
ui/src/services/WebSocketService.ts
vendored
|
@ -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
5
ui/yarn.lock
vendored
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue