MM-56060: Create base scaffolding for websocket pub-sub (#25654)

We create a new websocket action called "presence" which
can contain the active_channel and the active_team for a given
client connection.

On the client side, for every channel or team switch, we send
out this message.

https://mattermost.atlassian.net/browse/MM-56060

```release-note
NONE
```

webapp/channels/src/actions/websocket_actions.jsx

@@ -256,6 +256,10 @@ export function reconnect() {
                 syncThreads(team.id, currentUserId);
             }
         }
+
+        // Re-syncing the current channel and team ids.
+        WebSocketClient.updateActiveChannel(currentChannelId);
+        WebSocketClient.updateActiveTeam(currentTeamId);
     }
 
     loadPluginsIfNecessary();

webapp/channels/src/components/channel_view/channel_view.tsx

@@ -12,6 +12,8 @@ import FileUploadOverlay from 'components/file_upload_overlay';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import PostView from 'components/post_view';
 
+import WebSocketClient from 'client/web_websocket_client';
+
 import type {PropsFromRedux} from './index';
 
 export type Props = PropsFromRedux & RouteComponentProps<{
@@ -86,6 +88,10 @@ export default class ChannelView extends React.PureComponent<Props, State> {
     };
 
     componentDidUpdate(prevProps: Props) {
+        // TODO: debounce
+        if (prevProps.channelId !== this.props.channelId) {
+            WebSocketClient.updateActiveChannel(this.props.channelId);
+        }
         if (prevProps.channelId !== this.props.channelId || prevProps.channelIsArchived !== this.props.channelIsArchived) {
             if (this.props.channelIsArchived && !this.props.viewArchivedChannels) {
                 this.props.goToLastViewedChannel();

webapp/channels/src/components/team_sidebar/team_sidebar.tsx

@@ -16,6 +16,7 @@ import Permissions from 'mattermost-redux/constants/permissions';
 import SystemPermissionGate from 'components/permissions_gates/system_permission_gate';
 import TeamButton from 'components/team_sidebar/components/team_button';
 
+import WebSocketClient from 'client/web_websocket_client';
 import Pluggable from 'plugins/pluggable';
 import {Constants} from 'utils/constants';
 import * as Keyboard from 'utils/keyboard';
@@ -146,6 +147,13 @@ export default class TeamSidebar extends React.PureComponent<Props, State> {
         }
     };
 
+    componentDidUpdate(prevProps: Props) {
+        // TODO: debounce
+        if (prevProps.currentTeamId !== this.props.currentTeamId) {
+            WebSocketClient.updateActiveTeam(this.props.currentTeamId);
+        }
+    }
+
     componentDidMount() {
         this.props.actions.getTeams(0, 200);
         document.addEventListener('keydown', this.handleKeyDown);

webapp/platform/client/src/websocket.ts

@@ -355,7 +355,7 @@ export default class WebSocketClient {
         }
     }
 
-    sendMessage(action: string, data: any, responseCallback?: () => void) {
+    sendMessage(action: string, data: any, responseCallback?: (msg: any) => void) {
         const msg = {
             action,
             seq: this.responseSequence++,
@@ -382,6 +382,20 @@ export default class WebSocketClient {
         this.sendMessage('user_typing', data, callback);
     }
 
+    updateActiveChannel(channelId: string, callback?: (msg: any) => void) {
+        const data = {
+            channel_id: channelId,
+        };
+        this.sendMessage('presence', data, callback);
+    }
+
+    updateActiveTeam(teamId: string, callback?: (msg: any) => void) {
+        const data = {
+            team_id: teamId,
+        };
+        this.sendMessage('presence', data, callback);
+    }
+
     userUpdateActiveStatus(userIsActive: boolean, manual: boolean, callback?: () => void) {
         const data = {
             user_is_active: userIsActive,