[SOLVED] WebSocket connection's problem in javascript

Troubleshooting
1

So after my problem of GitLab connection using the api,
I have another problem :
I configured Mattermost to receive incoming data using incoming webhooks from a website, that works great , nd then i want to send the data to another website using Outgoing Webhooks.
So i proggramed it to react on the world “!jenkins”.

It works great when it is a user that type this world , but don’t work when the message come from incoming webhooks.
Can you help me? Thanks

Here is the data of posts :

{
    "order":
    [
        "8f6i97we93dadkgixciz9dqdoo",
        "iy1fqejcyjr67jwxx1uo54geho",
        "851oawss7bng3jhmr6rxxyyhnc"
    ],
    "posts":
    {
        "851oawss7bng3jhmr6rxxyyhnc":
        {
            "id": "851oawss7bng3jhmr6rxxyyhnc",
            "create_at": 1501751466560,
            "update_at": 1501751466560,
            "edit_at": 0,
            "delete_at": 0,
            "is_pinned": false,
            "user_id": "brur55b9rin6pykjaycaosbwbh",
            "channel_id": "pzxe1do3j3dfper67sq4hwijuy",
            "root_id": "",
            "parent_id": "",
            "original_id": "",
            "message": "!jenkins - Success",
            "type": "",
            "props":
            {
                "from_webhook": "true",
                "override_username": "jenkins"
            },
            "hashtags": "",
            "pending_post_id": ""
        },
        "8f6i97we93dadkgixciz9dqdoo":
        {
            "id": "8f6i97we93dadkgixciz9dqdoo",
            "create_at": 1501751610379,
            "update_at": 1501751610379,
            "edit_at": 0,
            "delete_at": 0,
            "is_pinned": false,
            "user_id": "brur55b9rin6pykjaycaosbwbh",
            "channel_id": "pzxe1do3j3dfper67sq4hwijuy",
            "root_id": "",
            "parent_id": "",
            "original_id": "",
            "message": "!jenkins ",
            "type": "",
            "props":
            {
                "from_webhook": "true",
                "override_username": "webhook"
            },
            "hashtags": "",
            "pending_post_id": ""
        },
        "iy1fqejcyjr67jwxx1uo54geho":
        {
            "id": "iy1fqejcyjr67jwxx1uo54geho",
            "create_at": 1501751487259,
            "update_at": 1501751487259,
            "edit_at": 0,
            "delete_at": 0,
            "is_pinned": false,
            "user_id": "yddrcj7f6bnn9m1cn55qh1jwxo",
            "channel_id": "pzxe1do3j3dfper67sq4hwijuy",
            "root_id": "",
            "parent_id": "",
            "original_id": "",
            "message": "!jenkins z",
            "type": "",
            "props":
            {
            },
            "hashtags": "",
            "pending_post_id": ""
        }
    }
}
2

Hi @alexandremichaud,

I believe that is because you can’t trigger a hook from another hook, it was not designed that way.

3

Sorry i’m not very polite!
Hi @prixone
Ok so if i understand i can’t send the data received directly.
In my mind i’m seing how to do , i would use websocket within my application to mattermost. But i tried to connect it all the afternoon using my Websocket client but nothing to do , i can’t etablish the connection.
I took a look at the WS driver that we can find on github, but i didn’t understand the code.
Could you help me?

By the way thanks for the help,
Alexandre

4

Sorry, perhaps I did not explain it well.

  • If you create a incoming webhook and use it to send the message “Hi, we rock!”
  • and then then you create a outgoing webhook that uses the word “rock” as a trigger

The messages sent by your incoming webhook will not be read/view by the outgoing webhook.

The system is designed so that it reads/passes users events to the hooks, so if a user sends the word “rock” it will trigger the outgoing webhook, but if the incoming webhook sends the word “rock”, it will not!

In short, you cannot use a incoming webhook to trigger a outgoing webhook.

Hope its clear now.

5

I think that it was me that did not explain it well ! :')

I was thinking to use WebHook because i am not able to connect my app to the mattermost server using websocket.

So in my mind it was a good idea to use WebHook but now i understand it was not working.

So now i’ll try to use webSocket
But here is the problem : when i connect i have an error :

The config:

URL GET : https://website/api/v3/users/websocket
Header :
Host: website
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Encoding: gzip, deflate , br
Connection: keep-alive
Sec-WebSocket-Version: 13
Origin: website
Sec-WebSocket-Key: Fhe6fN1NX6UqmiAgOpDnWA==
Cookie: ajs_user_id=null; ajs_group_id=null; ajs_anonymous_id=%2200000000000000000000000000%22; MMAUTHTOKEN=blablabla; MMUSERID=blablabla
Upgrade: websocket

Got this response :
Bad Request
{“id”:“api.web_socket.connect.upgrade.app_error”,“message”:“Échec de la mise-à-jour de la connexion websocket”,“detailed_error”:“”,“request_id”:“z7mpuz4dipr69jdwgpjcpn9x8e”,“status_code”:500}

It is the same request that is made by the Mattermost web interface , so i don’t understand why it is working with the site and not with me

Thanks again for your help

6

You need proper code to upgrade and listen to the websocket, websocket is not a simple get request.

api.web_socket.connect.upgrade.app_error

This means your code is not properly handling the websocket.

This may give you some ideas, here is a mattermost library, that have a websocket implementation, so you might be able to check it out and see what you’re lacking:

https://github.com/Zaicon/MattermostDriver

To connect to the websocket or API, you need a valid token, so you need to do the process you already said you can’t do, which requires Mattermost 4.1 to use the new API calls for gitlab tokens.

7

Hi, i came back to you because i didn’t resolve my problem.
So as you said, i can’t get the token for the moment so what i’ve done is to get the tokens using cookies. Now i’m able to fetch data using the api.

I used the websocketClient.js’s driver that can be found here : GitHub - mattermost/mattermost-driver-javascript: Javascript library for interacting with the Mattermost API , and it seems to work proprely. But i don"t have any response from the Mattermost server. Here what i’ve got in the console.log :

[React Transform HMR] Patching SecWatt
websocket connecting to https://Mattermost/api/v3/users/websocket
test

Here is my code :

    import Websocket from "../Applications/mattermost-driver-javascript-master/websocket_client"


export default class SecWatt extends Component {
    static navigationOptions = {
        tabBarLabel: 'SecWatt',
    };
    constructor(props){
        super(props);
    }

    render() {
        let webs = new Websocket();
        webs.initialize("https://*Mattermost*/api/v3/users/websocket" , "7x9tijmx57yfxbhezhatnwxwih");

        const {navigate} = this.props.navigation;
        console.log("test");
        return(
            <View>
            </View>
        );
    }
}

Did i missed something? Thanks in advance for helping me

8

its taking a websocket so it should be either ws or wss not https.

webs.initialize("wss://*Mattermost*/api/v3/users/websocket" , "7x9tijmx57yfxbhezhatnwxwih");

Unless its converting the https behind the scenes which I am not seeing.

9

yes, i already tried but it doesn’t change nothing…

10

Well I am not a javascript person, so I quoted your question for the developers of the javascript driver and once I get an answer I will post it here.

11

okay ,thanks a lot for helping :slight_smile:

12

Hi @alexandremichaud,

There’s a few things you’ll probably want to look at for your implementation:

  1. Connecting to the WebSocket inside the render() function is likely going to cause you problems. The render() functions of React components should only be used to build the JSX elements to display in the UI and it gets called repeatedly, meaning that in your implementation you’re going to initialize many new WS connections. You can read more about React and it’s best practices at the official documentation https://facebook.github.io/react/docs/hello-world.html. I would suggest creating a new non-component class to deal with handling the WebSocket or at the very least moving it into one of the life cycle components, such as componentDidMount().
  2. You’re using let which is locally scoped, so as soon as your render() function exits, it’s going to get garbage collected no longer be of use. I’d suggest using a global or class variable to store the WebSocket instance.
  3. Now to the specific problem you’ve asked about, not seeing any messages from the WebSocket. From what I can tell it looks like you’re connecting no problem so the only piece you’re missing is to start listening for events from the server. To do this you can use webs.setEventCallback() function, like so:
function printEvent(msg) {
    console.log(msg);
}

var webs = new Websocket();
webs.setEventCallback(printEvent);
webs.initialize("https://*Mattermost*/api/v3/users/websocket" , "7x9tijmx57yfxbhezhatnwxwih");

Hope that helps!

2 Likes
13

Hi @jwilander
Thanks for your help ,
I made all the changes that you tell me to do.

But i don’t think i get connected to my mattermost platforms. Because i put console.log in all the cases ( onOpen, onClose, onError, and onMessage but nothing except “websocket connecting to wss:// …” is shown in the consol.
I precise that i waited more than 10 minutes.

Edit : works great, it was because i had put the printEvent in my class. Thanks a lot for your help ! :slight_smile: