initial socket io admin client

core/admin-dashboard/config/socket.io/private-admin/index.ts

@@ -0,0 +1,34 @@
+import { io, Socket } from "socket.io-client";
+import {
+  SOCKET_LISTEN_EVENT,
+  SOCKETIO_EMIT_EVENT,
+  SOCKETIO_NSP,
+} from "~/constants";
+
+interface IUserPayload {
+  user_id: string;
+}
+
+interface ServerToClientEvents {
+  [SOCKET_LISTEN_EVENT.ONLINE]: ({ user_id }: IUserPayload) => void;
+  [SOCKET_LISTEN_EVENT.OFFLINE]: ({ user_id }: IUserPayload) => void;
+}
+
+interface ClientToServerEvents {
+  [SOCKETIO_EMIT_EVENT.ONLINE]: ({ user_id }: IUserPayload) => void;
+}
+
+export default function initialPrivateSocketIO() {
+  try {
+    const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
+      `${process.env.SERVER_URL}/${SOCKETIO_NSP.PRIVATE_ADMIN}`,
+      {
+        withCredentials: true,
+      }
+    );
+
+    return socket;
+  } catch (error) {
+    console.error(error);
+  }
+}

core/admin-dashboard/constants/index.ts

@@ -19,10 +19,33 @@ const LOGIN_FAILED = {
   MAX: 5,
 };
 
+const SOCKETIO_NSP = {
+  PRIVATE_ADMIN: "private-admin",
+};
+
+enum SOCKETIO_EMIT_EVENT {
+  ONLINE = "online",
+}
+
+enum SOCKET_LISTEN_EVENT {
+  ONLINE = "online",
+  OFFLINE = "offline",
+}
+
 export default Object.freeze({
   ADMIN_TYPES,
   HTTP_STATUS_CODE,
   LOGIN_FAILED,
+  SOCKETIO_NSP,
+  SOCKETIO_EMIT_EVENT,
+  SOCKET_LISTEN_EVENT,
 });
 
-export { ADMIN_TYPES, HTTP_STATUS_CODE, LOGIN_FAILED };
+export {
+  ADMIN_TYPES,
+  HTTP_STATUS_CODE,
+  LOGIN_FAILED,
+  SOCKETIO_NSP,
+  SOCKETIO_EMIT_EVENT,
+  SOCKET_LISTEN_EVENT,
+};

core/admin-dashboard/pages/index.vue

@@ -6,9 +6,11 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from "vuex";
-import BaseDashboardAnalysis from "@/components/dashboard/BaseDashboardAnalysis";
 import BaseAnalysisToggler from "@/components/dashboard/BaseAnalysisToggler";
+import BaseDashboardAnalysis from "@/components/dashboard/BaseDashboardAnalysis";
+import initialPrivateSocketIO from "@/config/socket.io/private-admin";
+import { mapActions, mapGetters } from "vuex";
+import { SOCKETIO_EMIT_EVENT } from "~/constants";
 
 export default {
   name: "AdminDashboard",
@@ -20,6 +22,7 @@ export default {
   computed: {
     ...mapGetters({
       analysis: "analysis",
+      me: "auth/me",
     }),
   },
 
@@ -44,6 +47,15 @@ export default {
         this.GET_MOST_POPULAR_POSTS_ANALYTICS({ ...this.analysis }),
         this.GET_CATEGORY_ANALYTICS({ ...this.analysis }),
       ]);
+
+      const user_id = this.me?._id;
+
+      if (!user_id) {
+        return;
+      }
+
+      const socket = initialPrivateSocketIO();
+      socket.emit(SOCKETIO_EMIT_EVENT.ONLINE, { user_id });
     } catch (error) {
       console.error(error);
     }