PHP-2个浏览器PHP上的Submit按钮和Modal Pop-up AJAX

Question

我是php AJAX编码的新手，我的问题是我有两个浏览器，首先是我想单击“提交”按钮，然后要在其他浏览器上弹出一个模式，因此最终输出将是2个浏览器。 就像聊天系统一样。 但这是不同的，因为我只想要一个按钮和一个弹出模式。

例如，这是我的按钮

<button type="button" class="btn btn-primary">CLICK TO POPUP</button>

我的模态

 <div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我如何将此模式弹出到其他本地浏览器

Answer 1

与php socket并发快照，您可以在所有打开的窗口中运行结果。

PHP套接字

的WebSocket

Answer 2

首先，我们在php文件中编写侦听器。 然后编写一个javascript程序，使监听器可以点击并获取反馈。 我正在发送与我们使用javascript连接的套接字e'getOpenPopUp'消息。 php端的套接字在验证之后将openPopUp消息发送给所有客户端。 在javascript端弹出窗口中会收到此消息。 我的英语一点也不好。 对不起，我不知道。

socket.php Ratchet Class 棘轮

<?php
    require __DIR__.'/vendor/autoload.php';

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;


use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;


class Application implements MessageComponentInterface {
    protected $clients;

    public function __construct() {
        $this->clients = new \SplObjectStorage;
    }


    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        if ( $msg === 'getOpenPopUp' ) {
            foreach ($this->clients as $client) {
                $client->send('openPopUp');
            }
        }
    }

    public function onClose(ConnectionInterface $conn) {

    }

    public function onError(ConnectionInterface $conn, \Exception $e) {

    }
}


$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new Application()
        )
    ),
    8080
);

$server->run();

App.js - WebSocket MDN编写WebSocket客户端应用程序

var socket = new WebSocket('ws://localhost:8080');
var button = document.getElementById('button');


button.addEventListener('click', function() {
    console.log('click')
    socket.send('getOpenPopUp');
});


socket.onmessage = function(e) {
    console.log(e)
    if ( e.data === 'openPopUp' ) {
        UIkit.modal.confirm('UIkit confirm!');
    }
}

Answer 3

ajax还控制着一种更简单的方法，该方法每秒将操作记录在数据库中一次，如果需要在popUp中显示，则popup会与来自ajax的数据一起显示。

但不是强烈推荐的方法

点击按钮

$.ajax({ url: "saveClickButton.php" })

setTimeout(function() {
    $.ajax({ url: 'isClickButton' }).done(function(data) {
      if ( data === "true" ) {
          // Open Pop Up
      }
    });
}, 1000)