javascript - Websockets PHP/AJAX/Javascript 刷新客户端

Question

我正在使用带有 PHP 和一些 Javascript 的 websockets。我从我的数据库向我的客户显示一些信息。我的目标是在信息插入我的数据库时刷新客户端。为了在我的数据库中插入一些数据，我从我的 PC 发送了一个发布请求。

目前，我可以刷新客户端以每 10 秒调用一个函数。但我只想在该页面上发送 POST 请求时刷新。

这里有一些可以帮助你理解的东西:

1. 客户端正在连接到网页。
2. 在我的数据库上执行 SQL 选择
3. 结果被接收并显示在网页上。
4. 客户端已连接(通过 websockets)并查看来自数据库的信息。
5. 我。如果我在数据库中插入信息，我会发送一个 POST 请求(不是来自 HTML 表单，没有提交，只是一个 POST 请求，就像我使用 Postman 测试 Web 服务一样)。发送请求后，通过调用 Javascript 函数刷新客户端...

这是我所做的:

• index.php(显示信息的页面)

  $(document).ready(function(){
  
      //create a new WebSocket object.
      var wsUri = "ws://localhost:9000/server.php";
      websocket = new WebSocket(wsUri);
  
      websocket.onopen = function(ev) { // connection is open
          $('#message_box').append("<div class=\"system_msg\">Connected!</div>"); //notify user
      }
  
      // Call this function every 10 sec to refresh the client
      window.setInterval(function(){
          displayInfo(1);
      }, 10000);
  
      websocket.onmessage = function(ev) {
          var msg = JSON.parse(ev.data); //PHP sends Json data
          $("#infos").html(msg.message);
      };
  
      websocket.onerror   = function(ev){$('#message_box').append("<div class=\"system_error\">Error Occurred - "+ev.data+"</div>");};
      websocket.onclose   = function(ev){$('#message_box').append("<div class=\"system_msg\">Connection Closed</div>");};
  });
  
  function displayInfo(r) {
  
      $.post("infos.php",
          { refresh : r},
          function(data){
  
              var msg = {
                  message: data
              };
  
              //convert and send data to server
              websocket.send(JSON.stringify(msg));
          }
      );
  }
  

• infos.php:我在其中执行 SQL 选择请求(工作正常)

• server.php :服务器端代码所在的位置。 (工作正常)

嗯。我真的不知道我怎样才能做到这一点。如何通知和调用函数displayInfo(r)；如果 POST 请求发送到此页面。

非常感谢任何帮助。提前谢谢你。

问候，拉皮努。

Answer 1

我从您提供的链接中看到了 server.php，它只是:

1. 接受传入连接
2. 遍历所有连接的套接字
3. 如果这些套接字中的任何一个有数据，它就会回复所有其他客户端。

你需要改变这个循环并添加另一个消息源，你有两个选择。您可以汇集一个数据库或打开另一个 TCP 套接字并从那里读取。

但是，最好的解决方案是将 NodeJS 与 Socket.io 和 DNode 一起使用(非常优雅的解决方案，可以跨浏览器工作并且并不难)，但是您需要能够在您的服务器上安装 NodeJS。如果你想要，我可以提供 sample 。

---

编辑:这是我的做法。

我假设您熟悉基于 Debian 的发行版(我将使用 APT 安装)。首先我要解释一些事情:

• NodeJS 是将运行我们的套接字部分的服务器端 javascript 解释器。事实上，我们将同时使用 PHP 和 NodeJS(后者仅用于更新客户端，因此您现有的代码不会有太大变化)
• NPM 是一个命令行实用程序(NodeJS 附带)。它的主要目的是安装包(Socket.io 和 DNode 是 NPM 包)
• Socket.io 是 WebSockets 的包装器，使其可以跨浏览器工作。它还包含服务器端处理功能
• DNode 是用于与其他语言/服务器(在本例中为我们的 PHP 脚本)通信的 RPC

首先我们安装 NodeJS。 Ubuntu repo 上的版本非常旧，所以我们从 here 添加一个 PPA :

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install node

这将安装 NodeJS 和 NPM。更多信息 here .

现在 cd 进入您的工作目录并创建此文件:server.js

//import libraries
var io = require('socket.io');
var dnode = require('dnode');

var clients = []; //this array will hold all connected clients

var srv = io.listen(8080, { log: false }); //this port must be different from apache
srv.sockets.on('connection', function(socket){
    console.log("Client connected.");
    clients.push(socket);

    //this will be called when a javascript client sends us something. you can delete this if you don't need it
    socket.on('message', function(data){
        console.log(data); 
    });

    socket.on('disconnect', function(){
        console.log("Lost client.");
        var i = clients.indexOf(socket);
        clients.splice(i, 1); //remove from array
    });
});

var dnode_server = dnode({
    //expose a "send" function
    send: function(data, cb){
        for(i = 0; i < clients.length; i++){
            clients[i].emit('update', { //send an "update" message to all connected clients
                title: data.title, //some data
                text: data.text
            });
        }
        cb(null, false); //inform PHP that the processing is done. You can also return something
    }
    //you can have multiple functions here
});
dnode_server.listen(5004); //this port should not be accessible from the ouside

接下来，安装所需的库:

npm install socket.io
npm install dnode

您可以使用 node server.js 运行此脚本

现在我们需要编辑客户端 javascript。使用这个导入 Socket.io:

<script type="text/javascript" src="http://YOURHOSTNAME:SOCKETIOPORT/socket.io/socket.io.js"></script>

然后像这样使用它:

socket = io.connect('http://YOURHOSTNAME:SOCKETIOPORT');
socket.on('connect', function(data){
    alert('Connected!');
});
socket.on('disconnect', function(){
    alert('Disconnected :( are you offline?');
});
socket.on('update', function(data){ //our function call
    alert(data.title + " " + data.text);
});

您可以像在 NodeJS 上一样将数据发送到服务器:

socket.emit('message', {foo: 'bar'});

最后，您希望通过 PHP 脚本在所有连接的客户端上触发“更新”。为此，我们需要一个 PHP 库来连接 DNode。你可以找到它here它的用法非常简单:

$dnode = new \DnodeSyncClient\Dnode();
$connection = $dnode->connect('localhost', 5004);
$connection->call('send', array(array(
    'title' => "My awesome title",
    'text' => "My awesome text"
)));

调用此 PHP 脚本会将标题和文本发送到您的 server.js，它将向您连接的客户端广播所有内容。

希望这对您有所帮助!