Widget unable to connect to websocket, messages not sending

Community Support
1

Hello, sorry if this question is redundant, just trying to integrate it for a job and I need some help. Im trying to integrate tiledesk locally to my application and I’ve made some progress but Im currently stuck.

So Ive downloaded a few of the repos and managed to get them running locally:

  1. Tiledesk cloud functions - deployed functions to firebase already.
  2. Tiledesk widget - running
  3. Tiledesk-dashboard - running and created a user and managed to login. Created the project and got the project id and js widget.
  4. Tiledesk-server - running and the database entries are populated.

When i copy and paste the widget script in a blank html file, the widget shows up. However, it doesnt seem to be able to connect to the websocket hence the messages just stay at one tick. Just trying to figure out what I need to set to get it working… Is it some king of setting i need to do on my tiledesk-server or tiledesk-dashboard?

image
image1223×881 90.5 KB

2

Further updates that I have. Sorry, I’m just trally trying to solve this issue so any help would be great…
I noticed that the url for my webwidget that is trying to connect to the websocket is 'ws://0.0.0.0/ng-cli-ws"
But when i monitor my tiledesk-server logs, it doesnt seem to trigger the server with the connection attempts. So my question is:

  1. Why is the url that the web widget is trying to connect to is ws://0.0.0.0/ng-cli-ws? Is it the angular way to connect or is it because the websocket url was not set properly in the configuration?
  2. Where to set the wsUsl configuration. I’ve set it under environments as as well as widget-config.js. (my server backend is localhost:35000)**
    ** due to embedded media constraint, I’ve placed only one but the environments file will be the same setting

image
image1095×275 22.3 KB

3

Also, I tried creating a simple js client to connect to the websocket server. I have it set up like this:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Client</h1>
    <input type="text" id="messageInput" placeholder="Enter a message">
    <button onclick="sendMessage()">Send Message</button>
    <div id="output"></div>

    <script>
        const socket = new WebSocket(`ws://localhost:3500?token=<token value here>`); 

        socket.addEventListener("open", (event) => {
            console.log("Connected to WebSocket server");
        });

        socket.addEventListener("message", (event) => {
            const output = document.getElementById("output");
            output.innerHTML += `<p>Received from server: ${event.data}</p>`;
        });

        socket.addEventListener("close", (event) => {
            console.log("Connection closed");
        });

        function sendMessage() {
            const messageInput = document.getElementById("messageInput");
            const message = messageInput.value;
            socket.send(message);

            // Clear the input field
            messageInput.value = "";
        }
    </script>
</body>
</html>

It connected successfully. So Im pretty sure the websocket server is up adn running, just that the chat widget is not pointing to the correct url due to configuration

4

@Nigel33 Hello Nigel. Have you set up tiledesk locally end to end using source code? I have few doubts

5

@Nigel33 Hi Nigel. How are you doing