src/main/resources/static/index.html - master - zark/WebSocketChat

src/main/resources/static/index.html
62 строки2 KB
Zark94
first_commit
18 окт 2024, 14:57
18 окт 2024, 14:5742c483f
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script>
        var stompClient = null;

        function connect() {
          var sock = new SockJS('http://localhost:8080/ws');
          stompClient = Stomp.over(sock);

          stompClient.connect({}, onConnected, onError);
        }

        function onConnected() {
          console.log('Connected to the STOMP server');
          stompClient.subscribe('/user/' + 'test'  + '/chat/messages', onMessageReceived);
        }

        function onMessageReceived(payload) {
          console.log('Received: ' + payload.body);
          var messagesDiv = document.getElementById('messages');
          var messageList = document.createElement('ul');
          var messageItem = document.createElement('li');
          messageItem.textContent = payload.body;
          messageList.appendChild(messageItem);
          messagesDiv.appendChild(messageList);
        }

        function onError(error) {
          console.log('STOMP connection error: ', error);
        }

        function sendMessage(msg) {
          if (msg.trim() !== "") {
            const message = {
              senderId: 'currentUser.id',
              text: msg,
              senderId: '1',
              roomId: '1',
              timestamp: new Date(),
            };

            stompClient.send('/app/chat', {}, JSON.stringify(message));
          }
        }
    </script>
</head>
<body>
<h1>WebSocket Chat</h1>
<form onsubmit="event.preventDefault(); sendMessage(this.message.value); this.message.value = '';">
    <input type="text" id="messageInput" name="message" />
    <button type="submit">Send</button>
</form>
<div id="messages"></div>
<script>
    connect();
</script>
</body>
</html>