Issues with molecular-io using Typescript template

[rishighan]

Hello, I am using the moleculer-template-project-typescript for my services. I do have a socket.io service based off of this example.

Here's the relevant code in the server:

"use strict";
import {
	Context,
	Service,
	ServiceBroker,
	ServiceSchema,
	Errors,
} from "moleculer";
import SocketIOService from "moleculer-io";

export default class LibrarySocketService extends Service {
	// @ts-ignore
	public constructor(
		public broker: ServiceBroker,
		schema: ServiceSchema<{}> = { name: "librarysocket" }
	) {
		super(broker);
		this.parseServiceSchema(
			Service.mergeSchemas(
				{
					name: "librarysocket",
					mixins: [SocketIOService],
					settings: {
                        port: 3001,
                        io: {
                            options: {
                                // adapter: redisAdapter({ host: 'localhost', port: 6379 })
                            },
                            namespaces: {
                                "/": {
                                    middlewares: [
                                        function (socket, next) {
                                            console.log("namespace middleware"); //point to service instance.
                                            next();
                                        }
                                    ],
                                    // packetMiddlewares:[],
                                    events: {
                                        call: {
                                            whitelist: ["import.*", "imagetransformation.*", "comicvine.*", "librarysocket.*"],
                                            onBeforeCall: async function (
                                                ctx,
                                                socket,
                                                action,
                                                params,
                                                callOptions
                                            ) {
                                                console.log("before hook:", { action, params, callOptions });
                                            },
                                            onAfterCall: async function (ctx, socket, res) {
                                                console.log("after hook", res);
                                            }
                                            // callOptions:{}
                                        },
                                        hello: async function ({ name, type }, file, respond) {
                                            console.log("hello", name)
                                        } 

                                    }
                                }
                            }
                        }
					},
					hooks: {},
					actions: {
						
					},
					methods: {},
				},
				schema
			)
		);
	}
}

The API Gateway starts properly, but it seems that new connections are been spawned:

[2021-10-25T01:31:08.367Z] INFO  mac-mini.localdomain-63071/LIBRARYSOCKET: (nsp:'/') Client connected: ud--MOhsrOxHYjtKABTp
namespace middleware
[2021-10-25T01:31:13.374Z] INFO  mac-mini.localdomain-63071/LIBRARYSOCKET: (nsp:'/') Client connected: BVrLP7wGn6ra3ku2ABTq
namespace middleware
[2021-10-25T01:31:18.380Z] INFO  mac-mini.localdomain-63071/LIBRARYSOCKET: (nsp:'/') Client connected: 8A5oSA0xkubgVf9yABTr

For what its worth, my React client has this code:

import React, { createContext, ReactElement } from "react";
import io, { Socket } from "socket.io-client";
import { SOCKET_BASE_URI } from "../../constants/endpoints";
import { useDispatch } from "react-redux";
import { RMQ_SOCKET_CONNECTED } from "../../constants/action-types";
import { success } from "react-notification-system-redux";

const WebSocketContext = createContext(null);
export const WebSocketProvider = ({ children }): ReactElement => {
  const dispatch = useDispatch();
  const socket: Socket = io(SOCKET_BASE_URI);
  socket.on("connect", () => {
    console.log("connected"); // <-- this never fires
    dispatch({
      type: RMQ_SOCKET_CONNECTED,
      isSocketConnected: true,
      socketId: socket.id,
    });
  });
  
  socket.on("disconnect", () => {
    console.log(`disconnect`);
  });

  const ws: any = {
    socket,
  };

  return (
    <WebSocketContext.Provider value={ws}>{children}</WebSocketContext.Provider>
  );
};
export { WebSocketContext };
export default WebSocketProvider;

The socket never connects from the client, and socket.on("connect"... never seems to succeed.

What am I doing wrong?