Files
chatwoot/app/javascript/shared/helpers/BaseActionCableConnector.js
Fayaz Ahmed b474929f5e chore: Replace eventBus with mitt.js [CW-3275] (#9539)
# Replace the deprecated `eventBus` with mitt.js

## Description

Since eventBus and it's respective methods are deprecated and removed
from all future releases of vue, this was blocking us from migrating.
This PR replaces eventBus with
[mitt](https://github.com/developit/mitt). I have created a wrapper
mitt.js to simulate the same old event names so it's backwards
compatible, without making a lot of changes.


Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

1. Made sure all the places we're listening to bus events are working as
expected.
2. Respective specsf or the events from mitt.


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules
2024-05-31 15:50:36 +05:30

96 lines
2.6 KiB
JavaScript

import { createConsumer } from '@rails/actioncable';
import { BUS_EVENTS } from 'shared/constants/busEvents';
import { emitter } from 'shared/helpers/mitt';
const PRESENCE_INTERVAL = 20000;
const RECONNECT_INTERVAL = 1000;
class BaseActionCableConnector {
static isDisconnected = false;
constructor(app, pubsubToken, websocketHost = '') {
const websocketURL = websocketHost ? `${websocketHost}/cable` : undefined;
this.consumer = createConsumer(websocketURL);
this.subscription = this.consumer.subscriptions.create(
{
channel: 'RoomChannel',
pubsub_token: pubsubToken,
account_id: app.$store.getters.getCurrentAccountId,
user_id: app.$store.getters.getCurrentUserID,
},
{
updatePresence() {
this.perform('update_presence');
},
received: this.onReceived,
disconnected: () => {
BaseActionCableConnector.isDisconnected = true;
this.onDisconnected();
this.initReconnectTimer();
// TODO: Remove this after completing the conversation list refetching
emitter.emit(BUS_EVENTS.WEBSOCKET_DISCONNECT);
},
}
);
this.app = app;
this.events = {};
this.reconnectTimer = null;
this.isAValidEvent = () => true;
this.triggerPresenceInterval = () => {
setTimeout(() => {
this.subscription.updatePresence();
this.triggerPresenceInterval();
}, PRESENCE_INTERVAL);
};
this.triggerPresenceInterval();
}
checkConnection() {
const isConnectionActive = this.consumer.connection.isOpen();
const isReconnected =
BaseActionCableConnector.isDisconnected && isConnectionActive;
if (isReconnected) {
this.clearReconnectTimer();
this.onReconnect();
BaseActionCableConnector.isDisconnected = false;
} else {
this.initReconnectTimer();
}
}
clearReconnectTimer = () => {
if (this.reconnectTimer) {
clearTimeout(this.reconnectTimer);
this.reconnectTimer = null;
}
};
initReconnectTimer = () => {
this.clearReconnectTimer();
this.reconnectTimer = setTimeout(() => {
this.checkConnection();
}, RECONNECT_INTERVAL);
};
// eslint-disable-next-line class-methods-use-this
onReconnect = () => {};
// eslint-disable-next-line class-methods-use-this
onDisconnected = () => {};
disconnect() {
this.consumer.disconnect();
}
onReceived = ({ event, data } = {}) => {
if (this.isAValidEvent(data)) {
if (this.events[event] && typeof this.events[event] === 'function') {
this.events[event](data);
}
}
};
}
export default BaseActionCableConnector;