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'
}

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

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.')
    }
});

棘轮-如何在点击时发送消息

1 个答案: