Websockets PHP / AJAX / Javascript刷新客戶端

Question

我正在使用帶有PHP和一些Javascript的websockets。 我將數據庫中的一些信息顯示給我的客戶端。 我的目標是在信息插入我的數據庫時刷新客戶端。 要在我的數據庫中插入一些數據，我從我的PC發送一個帖子請求。

此刻，我可以刷新客戶端每10秒調用一次函數。 但是，只有在該頁面上發送POST請求時，我才想刷新。

這可以幫助您理解：

1. 客戶端連接到網頁。
2. SQL select在我的數據庫上執行
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 select請求（工作正常）

• server.php ：服務器端的代碼在哪里。 （工作正常）

好。 我真的不知道怎么能實現這個目標。 如何通知並調用displayInfo（r）函數; 如果POST請求發送到此頁面。

任何幫助都很貼切。 先感謝您。

此致，Lapinou。

Answer 1

我已經從您提供的鏈接中看到了server.php ，它只是：

1. 接受傳入的連接
2. 循環通過所有連接的套接字
3. 如果這些套接字中的任何一個具有數據，則它會回復每個其他客戶端。

您需要更改此循環並為消息添加其他來源，並且您有2個選項。 您可以池化數據庫或打開另一個TCP套接字並從那里讀取。

但是，最好的解決方案是將NodeJS與Socket.io和DNode一起使用（非常優雅的解決方案，跨瀏覽器工作並不困難），但您需要能夠在服務器上安裝NodeJS。 如果你願意，我可以提供樣品。

---

編輯 ：這是我的方式。

我假設您熟悉基於Debian的發行版（我將使用APT安裝內容）。 首先我會解釋一些事情：

• NodeJS是一個服務器端的JavaScript解釋器，它將運行我們的套接字部分。 實際上，我們將同時使用PHP和NodeJS（后者僅用於更新客戶端，因此您現有的代碼不會有太大變化）
• NPM是一個命令行實用程序（隨NodeJS一起提供）。 它的主要用途是安裝包（Socket.io和DNode是NPM包）
• Socket.io是WebSockets的包裝器，使其可以跨瀏覽器工作。 它還包含服務器端處理功能
• DNode是用於與其他語言/服務器通信的RPC（在本例中，使用我們的PHP腳本）

首先我們安裝NodeJS。 Ubuntu repo的版本很舊，所以我們從這里添加一個PPA：

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

這將安裝NodeJS和NPM。 更多信息在這里 。

現在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。 你可以在這里找到它，它的用法非常簡單：

 $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，它將向連接的客戶端廣播所有內容。

希望這可以幫助！