Error showing by connection to socket.io client - whats wrong?

@schmcklr your rasa --version and sanic version whilst activating envionment (pip list)

rasa 3.0.9 sanic 21.12.0

@schmcklr always tag me and please activate the environment then type rasa --version share the screenshot and then type pip list share the screenshot.

@nik202

@nik202 Package Version


absl-py 0.13.0 aio-pika 6.8.2 aiofiles 0.8.0 aiohttp 3.7.4 aiormq 3.3.1 APScheduler 3.7.0 astunparse 1.6.3 async-generator 1.10 async-timeout 3.0.1 attrs 21.2.0 bidict 0.21.4 boto3 1.21.22 botocore 1.24.22 CacheControl 0.12.10 cachetools 5.0.0 certifi 2021.10.8 cffi 1.15.0 chardet 3.0.4 charset-normalizer 2.0.12 clang 5.0 cloudpickle 1.6.0 colorclass 2.2.2 coloredlogs 15.0.1 colorhash 1.0.4 cryptography 3.4.8 cycler 0.11.0 dask 2021.11.2 decorator 5.1.1 dm-tree 0.1.6 dnspython 1.16.0 docopt 0.6.2 fbmessenger 6.0.0 fire 0.4.0 flatbuffers 1.12 fsspec 2022.2.0 future 0.18.2 gast 0.4.0 google-auth 2.6.2 google-auth-oauthlib 0.4.6 google-pasta 0.2.0 greenlet 1.1.2 grpcio 1.44.0 h11 0.8.1 h2 3.2.0 h5py 3.1.0 hpack 3.0.0 httpcore 0.3.0 httptools 0.4.0 humanfriendly 10.0 hyperframe 5.2.0 idna 2.10 importlib-metadata 4.11.3 jmespath 1.0.0 joblib 1.0.1 jsonpickle 2.0.0 jsonschema 3.2.0 kafka-python 2.0.2 keras 2.6.0 Keras-Preprocessing 1.1.2 kiwisolver 1.4.0 locket 0.2.1 Markdown 3.3.6 matplotlib 3.3.4 mattermostwrapper 2.2 msgpack 1.0.3 multidict 5.2.0 networkx 2.6.3 numpy 1.19.5 oauthlib 3.2.0 opt-einsum 3.3.0 packaging 20.9 pamqp 2.3.0 partd 1.2.0 Pillow 9.0.1 pip 22.0.4 prompt-toolkit 2.0.10 protobuf 3.19.4 psycopg2-binary 2.9.3 pyasn1 0.4.8 pyasn1-modules 0.2.8 pycparser 2.21 pydot 1.4.2 PyJWT 2.1.0 pykwalify 1.8.0 pymongo 3.10.1 pyparsing 3.0.7 pyrsistent 0.18.1 pyTelegramBotAPI 3.8.3 python-crfsuite 0.9.7 python-dateutil 2.8.2 python-engineio 4.3.1 python-socketio 5.5.2 pytz 2021.3 PyYAML 6.0 questionary 1.10.0 randomname 0.1.5 rasa 3.0.9 rasa-sdk 3.0.6 redis 3.5.3 regex 2021.8.28 requests 2.27.1 requests-async 0.5.0 requests-oauthlib 1.3.1 requests-toolbelt 0.9.1 rfc3986 1.5.0 rocketchat-API 1.16.0 rsa 4.8 ruamel.yaml 0.16.13 ruamel.yaml.clib 0.2.6 s3transfer 0.5.2 sanic 21.12.0 Sanic-Cors 2.0.1 sanic-jwt 1.7.0 sanic-routing 0.7.2 scikit-learn 0.24.2 scipy 1.8.0 sentry-sdk 1.3.1 setuptools 56.0.0 six 1.15.0 sklearn-crfsuite 0.3.6 slackclient 2.9.3 SQLAlchemy 1.4.32 tabulate 0.8.9 tarsafe 0.0.3 tensorboard 2.8.0 tensorboard-data-server 0.6.1 tensorboard-plugin-wit 1.8.1 tensorflow 2.6.1 tensorflow-addons 0.14.0 tensorflow-estimator 2.6.0 tensorflow-hub 0.12.0 tensorflow-probability 0.13.0 tensorflow-text 2.6.0 termcolor 1.1.0 terminaltables 3.1.10 threadpoolctl 3.1.0 toolz 0.11.2 tqdm 4.63.0 twilio 6.50.1 typeguard 2.13.3 typing-extensions 3.7.4.3 typing-utils 0.1.0 tzlocal 2.1 ujson 4.3.0 urllib3 1.26.9 uvloop 0.16.0 wcwidth 0.2.5 webexteamssdk 1.6 websockets 10.2 Werkzeug 2.0.3 wheel 0.37.1 wrapt 1.12.1 yarl 1.7.2 zipp 3.7.0

@schmcklr what is your front end? can you share the snippet code?

@nik202 import {Widget, addResponseMessage} from “react-chat-widget”; import “react-chat-widget/lib/styles.css”;

import {io} from “socket.io-client”; const socket = io(“http://localhost:5005”, { pathname: ‘/socket.io’, transports: [‘websocket’], });

const Home = () => {

//Connecting with Server - positive response
socket.on('connect', function () {
    console.log("Connected to Socket.io server");
});

// Write any connection errors to the console
socket.on('connect_error', (error) => {
    console.error(error);
});

// send messages from client to server
const handleNewUserMessage = (newMessage) => {
    console.log(newMessage);
    socket.emit("user_uttered", newMessage);
    socket.on("bot_uttered", (message) => {
    addResponseMessage(message);
});
};


//bot responses
const messages = document.getElementById('messages');

function appendMessage(msg, type) {
    const item = document.createElement('div');
    item.textContent = msg;
    item.classList.add("message");
    item.classList.add(`message_${type}`);
    messages.appendChild(item);
};

socket.on('bot_uttered', function (response) {
console.log("Bot uttered:", response);
if (response.text) {
    appendMessage(response.text, "received");
}
});

//messages from bot to frontend socket.on(“bot_uttered”, (message) => { addResponseMessage(message); }); /* //new Message effect on icon useEffect(() => { addResponseMessage(“Hey ich bin Liefy der Lieferbot. Kann ich dir weiterhelfen?”); }, []); */

return (
    <div className="container">
        <div className="row">
            <h1 className="text-center p-5 display-1">Liefy der Chatbot</h1>
            <hr/>
            <br/>
            <h2 className="">Wie funktioniert Liefy?</h2>
            <hr/>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam blanditiis cum debitis
                facilis ipsum magnam praesentium qui quo ratione soluta tempora ullam, unde vero voluptatibus. Alias
                enim placeat quisquam.</p>

        </div>
        <Widget handleNewUserMessage={handleNewUserMessage}
                initPayload={"/get_started"}
                socketUrl={"http://localhost:5005"}
                socketPath={"/socket.io/"}
                customData={{"language": "en"}}
                params={{'storage':'session'}}
                title={"Liefy der Chatbot"}
                subtitle={"How can I help you?"}
                showTimeStamp={"yes"}

                />
    </div>
);

}; export default Home;

@schmcklr this code you written yourself or referred from somewhere? (Reference link if any)

@nik202 myself, based on this RASA - Socket.IO integration - DEV Community

@nik202 link to our github project GitHub - schmcklr/widget

@schmcklr I’m aware this repo and code, but as per the new Rasa 3.x version there are a lot of issue with socket. io . I’m aware much of the issue based on rasawebchat/botfront but not related to this code.