Question

Hello stackoverflow社区，我正在学习如何将Pusher API http://pusher.com实现到这个简单的Web聊天应用程序中。我正在关注视频教程并正确地完成每一步，但是当我尝试发送一个消息时，它将在我的Web浏览器上正确显示，但不会在其他Web浏览器上显示或刷新。我将添加我的2个php文件，它们很短。

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Pusher Messenger</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <script src="https://js.pusher.com/3.1/pusher.min.js"></script>
        <script>

        // Enable pusher logging - don't include this in production
        //Pusher.logToConsole = true;

        var pusher = new Pusher('your pusher key here', {
          encrypted: true
        });

        var channel = pusher.subscribe('channel_pusher');
        channel.bind('new_message', function(response){
          $('#sent_messages').append('<li>' + response.message + '</li>');
        });

        $(function(){
            $('form').submit(function(){
                $.post('ajax.php', { msj : $('#input_mensaje').val() }, function(response){
                    //funcion de callback
                    $('#sent_messages').append('<li>' + response.message + '</li>');
                }, 'json');

                return false;
            });
        });
        </script>
    </head>
    <body>
        <form action="" methor="post">
            <input type="text" id="input_mensaje" />
            <input type="submit" class="submit" value="Send" />
        </form>

        <ul id="sent_messages">
            <!-- Sent messages will be shown here -->
        </ul>
    </body>
    </html>

这是我的ajax.php文件：

<?php
    require('lib/Pusher.php');

    $options = array(
        'encrypted' => true
    );

    $message = $_POST['msj'];

    $pusher = new Pusher(
        'code provided by pusher',
        'code provided by pusher',
        'code provided by pusher',
        $options
      );

    $pusher->trigger(
        'channel_pusher',
        'new_message',
        array('message' => $message)
    );

    echo json_encode(array('message' => $message));
?>

Answer 1

我刚刚使用自己的应用密钥测试了您的代码，似乎工作正常。但是，我注意到，当你在引用的ajax.php中包含你的app密钥和秘密时（通常应该避免），你的HTML只包含

var pusher = new Pusher('your pusher key here',

请务必在两个文件中提供应用密钥，以便两者都可以与Pusher实际通信。

另外需要注意的是，您的ajax.php当前将从页面提交的消息传递给Pusher，并返回到页面本身。这样做的结果是提交消息的页面实际上会将其附加两次，一次是从ajax.php返回的响应，一次是从Pusher接收到new_message事件。这可能是您想到的也可能不是。

将Pusher集成到一个简单的php web应用程序中

1 个答案: