How to override socketio.py to handle custom paylods

I have a webwidget as follows:

(function () {
    // Inline the script element creation
    var scriptElement = document.createElement("script");
    const chatContainer = document.getElementById("chat-container");
    scriptElement.src = "./widget.js";
    scriptElement.async = true;
    scriptElement.onload = function () {
        window.WebChat.default({
            customData: '{"channel": "Channel::webchat"}',
            metadata: {"Name":"JANE DOE"},
            inputTextFieldHint: "Please type here",
            socketUrl: "http://localhost:5056",
	    socketPath: "/socket.io/",
            initPayload: '/welcome{"channel":"webchat"}',
profileAvatar: "https://somehost.io/wp-content/themes/digo/assets/images/icons/chat-icon-orange.svg",
            openLauncherImage: "https://somehost.io/wp-content/themes/digo/assets/images/icons/chat-icon-orange.svg",
            title: 'COMPANY NAME',
            subtitle: 'It\'s the Win Win Platform',
            hideWhenNotConnected: false,
            closeImage: "https://somehost.io/wp-content/themes/digo/assets/images/icons/chat-icon-orange.svg",
            showCloseButton: false,
            showMessageDate: true
        });
    };

    // Append the script element to the head element
    var headElement = document.head || document.getElementsByTagName("head")[0];
    headElement.insertBefore(scriptElement, headElement.firstChild);

})();

and my rasa server is running on localhost:5056

my credentials.yml file:

socketio: 
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true
  metadata_key: customData
  credentials_module: "addons.socketio" 

some of my custom payload are structured like this:

#only text
json_data={
          "content": "This is text"
}

#image-button-text
        button_resp=[
            {
                "type":"reply",
                "reply":{
                    "title": "yes",
                    "id":1,
                }
            },
            {
                "type":"reply",
                "reply":{
                    "title": "no",
                    "id":2,
                }
            }
        ]
		
        json_data={
            "body": {
                "text":"This is image + button"
            },
            "buttons":button_resp,
            "type":"image_button",
            "image":{
                "link": "somepath/qweryty.png"
            }
        }

my custom connector for socketio.py is in folder called “addons”.

but when I send a message from my webwidget, it is never handled by my customer socketio.py file. what am I doing wrong here?

Your credentials.yml is using the standard socketio channel. If you want to use your own custom channel the line with socketio: should look something what is shown in the docs here?