avi_sdk
@avi_sdk
pseudoweber

Почему отсутствует соединение по websocket между браузером и сервером?

Всем привет! Обучаюсь программированию на Java в период самоизоляции. Дошел до создания своего маленького приложения для портфолио, а именно чата. Написал сервервную часть и клиентскую. Первая версия была написана на сервлетах с сервером и вебсокетами Jetty. Вторую часть, в которой и возникла проблема, написал уже с использованием фреймворка Spring. Суть проблемы заключается в том, что клиент не устанавливает соединение по ВС с сервером. К сожалению, пока что поиск ошибки и чтение интернета не принесло результата. Возможно, ошибка где-то на поверхности, а отсутствие опыта не позволяет ее обнаружить. Сразу благодарю Вас за потраченное время и возможный ответ по этой теме.

UDP 19:38
Поправил подключение по WS, однако возникла проблема с доставкой сообщения клиенту -- нет отображения в нужном блоке. Сообщение отправляется 100% - есть отображение в консоли приложения, но не возвращается (или не отображается) у клиентов...

Файл index.jsp:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<!DOCTYPE HTML>
<html>
<head>
  <title>Главная</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <link rel="stylesheet" type="text/css" href="${contextPath}/resources/css/style.css">

    <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/chating', function(message){
                    showGreeting(JSON.parse(chating.body).content);
                });
            });
        }
        function disconnect() {
            stompClient.disconnect();
            setConnected(false);
            console.log("Disconnected");
        }
        function sendMessage() {
            var message = document.getElementById('message').value;
            stompClient.send("/app/chat", {}, JSON.stringify(message));
        }
        function showMessage(message) {
            var resp = document.getElementById('messages');
            resp.value = resp.value + message.data + "\n";
        }
    </script>

</head>
<body>
<div class="center">
<div>
  <sec:authorize access="!isAuthenticated()">
    <a href="/login"><button>Войти</button></a>
    <a href="/registration"><button>Зарегистрироваться</button></a>
  </sec:authorize>
  <sec:authorize access="isAuthenticated()">
     <p>Привет, <b>${pageContext.request.userPrincipal.name}</b>!</p>
     <a href="/logout"><button>Выйти</button></a>
     <button id="connect" onclick="connect();">Соединение</button>
  </sec:authorize>
</div>
<div id="chatbox">
        <textarea id="messages" rows="20" cols="50" readonly="readonly"></textarea>
</div>
<sec:authorize access="isAuthenticated()">
    <form name="message" action="">
        <input name="usermsg" type="text" id="message" size="40"/>
        <input type="button" name="submitmsg" value="Send..." onclick="sendMessage();"/>
    </form>
</sec:authorize>
</div>
</body>
</html>


Контроллер:
package avi.com.vk.controller;


import avi.com.vk.Message;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class MessageController {

    @MessageMapping("/chat")
    @SendTo("topic/chating")
    public Message message(String message) {
        return new Message(message);
    }
}


Класс конфигурации:
package avi.com.vk.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

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

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

}

Ссылка на весь репозиторий:
https://github.com/memoryx3/ChatWS
  • Вопрос задан
  • 519 просмотров
Пригласить эксперта
Ответы на вопрос 1
avi_sdk
@avi_sdk Автор вопроса
pseudoweber
Соединение поправил, все работает. Потерял нужные JS в виде:
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

Подключение подтверждается в консоли приложения. Также, есть возможность отправки сообщений (они выводятся в консоли). Однако есть проблема с их отображением на стороне клиента...Обновил вопрос.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы