Reconnect the HTTP client websocket automatically

web/src/App.jsx

@@ -27,13 +27,10 @@ import { useProduct } from "./context/product";
 import { INSTALL, STARTUP } from "~/client/phase";
 import { BUSY } from "~/client/status";
 
-import { DBusError, If, Installation } from "~/components/core";
+import { ServerError, If, Installation } from "~/components/core";
 import { Loading } from "./components/layout";
 import { useInstallerL10n } from "./context/installerL10n";
 
-// D-Bus connection attempts before displaying an error.
-const ATTEMPTS = 3;
-
 /**
  * Main application component.
  *
@@ -43,7 +40,7 @@ const ATTEMPTS = 3;
  */
 function App() {
  const client = useInstallerClient();
- const { attempt } = useInstallerClientStatus();
+ const { error } = useInstallerClientStatus();
  const { products } = useProduct();
  const { language } = useInstallerL10n();
  const [status, setStatus] = useState(undefined);
@@ -75,9 +72,8 @@ function App() {
  }, [client, setPhase, setStatus]);
 
  const Content = () => {
- if (!client || !products) {
- return (attempt > ATTEMPTS) ? <DBusError /> : <Loading />;
- }
+ if (error) return <ServerError />;
+ if (!products) return <Loading />;
 
  if ((phase === STARTUP && status === BUSY) || phase === undefined || status === undefined) {
  return <Loading />;

web/src/client/http.js

@@ -26,6 +26,23 @@
  * @return {void}
  */
 
+/**
+ * Enum for the WebSocket states.
+ *
+ *
+ */
+
+const SocketStates = Object.freeze({
+ CONNECTED: 0,
+ CONNECTING: 1,
+ CLOSING: 2,
+ CLOSED: 3,
+ UNRECOVERABLE: 4,
+});
+
+const MAX_ATTEMPTS = 15;
+const ATTEMPT_INTERVAL = 1000;
+
 /**
  * Agama WebSocket client.
  *
@@ -38,11 +55,70 @@ class WSClient {
  * @param {URL} url - Websocket URL.
  */
  constructor(url) {
- this.client = new WebSocket(url.toString());
- this.client.onmessage = (event) => {
+ this.url = url.toString();
+
+ this.handlers = {
+ error: [],
+ close: [],
+ open: [],
+ events: []
+ };
+
+ this.reconnectAttempts = 0;
+ this.client = this.buildClient();
+ }
+
+ wsState() {
+ const state = this.client.readyState;
+ if ((state !== SocketStates.CONNECTED) && (this.reconnectAttempts >= MAX_ATTEMPTS)) return SocketStates.UNRECOVERABLE;
+
+ return state;
+ }
+
+ isRecoverable() {
+ return (this.wsState() !== SocketStates.UNRECOVERABLE);
+ }
+
+ isConnected() {
+ return (this.wsState() === SocketStates.CONNECTED);
+ }
+
+ buildClient() {
+ const client = new WebSocket(this.url);
+ client.onopen = () => {
+ console.log("Websocket connected");
+ this.reconnectAttempts = 0;
+ clearTimeout(this.timeout);
+
+ return this.dispatchOpenEvent();
+ };
+
+ client.onmessage = (event) => {
  this.dispatchEvent(event);
  };
- this.handlers = [];
+
+ client.onclose = () => {
+ console.log(`WebSocket closed`);
+ this.dispatchCloseEvent();
+ this.timeout = setTimeout(() => this.connect(this.reconnectAttempts + 1), ATTEMPT_INTERVAL);
+ };
+
+ client.onerror = (e) => {
+ console.error("WebSocket error:", e);
+ this.dispatchErrorEvent();
+ };
+
+ return client;
+ }
+
+ connect(attempt = 0) {
+ this.reconnectAttempts = attempt;
+ if (attempt > MAX_ATTEMPTS) {
+ console.log("Max number of WebSocket connection attempts reached.");
+ return;
+ }
+ console.log(`Reconnecting WebSocket(attempt: ${attempt})`);
+ this.client = this.buildClient();
  }
 
  /**
@@ -55,10 +131,60 @@ class WSClient {
  * @return {RemoveFn}
  */
  onEvent(func) {
- this.handlers.push(func);
+ this.handlers.events.push(func);
+ return () => {
+ const position = this.handlers.events.indexOf(func);
+ if (position > -1) this.handlers.events.splice(position, 1);
+ };
+ }
+
+ /**
+ * Registers a handler for close socket.
+ *
+ * The handler is executed when the socket is close.
+ *
+ * @param {(object) => void} func - Handler function to register.
+ * @return {RemoveFn}
+ */
+ onClose(func) {
+ this.handlers.close.push(func);
+
  return () => {
- const position = this.handlers.indexOf(func);
- if (position > -1) this.handlers.splice(position, 1);
+ const position = this.handlers.close.indexOf(func);
+ if (position > -1) this.handlers.close.splice(position, 1);
+ };
+ }
+
+ /**
+ * Registers a handler for open socket.
+ *
+ * The handler is executed when the socket is open.
+ * @param {(object) => void} func - Handler function to register.
+ * @return {RemoveFn}
+ */
+ onOpen(func) {
+ this.handlers.open.push(func);
+
+ return () => {
+ const position = this.handlers.open.indexOf(func);
+ if (position > -1) this.handlers.open.splice(position, 1);
+ };
+ }
+
+ /**
+ * Registers a handler for socket errors.
+ *
+ * The handler is executed when an error is reported by the socket.
+ *
+ * @param {(object) => void} func - Handler function to register.
+ * @return {RemoveFn}
+ */
+ onError(func) {
+ this.handlers.error.push(func);
+
+ return () => {
+ const position = this.handlers.error.indexOf(func);
+ if (position > -1) this.handlers.error.splice(position, 1);
  };
  }
 
@@ -71,7 +197,34 @@ class WSClient {
  */
  dispatchEvent(event) {
  const eventObject = JSON.parse(event.data);
- this.handlers.forEach((f) => f(eventObject));
+ this.handlers.events.forEach((f) => f(eventObject));
+ }
+
+ /**
+ * @private
+ *
+ * Dispatchs a close event by running all its handlers.
+ */
+ dispatchCloseEvent() {
+ this.handlers.close.forEach((f) => f());
+ }
+
+ /**
+ * @private
+ *
+ * Dispatchs an error event by running all its handlers.
+ */
+ dispatchErrorEvent() {
+ this.handlers.error.forEach((f) => f());
+ }
+
+ /**
+ * @private
+ *
+ * Dispatchs a close event by running all its handlers.
+ */
+ dispatchOpenEvent() {
+ this.handlers.open.forEach((f) => f());
  }
 }
 
@@ -169,6 +322,43 @@ class HTTPClient {
  return response;
  }
 
+ /**
+ * Registers a handler for being called when the socket is closed
+ *
+ * @param {() => void} func - Handler function to register.
+ * @return {RemoveFn} - Function to remove the handler.
+ */
+ onClose(func) {
+ return this.ws.onClose(() => {
+ func();
+ });
+ }
+
+ /**
+ *
+ * Registers a handler for being called when there is some error in the socket
+ *
+ * @param {(event: Object) => void} func - Handler function to register.
+ * @return {RemoveFn} - Function to remove the handler.
+ */
+ onError(func) {
+ return this.ws.onError((event) => {
+ func(event);
+ });
+ }
+
+ /**
+ * Registers a handler for being called when the socket is opened
+ *
+ * @param {(event: Object) => void} func - Handler function to register.
+ * @return {RemoveFn} - Function to remove the handler.
+ */
+ onOpen(func) {
+ return this.ws.onOpen((event) => {
+ func(event);
+ });
+ }
+
  /**
  * Registers a handler for a given type of events.
  *

web/src/client/index.js

@@ -36,7 +36,7 @@ import { HTTPClient } from "./http";
  * @typedef {object} InstallerClient
  * @property {L10nClient} l10n - localization client.
  * @property {ManagerClient} manager - manager client.
- * @property {Monitor} monitor - service monitor.
+ * property {Monitor} monitor - service monitor. (FIXME)
  * @property {NetworkClient} network - network client.
  * @property {ProductClient} product - product client.
  * @property {SoftwareClient} software - software client.
@@ -46,7 +46,9 @@ import { HTTPClient } from "./http";
  * @property {() => Promise<Issues>} issues - issues from all contexts.
  * @property {(handler: IssuesHandler) => (() => void)} onIssuesChange - registers a handler to run
  * when issues from any context change. It returns a function to deregister the handler.
- * @property {() => Promise<boolean>} isConnected - determines whether the client is connected
+ * @property {() => boolean} isConnected - determines whether the client is connected
+ * @property {() => boolean} isRecoverable - determines whether the client is recoverable after disconnected
+ * @property {(handler: () => void) => (() => void)} onConnect - registers a handler to run
  * @property {(handler: () => void) => (() => void)} onDisconnect - registers a handler to run
  * when the connection is lost. It returns a function to deregister the
  * handler.
@@ -122,15 +124,8 @@ const createClient = (url) => {
  };
  };
 
- const isConnected = async () => {
- // try {
- // await manager.getStatus();
- // return true;
- // } catch (e) {
- // return false;
- // }
- return true;
- };
+ const isConnected = () => client.ws?.isConnected() || false;
+ const isRecoverable = () => !!client.ws?.isRecoverable();
 
  return {
  l10n,
@@ -145,10 +140,9 @@ const createClient = (url) => {
  issues,
  onIssuesChange,
  isConnected,
- onDisconnect: (handler) => {
- return () => { };
- },
- // onDisconnect: (handler) => monitor.onDisconnect(handler),
+ isRecoverable,
+ onConnect: (handler) => client.ws.onOpen(handler),
+ onDisconnect: (handler) => client.ws.onClose(handler),
  };
 };
 

web/src/components/core/DBusError.jsx → web/src/components/core/ServerError.jsx

@@ -28,19 +28,19 @@ import { locationReload } from "~/utils";
 
 const ErrorIcon = () => <Icon name="error" className="icon-xxxl" />;
 
-function DBusError() {
+function ServerError() {
  return (
  // TRANSLATORS: page title
- <Page icon="problem" title={_("D-Bus Error")}>
+ <Page icon="problem" title={_("Agama Error")}>
  <Center>
  <EmptyState variant="xl">
  <EmptyStateHeader
- titleText={_("Cannot connect to D-Bus")}
+ titleText={_("Cannot connect to Agama server")}
  headingLevel="h2"
  icon={<EmptyStateIcon icon={ErrorIcon} />}
  />
  <EmptyStateBody>
- {_("Could not connect to the D-Bus service. Please, check whether it is running.")}
+ {_("Could not connect to the Agama server. Please, check whether it is running.")}
  </EmptyStateBody>
  </EmptyState>
  </Center>
@@ -55,4 +55,4 @@ function DBusError() {
  );
 }
 
-export default DBusError;
+export default ServerError;

web/src/components/core/DBusError.test.jsx → web/src/components/core/ServerError.test.jsx

@@ -24,19 +24,19 @@ import { screen } from "@testing-library/react";
 import { plainRender } from "~/test-utils";
 
 import * as utils from "~/utils";
-import { DBusError } from "~/components/core";
+import { ServerError } from "~/components/core";
 
 jest.mock("~/components/core/Sidebar", () => () => <div>Agama sidebar</div>);
 
-describe("DBusError", () => {
- it("includes a generic D-Bus connection problem message", () => {
- plainRender(<DBusError />);
- screen.getByText(/Could not connect to the D-Bus service/i);
+describe("ServerError", () => {
+ it("includes a generic server problem message", () => {
+ plainRender(<ServerError />);
+ screen.getByText(/Could not connect to the Agama server/i);
  });
 
  it("calls location.reload when user clicks on 'Reload'", async () => {
  jest.spyOn(utils, "locationReload").mockImplementation(utils.noop);
- const { user } = plainRender(<DBusError />);
+ const { user } = plainRender(<ServerError />);
  const reloadButton = await screen.findByRole("button", { name: /Reload/i });
  await user.click(reloadButton);
  expect(utils.locationReload).toHaveBeenCalled();