我使用 STOMP 协议实现了聊天。 但是 websocket 没有连接

Question

确切地说，日志在Opening Web Socket...中停止，没有处理。 我在 Google 上找不到与我相同的案例。

一个值得怀疑的地方是我写下了 SockJS 的日志，而 connected 属性是错误的。

但问题是这会奏效，但突然间就不行了。

我将附上日志和我在控制台上编写的代码。

<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function(){

        var roomId = [[${room.roomId}]];
        var username = [[${session.loginId}]];
        const date = new Date();
        var time = date.toLocaleTimeString('ko-kr').substring(0, 7);

        console.log(roomId + ", " + username);

        var sockJs = new SockJS("/stomp/chat");
        var stomp = Stomp.over(sockJs);

        axios.get('/chat/user').then(response => {
            this.token = response.headers.token;
            console.log("token : " + this.token);
            console.log(sockJs);
            console.log(stomp);

            stomp.connect({"token" : this.token}, function (){
                console.log("STOMP Connection")

                stomp.subscribe("/sub/chat/room/" + roomId, function (chat) {
                    var content = JSON.parse(chat.body);

                    var writer = content.writer;
                    var message = content.message;
                    var str = '';

                    if(writer === username){
                        str = "<div class='col-6'>";
                        str += "<div class='alert alert-secondary'>";
                        str += "<b>" + time + " " + writer + " : " + message + "</b>";
                        str += "</div></div>";
                    }
                    else{
                        str = "<div class='col-6'>";
                        str += "<div class='alert alert-warning'>";
                        str += "<b>" + time + " " + writer + " : " + message + "</b>";
                        str += "</div></div>";
                    }
                    $("#msgArea").append(str);
                });

                stomp.send('/pub/chat/enter', {}, JSON.stringify({roomId: roomId, writer: username}))
            });

        })

        $("#button-send").on("click", function(e){
            var msg = document.getElementById("msg");

            console.log(username + ":" + msg.value);
            stomp.send('/pub/chat/message', {}, JSON.stringify({roomId: roomId, message: msg.value, writer: username}));
            msg.value = '';
        });

        var input = document.getElementById('msg');

        input.addEventListener("keyup", function (event) {
            if (event.keyCode === 13) {
                document.getElementById("button-send").click();
            }
        });
    });
    /*]]>*/
</script>

StompChatController.java

package com.capston.chatting.controller.chat;

import com.capston.chatting.dto.ChatMessageDTO;
import com.capston.chatting.entity.ChatRoom;
import com.capston.chatting.entity.Member;
import com.capston.chatting.provider.JwtTokenProvider;
import com.capston.chatting.repository.MemberRepository;
import com.capston.chatting.service.chat.ChatMessageService;
import com.capston.chatting.service.chat.ChatRoomService;
import com.capston.chatting.service.member.MemberService;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

import java.time.LocalDateTime;

@Slf4j
@Controller
@RequiredArgsConstructor
public class StompChatController {

    private final SimpMessagingTemplate template;
    private final ChatRoomService chatRoomService;
    private final MemberRepository memberRepository;
    private final ChatMessageService chatMessageService;

    /**
     * 메시지를 보낼 때 호출되는 컨트롤러
     * @param message
     */
    @MessageMapping(value = "/chat/message")
    public void message(ChatMessageDTO message) {
        Member findMember = memberRepository.findMemberByLoginId(message.getWriter());

        ChatRoom findRoom = chatRoomService.findRoomById(message.getRoomId(), findMember);

        String date = LocalDateTime.now().toString().substring(11, 16);

        chatMessageService.save(findRoom, message.getMessage(), date, findMember.getLoginId());

        log.info("{} : 메시지가 입력되었습니다. message = {}, writer = {}", message.getRoomId(), message.getMessage(), message.getWriter());
        template.convertAndSend("/sub/chat/room/" + message.getRoomId(), message);
    }
}

StompWebSocketConfig.java

package com.capston.chatting.config;

import com.capston.chatting.interceptor.StompHandlerInterceptor;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.ChannelRegistration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Slf4j
@Configuration
@EnableWebSocketMessageBroker
@RequiredArgsConstructor
public class StompWebSocketConfig implements WebSocketMessageBrokerConfigurer {

    private final StompHandlerInterceptor stompHandlerInterceptor;

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/stomp/chat")
                .setAllowedOrigins("http://localhost:8080")
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/sub");
        registry.setApplicationDestinationPrefixes("/pub");
    }

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        registration.interceptors(stompHandlerInterceptor);
    }
}

在此处输入图像描述

Answer 1

您缺少主机：

var sockJs = new SockJS("http://localhost:<your_port>/stomp/chat");