I'm trying to establish a websocket between a SpringBoot app at localhost:8090 and a React app at localhost:3000. Through Postman i'm able to establish a websocket connection and send/receive messages at localhost:8090/api/web-socket.

When I run the React app, the application loads but isn't able to establish the websocket connection to Springboot. I've tried the connection to both 127.0.0.1 and localhost with no luck. When I try to debug in the browser console I see the following error: "WebSocket connection to 'ws://localhost:8090/api/web-socket' failed:" notice there isn't any error details. The error location references line 28 of browser.js which is

else { native_instance = new NativeWebSocket(uri); }

Here is the full block:

function W3CWebSocket(uri, protocols) {
var native_instance;

if (protocols) {
    native_instance = new NativeWebSocket(uri, protocols);
}
else {
    native_instance = new NativeWebSocket(uri);
}

What is this error? How can I resolve it?

Here is the what the React code for establishing the socket connection:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {w3cwebsocket as W3CWebSocket} from "websocket";
import './index.css';

const client = new W3CWebSocket('ws://localhost:8090/api/web-socket');

export default class App extends Component{

    onButtonClicked = (value) => {
        client.send(JSON.stringify({
                type: "message",
                msg: value
            }
        ));
}

    componentDidMount() {
        client.onopen = () => {
            console.log('websocket client connected');
        };
        client.onmessage = (message) =>{
            const dataFromServer = JSON.parse(message.data);
            console.log("reply from socket server: ", dataFromServer);
        }
    }

    render() {
        return(
        <div>
            <button onClick={() => this.onButtonClicked("Example message from client to server")}>Send Message(start SAP)</button>
        </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

UPDATE - RESOLVED

So after some further digging i discovered the issue was related to cross origin setting on the SpringBoot side. For anyone that runs into this issue in the future try the to add the following to your Socket configuration class:

.setAllowedOrigins("*")

In full it would look something like this:

registry.addHandler(new SocketTextHandler(), "/your-route").setAllowedOrigins("*");