Uncaught error invalidstateerror the connection has not been established yet

Issue

When using stomp.js and sockjs from within Javascript, I can connect well with a Spring Boot backend.

When using stompjs and sockjs from with Angular5, I keep on getting these errors:

InvalidStateError: The connection has not been established yet

Is there a workaround? Just adding the sockjs.min.js, as mentioned in this post, was not helping.

The detailed log is:

Setting up connection/1 main.3388a5e3a20e64e3bdb8.bundle.js:1 Setting
up connection/2 main.3388a5e3a20e64e3bdb8.bundle.js:1 Going to
subscribe … main.3388a5e3a20e64e3bdb8.bundle.js:1 Opening Web
Socket… main.3388a5e3a20e64e3bdb8.bundle.js:1 >>> SEND
destination:/app/chat.addUser content-length:29

{«sender»:»me»,»type»:»JOIN»} main.3388a5e3a20e64e3bdb8.bundle.js:1
ERROR Error: Uncaught (in promise): Error: InvalidStateError: The
connection has not been established yet Error: InvalidStateError: The
connection has not been established yet
at r.send (scripts.d6f701ecf84f24372966.bundle.js:1)

My code in Angular (translated from Javascript) is:

 let ws = new SockJS(this.serverUrl);
    this.stompClient = Stomp.over(ws);
    let that = this;
    console.log('Setting up connection/2');
    console.log('Going to subscribe ... ');
    this.stompClient.connect({}, function (frame) {
      console.log('Going to subscribe ... ');
      that.stompClient.subscribe('/topic/public', (payload) => {
          console.log('Subscribe: Incoming message: ' + payload.body);
          if (payload.body) {
            let message = JSON.parse(payload.body);
            if (message.sender === 'MyBot') {
              this.createAndAddChat('you', message.content);
            } else {
              this.createAndAddChat('me', message.content);
            }
            console.log('New message arrived: ' + payload.body);
          }
        },
        error => {
          console.log( 'Subscribe: error: ' + error)
        },
        () => {
         console.log( 'Subscribe, On complete')
        });
    });
    this.stompClient.send("/app/chat.addUser", {},
      JSON.stringify({sender: 'me', type: 'JOIN'})
    )

Solution

The send method is now called directly after starting (!) the asynchronous get-connection call. That’s wrong.

There are 2 solutions:

• Good: Put the send call within the async-body of the get-connection. So after the connection is made, call the send method.
• Not optimal: Wait for some time to have the async get-connection to complete.

Answered By — tm1701

Below are the demos and comments I wrote, in order to use websocket in the future, it looks a little more convenient=-=

<template>
  <div>
    <button @click="sendDevName('xxxxxxxx')">send</button>
    {{data}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      data: null
    }
  },
  // Execute initWebSocket() to initialize websocket after html loading
  mounted () {
    this.initWebSocket()
  },
  // Execute when leaving this layer, focus on it! ! !
  destroyed: function () {
    // Disconnect the websocket connection after leaving the route
    this.websock.close()
  },
  methods: {
    // Initialize websocket
    initWebSocket () {
      const path = 'ws://xxx.xxx.xxx.xxx:port number/xxxxx'// The ip address of websocket given by the background
      this.websock = new WebSocket(path)
      this.websock.onmessage = this.websocketOnMessage
      this.websock.onopen = this.websocketOnOpen
      this.websock.onerror = this.websocketOnError
      this.websock.onclose = this.websocketClose
    },
    // Signal that the connection is established successfully
    websocketOnOpen () {
      console.log('initialized successfully')// After the connection is successful, you can write some callback functions here
    },
    // Reconnect after connection establishment failure
    websocketOnError () {
      // If an error is reported, you can reinitialize the websocket here, which is disconnected and reconnected
      this.initWebSocket()
    },
    // data reception
    websocketOnMessage (e) {
      console.log(e)// The variable e is the data returned from the background, and the returned value can be processed in this function
      this.data = e// Here I bind a data, data will display the things from the backend on the web page
    },
    // data transmission
    websocketSend (Data) {
      this.websock.send(Data)// The Data variable is what you want to say to the backend, and interact according to the interface document passed to you by the backend
    },
    // closed signal
    websocketClose () {
      console.log('Disconnect')
    },
    // Pass the parameters to the backend, here is another layer of encapsulation for websocketSend, you can delete the ones you don’t need
    sendDevName (chooseDevice) {
      console.log(chooseDevice)
      this.websocketSend(chooseDevice)
    }
  }
}
</script>

Frontend click to send

The back-end server will receive the things in the mosaic

When the front end clicks the send button to trigger the websocketSend (Data) function, the back end will receive the message sent by the front end, and then send the information required by the front end according to the message from the front end. When something is sent, it will trigger the websocketOnMessage (e) function

The pits I stepped on when writing code

Uncaught InvalidStateError: Failed to execute ‘send’ on ‘WebSocket’: Still in CONNECTING state

This means that the websocket is still connected and the send method fails to be called

The reason is that when I initialize the websocket, I directly call send to talk to the background. At this time, the websocket may not be connected yet, and this error will be reported.

So I learned well, and I call out after the initialization is successful, there will be no problem

Popularize the status of websocket

Two properties of websocket: readyState and bufferedAmount.
According to the readyState attribute, the connection status of the webSocket can be judged. The value of this attribute can be the following:
0: corresponds to the constant CONNECTING (numeric value 0),
The connection is being established and has not been completed. The connection has not yet been established.
1: corresponds to the constant OPEN (numeric value 1),
The connection is successfully established and you can communicate. The WebSocket connection is established and communication is possible.
2: Corresponding constant CLOSING (numeric value 2)
The connection is in the process of closing handshake and will be closed soon. The connection is going through the closing handshake.
3: Corresponding constant CLOSED (numeric value 3)
The connection has been closed or not established at all. The connection has been closed or could not be opened.
Example:
var socket = new WebSocket(url);
if(socket.readyState!=1){
alert(«Not connected.»);
return;
}
According to bufferedAmount, you can know how many bytes of data are waiting to be sent. If the websocket has called the close method, this attribute will keep growing.