php - Ratchet - 我如何在点击时发送消息

Question

最近一直在学习如何使用 Ratchet 在 PHP 中实现 websockets，但我不知道如何让它与按钮点击一起工作。

这是我当前的 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'
}

并使用它来获取发送消息的用户？

Answer 1

问题是您正在定义 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.')
    }
});