Why does spring websocket application not see html and throws a 404 error?-CodePudding

I'm trying to make a chat using spring boot and websocket according to the guide.

Simple config class:

@Configuration
@EnableWebSocketMessageBroker
public class webSocketConfiguration implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry){
        registry.addEndpoint("/chat").withSockJS();
    }
}

my controller :

@Controller
public class MessageController {

    @MessageMapping("/hello")
    @SendTo("/topic/chatting")
    public Message messageHandler(Name name) throws Exception{
        return new Message("Hello, "   name.getName()   " !");
    }
}

class for message:

public class Message {
    private String content;

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public Message(String content) {
        this.content = content;
    }

    public Message() {

    }
}

and class for name:

package com.example.webSocketChat.Messages;

public class Name {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Name(String name) {
        this.name = name;
    }

    public Name() {

    }
}

And actually the html page itself, it is located in resource/static,although for some reason there was no static folder, although I created the project through Spring Initializr:

<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <script src="sockjs-0.3.4.js"></script>
    <script src="stomp.js"></script>
    <script type="text/javascript">
        var stompClient = null;

        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            document.getElementById('response').innerHTML = '';
        }

        function connect() {
            var socket = new SockJS('/chat');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected: '   frame);
                stompClient.subscribe('/topic/chatting', function(message){
                    showGreeting(JSON.parse(message.body).content);
                });
            });
        }

        function disconnect() {
            stompClient.disconnect();
            setConnected(false);
            console.log("Disconnected");
        }

        function sendName() {
            var name = document.getElementById('name').value;
            stompClient.send("/app/hello", {}, JSON.stringify({ 'name': name }));
        }

        function showGreeting(message) {
            var response = document.getElementById('response');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }
    </script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <div id="conversationDiv">
        <label>What is your name?</label><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">Send</button>
        <p id="response"></p>
    </div>
</div>
</body>
</html>

It seems to have done everything correctly according to the guide and figured out what was going on, but if you go to the address at startup http://localhost:8080 it throws a 404 error but if you go to the address http://localhost:8080/chat will be the message Welcome to SockJS!.

What could be the mistake here? I can't notice it, I did everything according to 2 guides and there is exactly the same code. I will be glad to help

CodePudding user response：

First, there is webjars-locator dependency issue while building the project due to not mentioning the version.

Change to implementation 'org.webjars:webjars-locator:0.32' in build.gradle.

Next change the name of html page from app.html to index.html. The default html is considered to be index.html only.

That's all.

CodePudding user response：

Okay, so could you please clarify the problem? Is it why the page is showing 404 error at root url but the /chat route works?

If you are asking the above then check the HTML file where under connect() you are opening the socket at “/chat” route. Also in your Java code the endpoint is under /chat, hence that triggers the SockJS connection. The root url doesn’t do anything.