Question

我正在关注youtube中关于春季聊天应用https://www.youtube.com/watch?v=4Hyv4M1kFeM的指导。我的问题是，当用户离开聊天室时，虽然应该退出，但没有关于他离开的通知。我认为这与.html或.js代码有关，但我不确定。讲师似乎有同样的问题，但他没有在本教程中解决。

main.js：

'use strict';

var usernamePage = document.querySelector('#username-page');
var chatPage = document.querySelector('#chat-page');
var usernameForm = document.querySelector('#usernameForm');
var messageForm = document.querySelector('#messageForm');
var messageInput = document.querySelector('#message');
var messageArea = document.querySelector('#messageArea');
var connectingElement = document.querySelector('.connecting');

var stompClient = null;
var username = null;

var colors = [
'#00004d', '#99cc00', '#00BCD4', '#cc0000',
'#ffc107', '#ff85af', '#FF3300', '#39bbb0',
'#99ffdd', '#5e5eff'
];

function connect(event) {
username = document.querySelector('#name').value.trim();

if(username) {
    usernamePage.classList.add('hidden');
    chatPage.classList.remove('hidden');

    var socket = new SockJS('/java');
    stompClient = Stomp.over(socket);

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


function onConnected() {
// Subscribe to the Public Topic
stompClient.subscribe('/topic/public', onMessageReceived);

// Tell your username to the server
stompClient.send("/app/chat.register",
    {},
    JSON.stringify({sender: username, type: 'JOIN'})
)

connectingElement.classList.add('hidden');
}


function onError(error) {
    connectingElement.textContent = 'Could not connect to WebSocket server. Please refresh this page to try again!';
connectingElement.style.color = 'red';
}


function send(event) {
var messageContent = messageInput.value.trim();

if(messageContent && stompClient) {
    var chatMessage = {
        sender: username,
        content: messageInput.value,
        type: 'CHAT'
    };

    stompClient.send("/app/chat.send", {}, JSON.stringify(chatMessage));
    messageInput.value = '';
}
event.preventDefault();
}


function onMessageReceived(payload) {
var message = JSON.parse(payload.body);

var messageElement = document.createElement('li');

if(message.type === 'JOIN') {
    messageElement.classList.add('event-message');
    message.content = message.sender + ' joined!';
}
if (message.type === 'LEAVE') {
    // den emfanizetai to mhnyma apoxwrhshs
    messageElement.classList.add('event-message');
    message.content = message.sender + ' left!';
} 
else {
    messageElement.classList.add('chat-message');

    var avatarElement = document.createElement('i');
    var avatarText = document.createTextNode(message.sender[0]);
    avatarElement.appendChild(avatarText);
    avatarElement.style['background-color'] = getAvatarColor(message.sender);

    messageElement.appendChild(avatarElement);

    var usernameElement = document.createElement('span');
    var usernameText = document.createTextNode(message.sender);
    usernameElement.appendChild(usernameText);
    messageElement.appendChild(usernameElement);
}

var textElement = document.createElement('p');
var messageText = document.createTextNode(message.content);
textElement.appendChild(messageText);

messageElement.appendChild(textElement);

messageArea.appendChild(messageElement);
messageArea.scrollTop = messageArea.scrollHeight;
}


function getAvatarColor(messageSender) {
var hash = 0;
for (var i = 0; i < messageSender.length; i++) {
    hash = 31 * hash + messageSender.charCodeAt(i);
}

var index = Math.abs(hash % colors.length);
return colors[index];
}

usernameForm.addEventListener('submit', connect, true)
messageForm.addEventListener('submit', send, true)

index.html：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Spring Boot WebSocket Chat Application | CalliCoder</title>
<link rel="stylesheet" href="/css/main.css" />
</head>
<body background="18.jpg"
style="background-position: center; background-repeat: no-repeat; background-size: cover;">
<noscript>
    <h2>Sorry! Your browser doesn't support Javascript</h2>
</noscript>


<div id="username-page">
    <div class="username-page-container">
        <h1 class="title">Type your username</h1>
        <form id="usernameForm" name="usernameForm">
            <div class="form-group">
                <input type="text" id="name" placeholder="Username"
                    autocomplete="off" class="form-control" />
            </div>
            <div class="form-group">
                <button type="submit" class="accent username-submit">Start
                    Chatting</button>
            </div>
        </form>
    </div>
</div>

<div id="chat-page" class="hidden">
    <div class="chat-container">
        <div class="chat-header">

            <h2>JavaTechie Global Chat Box</h2>
        </div>
        <div class="connecting">Connecting...</div>

        <ul id="messageArea">
            <!-- messageArea -->
        </ul>
        <form id="messageForm" name="messageForm" nameForm="messageForm">
            <div class="form-group">
                <div class="input-group clearfix">

                    <input type="text" id="message" placeholder="Type a message..."
                        autocomplete="off" class="form-control" />
                    <button type="submit" class="primary">Send</button>
                </div>
            </div>
        </form>
    </div>
</div>

<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>
<script src="/js/main.js"></script>

这是聊天应用程序的屏幕截图：

我希望该应用显示离开消息“ user1 left！”，因为它显示进入消息“ user1 join！”。任何帮助表示赞赏！

用户离开聊天室后未显示预期的“离开”消息

0 个答案: