Храповик - как отправить сообщение по клику - PullRequest
Новая
       9

Храповик - как отправить сообщение по клику

0 голосов
/ 06 сентября 2018

Недавно я изучал, как реализовать веб-сокеты в PHP с использованием Ratchet, но я не могу понять, как заставить его работать с нажатиями кнопок.

Вот мой текущий код JS / jQuery:

    jQuery(document).ready(function($)
    {
        let conn;

        $('#join-chat').on('click', function()
        {
            let userName = $('#name').val();
            conn = new WebSocket('ws://localhost:8080');

            $('#chat-room').removeClass('hidden');
            $('#enter-name').addClass('hidden');

            connect();

            $('#send-msg').attr('data-user', userName);
            $('.page-header h1').append(' '+ userName)
        });

        $('#disconnect').on('click', function()
        {
            $('#chat-room').addClass('hidden');
            $('#enter-name').removeClass('hidden');

            conn.close();
            alert('Bye Bye Bud')
        });

        $('#send-msg').on('click', function()
        {
            let msg = $('#msg').val();
            sendMsg(msg, conn)
        });

        function sendMsg(msg, conn)
        {
            conn.onmessage = function(e)
            {
                $('#chat-history').append(buildHtml(e))
            };

            conn.send(msg)
        }

        function buildHtml(data)
        {
            let html = '';

            html += '<div class="row">';
            html += '    <div class="col-sm-2">';
            html += '        '+ data.user +' ('+ new Date(data.timeStamp*1000) +'): ';
            html += '    </div>';
            html += '    <div class="col-sm-5">';
            html +=          data.data;
            html += '    </div>';
            html += '</div>';

            return html
        }

        function connect()
        {
            alert('welcome, to the room of chat.')
        }
    });

Работает со второго раза.При первом нажатии кнопки ничего не происходит - второй щелчок (и каждый последующий щелчок) работает.

Что мой код делает неправильно?

Дополнительный вопрос: может ли conn.send принимать массивы?Если бы я хотел сделать: 

var msg = {
    msg: 'user inputted msg',
    user: 'user who sent data'
}

и использовать это, чтобы получить пользователя, который отправил сообщение?

1 Ответ

0 голосов
/ 06 сентября 2018

Проблема в том, что вы определяете обработчик conn.onmessage при нажатии кнопки.Поместите его вне функции или после подключения WS, и оно должно работать.На самом деле сообщение отправляется, но вы просто не получаете его обратно, так как с новым сообщением ничего не поделаешь.

Что касается побочного вопроса, вы можете сериализовать его как JSON и декодировать на стороне сервера. 

jQuery(document).ready(function($)
{
    let conn;

    $('#join-chat').on('click', function()
    {
        let userName = $('#name').val();
        conn = new WebSocket('ws://localhost:8080');
        conn.onmessage = function(e)
        {
            $('#chat-history').append(buildHtml(e))
        };
        $('#chat-room').removeClass('hidden');
        $('#enter-name').addClass('hidden');

        connect();

        $('#send-msg').attr('data-user', userName);
        $('.page-header h1').append(' '+ userName)
    });

    $('#disconnect').on('click', function()
    {
        $('#chat-room').addClass('hidden');
        $('#enter-name').removeClass('hidden');

        conn.close();
        alert('Bye Bye Bud')
    });

    $('#send-msg').on('click', function()
    {
        let msg = $('#msg').val();
        sendMsg(msg, conn)
    });

    function sendMsg(msg, conn)
    {
        conn.send(msg)
    }

    function buildHtml(data)
    {
        let html = '';

        html += '<div class="row">';
        html += '    <div class="col-sm-2">';
        html += '        '+ data.user +' ('+ new Date(data.timeStamp*1000) +'): ';
        html += '    </div>';
        html += '    <div class="col-sm-5">';
        html +=          data.data;
        html += '    </div>';
        html += '</div>';

        return html
    }

    function connect()
    {
        alert('welcome, to the room of chat.')
    }
});
...