From: Dessalines <tyhou13@gmx.com>
Date: Sun, 2 Feb 2020 03:52:16 +0000 (-0500)
Subject: Testing out reconnecting websocket instead of rxJS one. #496
X-Git-Url: http://these/git/%7B%60%24%7BwebArchiveUrl%7D/%22%7B%7D/readmes/%7B%7D/%22%7Burl%7D/README.es.md?a=commitdiff_plain;h=e8a604d0edddecc54c6180ac19b629ffdaab622f;p=lemmy.git

Testing out reconnecting websocket instead of rxJS one. #496
---

diff --git a/ui/package.json b/ui/package.json
index 7e75052b..89d8fd2c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -35,6 +35,7 @@
     "markdown-it-emoji": "^1.4.0",
     "moment": "^2.24.0",
     "prettier": "^1.18.2",
+    "reconnecting-websocket": "^4.3.0",
     "rxjs": "^6.4.0",
     "terser": "^4.6.3",
     "toastify-js": "^1.6.2",
diff --git a/ui/src/services/WebSocketService.ts b/ui/src/services/WebSocketService.ts
index a7e9b7e0..8fae384d 100644
--- a/ui/src/services/WebSocketService.ts
+++ b/ui/src/services/WebSocketService.ts
@@ -40,37 +40,33 @@ import {
   GetPrivateMessagesForm,
   MessageType,
 } from '../interfaces';
-import { webSocket } from 'rxjs/webSocket';
-import { Subject } from 'rxjs';
-import { retryWhen, delay } from 'rxjs/operators';
 import { UserService } from './';
 import { i18n } from '../i18next';
 import { toast } from '../utils';
+import { Observable } from 'rxjs';
+import { share } from 'rxjs/operators';
+import ReconnectingWebSocket from 'reconnecting-websocket';
 
 export class WebSocketService {
   private static _instance: WebSocketService;
-  public subject: Subject<any>;
+  public ws: ReconnectingWebSocket;
+  public subject: Observable<any>;
 
   public site: Site;
   public admins: Array<UserView>;
   public banned: Array<UserView>;
 
   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
-      .pipe(
-        retryWhen(errors =>
-          errors.pipe(
-            delay(1000)
-            // take(999)
-          )
-        )
-      )
-      .subscribe();
-
-    console.log(`Connected to ${wsUri}`);
+    this.subject = Observable.create((obs: any) => {
+      this.ws.onmessage = e => {
+        obs.next(JSON.parse(e.data));
+      };
+    }).pipe(share());
   }
 
   public static get Instance() {
@@ -78,241 +74,223 @@ export class WebSocketService {
   }
 
   public login(loginForm: LoginForm) {
-    this.subject.next(this.wsSendWrapper(UserOperation.Login, loginForm));
+    this.ws.send(this.wsSendWrapper(UserOperation.Login, loginForm));
   }
 
   public register(registerForm: RegisterForm) {
-    this.subject.next(this.wsSendWrapper(UserOperation.Register, registerForm));
+    this.ws.send(this.wsSendWrapper(UserOperation.Register, registerForm));
   }
 
   public createCommunity(communityForm: CommunityForm) {
     this.setAuth(communityForm);
-    this.subject.next(
+    this.ws.send(
       this.wsSendWrapper(UserOperation.CreateCommunity, communityForm)
     );
   }
 
   public editCommunity(communityForm: CommunityForm) {
     this.setAuth(communityForm);
-    this.subject.next(
+    this.ws.send(
       this.wsSendWrapper(UserOperation.EditCommunity, communityForm)
     );
   }
 
   public followCommunity(followCommunityForm: FollowCommunityForm) {
     this.setAuth(followCommunityForm);
-    this.subject.next(
+    this.ws.send(
       this.wsSendWrapper(UserOperation.FollowCommunity, followCommunityForm)
     );
   }
 
   public listCommunities(form: ListCommunitiesForm) {
     this.setAuth(form, false);
-    this.subject.next(this.wsSendWrapper(UserOperation.ListCommunities, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.ListCommunities, form));
   }
 
   public getFollowedCommunities() {
     let form: GetFollowedCommunitiesForm = { auth: UserService.Instance.auth };
-    this.subject.next(
+    this.ws.send(
       this.wsSendWrapper(UserOperation.GetFollowedCommunities, form)
     );
   }
 
   public listCategories() {
-    this.subject.next(
-      this.wsSendWrapper(UserOperation.ListCategories, {})
-    );
+    this.ws.send(this.wsSendWrapper(UserOperation.ListCategories, {}));
   }
 
   public createPost(postForm: PostForm) {
     this.setAuth(postForm);
-    this.subject.next(this.wsSendWrapper(UserOperation.CreatePost, postForm));
+    this.ws.send(this.wsSendWrapper(UserOperation.CreatePost, postForm));
   }
 
   public getPost(form: GetPostForm) {
     this.setAuth(form, false);
-    this.subject.next(this.wsSendWrapper(UserOperation.GetPost, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.GetPost, form));
   }
 
   public getCommunity(form: GetCommunityForm) {
     this.setAuth(form, false);
-    this.subject.next(this.wsSendWrapper(UserOperation.GetCommunity, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.GetCommunity, form));
   }
 
   public createComment(commentForm: CommentForm) {
     this.setAuth(commentForm);
-    this.subject.next(
-      this.wsSendWrapper(UserOperation.CreateComment, commentForm)
-    );
+    this.ws.send(this.wsSendWrapper(UserOperation.CreateComment, commentForm));
   }
 
   public editComment(commentForm: CommentForm) {
     this.setAuth(commentForm);
-    this.subject.next(
-      this.wsSendWrapper(UserOperation.EditComment, commentForm)
-    );
+    this.ws.send(this.wsSendWrapper(UserOperation.EditComment, commentForm));
   }
 
   public likeComment(form: CommentLikeForm) {
     this.setAuth(form);
-    this.subject.next(
-      this.wsSendWrapper(UserOperation.CreateCommentLike, form)
-    );
+    this.ws.send(this.wsSendWrapper(UserOperation.CreateCommentLike, form));
   }
 
   public saveComment(form: SaveCommentForm) {
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.SaveComment, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.SaveComment, form));
   }
 
   public getPosts(form: GetPostsForm) {
     this.setAuth(form, false);
-    this.subject.next(this.wsSendWrapper(UserOperation.GetPosts, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.GetPosts, form));
   }
 
   public likePost(form: CreatePostLikeForm) {
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.CreatePostLike, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.CreatePostLike, form));
   }
 
   public editPost(postForm: PostForm) {
     this.setAuth(postForm);
-    this.subject.next(this.wsSendWrapper(UserOperation.EditPost, postForm));
+    this.ws.send(this.wsSendWrapper(UserOperation.EditPost, postForm));
   }
 
   public savePost(form: SavePostForm) {
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.SavePost, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.SavePost, form));
   }
 
   public banFromCommunity(form: BanFromCommunityForm) {
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.BanFromCommunity, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.BanFromCommunity, form));
   }
 
   public addModToCommunity(form: AddModToCommunityForm) {
     this.setAuth(form);
-    this.subject.next(
-      this.wsSendWrapper(UserOperation.AddModToCommunity, form)
-    );
+    this.ws.send(this.wsSendWrapper(UserOperation.AddModToCommunity, form));
   }
 
   public transferCommunity(form: TransferCommunityForm) {
     this.setAuth(form);
-    this.subject.next(
-      this.wsSendWrapper(UserOperation.TransferCommunity, form)
-    );
+    this.ws.send(this.wsSendWrapper(UserOperation.TransferCommunity, form));
   }
 
   public transferSite(form: TransferSiteForm) {
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.TransferSite, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.TransferSite, form));
   }
 
   public banUser(form: BanUserForm) {
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.BanUser, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.BanUser, form));
   }
 
   public addAdmin(form: AddAdminForm) {
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.AddAdmin, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.AddAdmin, form));
   }
 
   public getUserDetails(form: GetUserDetailsForm) {
     this.setAuth(form, false);
-    this.subject.next(this.wsSendWrapper(UserOperation.GetUserDetails, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.GetUserDetails, form));
   }
 
   public getReplies(form: GetRepliesForm) {
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.GetReplies, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.GetReplies, form));
   }
 
   public getUserMentions(form: GetUserMentionsForm) {
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.GetUserMentions, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.GetUserMentions, form));
   }
 
   public editUserMention(form: EditUserMentionForm) {
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.EditUserMention, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.EditUserMention, form));
   }
 
   public getModlog(form: GetModlogForm) {
-    this.subject.next(this.wsSendWrapper(UserOperation.GetModlog, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.GetModlog, form));
   }
 
   public createSite(siteForm: SiteForm) {
     this.setAuth(siteForm);
-    this.subject.next(this.wsSendWrapper(UserOperation.CreateSite, siteForm));
+    this.ws.send(this.wsSendWrapper(UserOperation.CreateSite, siteForm));
   }
 
   public editSite(siteForm: SiteForm) {
     this.setAuth(siteForm);
-    this.subject.next(this.wsSendWrapper(UserOperation.EditSite, siteForm));
+    this.ws.send(this.wsSendWrapper(UserOperation.EditSite, siteForm));
   }
 
   public getSite() {
-    this.subject.next(this.wsSendWrapper(UserOperation.GetSite, {}));
+    this.ws.send(this.wsSendWrapper(UserOperation.GetSite, {}));
   }
 
   public search(form: SearchForm) {
     this.setAuth(form, false);
-    this.subject.next(this.wsSendWrapper(UserOperation.Search, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.Search, form));
   }
 
   public markAllAsRead() {
     let form = {};
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.MarkAllAsRead, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.MarkAllAsRead, form));
   }
 
   public saveUserSettings(userSettingsForm: UserSettingsForm) {
     this.setAuth(userSettingsForm);
-    this.subject.next(
+    this.ws.send(
       this.wsSendWrapper(UserOperation.SaveUserSettings, userSettingsForm)
     );
   }
 
   public deleteAccount(form: DeleteAccountForm) {
     this.setAuth(form);
-    this.subject.next(this.wsSendWrapper(UserOperation.DeleteAccount, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.DeleteAccount, form));
   }
 
   public passwordReset(form: PasswordResetForm) {
-    this.subject.next(this.wsSendWrapper(UserOperation.PasswordReset, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.PasswordReset, form));
   }
 
   public passwordChange(form: PasswordChangeForm) {
-    this.subject.next(this.wsSendWrapper(UserOperation.PasswordChange, form));
+    this.ws.send(this.wsSendWrapper(UserOperation.PasswordChange, form));
   }
 
   public createPrivateMessage(form: PrivateMessageForm) {
     this.setAuth(form);
-    this.subject.next(
-      this.wsSendWrapper(UserOperation.CreatePrivateMessage, form)
-    );
+    this.ws.send(this.wsSendWrapper(UserOperation.CreatePrivateMessage, form));
   }
 
   public editPrivateMessage(form: EditPrivateMessageForm) {
     this.setAuth(form);
-    this.subject.next(
-      this.wsSendWrapper(UserOperation.EditPrivateMessage, form)
-    );
+    this.ws.send(this.wsSendWrapper(UserOperation.EditPrivateMessage, form));
   }
 
   public getPrivateMessages(form: GetPrivateMessagesForm) {
     this.setAuth(form);
-    this.subject.next(
-      this.wsSendWrapper(UserOperation.GetPrivateMessages, form)
-    );
+    this.ws.send(this.wsSendWrapper(UserOperation.GetPrivateMessages, form));
   }
 
   private wsSendWrapper(op: UserOperation, data: MessageType) {
     let send = { op: UserOperation[op], data: data };
     console.log(send);
-    return send;
+    return JSON.stringify(send);
   }
 
   private setAuth(obj: any, throwErr: boolean = true) {
@@ -325,6 +303,5 @@ export class WebSocketService {
 }
 
 window.onbeforeunload = () => {
-  WebSocketService.Instance.subject.unsubscribe();
-  WebSocketService.Instance.subject = null;
+  WebSocketService.Instance.ws.close();
 };
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 4d09380b..480785ab 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -3753,6 +3753,11 @@ realm-utils@^1.0.9:
     app-root-path "^1.3.0"
     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:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"