簡體   English   中英

如何集成nodeJS + Socket.IO和PHP?

[英]How to integrate nodeJS + Socket.IO and PHP?

我最近一直在尋找,找到一個在nodeJS和PHP之間進行通信的好方法。 這是一個想法:nodeJS仍然很新,只用它來開發一個完整的應用程序可能有點棘手。 此外,您可能只需要項目的一個模塊,如實時通知,聊天,......您希望使用PHP管理所有其他內容,因為它可能對您來說更容易(並且您可以利用現有的框架,如CodeIgniter或Symfony)。

我想有一個簡單的解決方案; 我不想使用cURL或第三台服務器在Apache和Node服務器之間進行通信。 我想要的是能夠在簡單的Javascript,客戶端從節點捕獲事件。

我找不到任何完整的答案,大部分時間客戶端都是由節點服務器運行的,因此在我的情況下不適用。 所以我抓住了所有可能的主題,最后找到了答案; 我會嘗試分享這一點,並指出一點都清楚。

希望這可以幫助一些人! ;)

所以,首先,如果你想訪問完整的代碼,我把我的項目放在github上: https//github.com/jdutheil/nodePHP

這是一個非常簡單的示例項目:網絡聊天。 您只需要一個作者和消息,當您按下send時,它將保存在mysql數據庫中。 這個想法是發送實時更新,並進行真正的對話。 ;)我們將使用nodeJS。

我不會談論PHP代碼,它在這里非常簡單而且沒有意義; 我想告訴你的是如何集成你的nodeJS代碼。

我使用express和Socket.IO,所以一定要用npm安裝這些模塊。 然后,我們創建一個簡單的nodeJS服務器:

var socket = require( 'socket.io' );
var express = require( 'express' );
var http = require( 'http' );

var app = express();
var server = http.createServer( app );

var io = socket.listen( server );

io.sockets.on( 'connection', function( client ) {
    console.log( "New client !" );

    client.on( 'message', function( data ) {
        console.log( 'Message received ' + data.name + ":" + data.message );

        io.sockets.emit( 'message', { name: data.name, message: data.message } );
    });
});

server.listen( 8080 );

我們在連接新用戶時注冊了我們的事件回調; 每次我們收到消息(代表聊天消息)時,我們都會將其廣播給每個連接的用戶。 現在,棘手的部分:客戶端! 這個部分占用了我的大部分時間,因為我不知道哪個腳本包含能夠在沒有nodeServer的情況下運行Socket.IO代碼(因為客戶端頁面將由Apache提供)。

但一切都已經完成; 當您使用npm安裝Socket.IO模塊時,可以在/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js找到一個腳本; 在我的情況下,我們將在PHP頁面中包含的腳本:

    <script src="js/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js"></script>
    <script src="js/nodeClient.js"></script>

並完成我的nodeClient.js,我們只需連接到節點服務器並等待事件更新我們的頁面。 ;)

var socket = io.connect( 'http://localhost:8080' );

$( "#messageForm" ).submit( function() {
    var nameVal = $( "#nameInput" ).val();
    var msg = $( "#messageInput" ).val();

    socket.emit( 'message', { name: nameVal, message: msg } );

    // Ajax call for saving datas
    $.ajax({
        url: "./ajax/insertNewMessage.php",
        type: "POST",
        data: { name: nameVal, message: msg },
        success: function(data) {

        }
    });

    return false;
});

socket.on( 'message', function( data ) {
    var actualContent = $( "#messages" ).html();
    var newMsgContent = '<li> <strong>' + data.name + '</strong> : ' + data.message + '</li>';
    var content = newMsgContent + actualContent;

    $( "#messages" ).html( content );
});

我會盡快更新和改進我的代碼,但我認為它已經開放給所有很酷的東西! 我非常樂意接受這方面的建議和評論,是不是這樣做的好方法,...?

希望這可以幫助一些人!

我有另一種解決方案對我很有效,但我希望有人評論它的效果,因為我還沒有機會/時間在真實服務器上測試它。

這是node-js代碼。 我把這段代碼放在一個名為nodeserver.js的文件中:

var http = require('http');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});

    var knall = new Object();
    knall.totten = "4 tomtar";
    knall.theArr = new Array();
    knall.theArr.push("hoppla")
    knall.theArr.push("hej")
    var strKnall = JSON.stringify(knall);

    res.end(strKnall);
}).listen(process.env.PORT);  

這里是php中的一段簡單代碼,在file_get_contents()的幫助下調用node-js服務器:

$json = file_get_contents('http://localhost:3002/knall.json');
$obj = json_decode($json);

工作得很好,當我加載php頁面時,它又調用nodeserver.js頁面,該頁面對knall-object進行json化。

我在Windows 10上有兩個運行在iis上的localhost安裝,一個標准的php服務器,而nodejs-server使用整齊的iisnode包。

'真正的'服務器在ubuntu上運行。

我認為這是兩個服務器之間通信的簡潔解決方案,但也許有人對此有任何意見?

嘗試類似,或者您可以在我的博客上查看nodejs上的完整示例代碼


在您的頁面上:

  • 加載套接字JS

https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js

  • 制作套接字的對象

var socket = io();

  • 使用emit函數將數據發送到nodeserver。

socket.emit('new_notification',{
消息:'消息',
標題:'標題',
圖標:'icon',
});

所以現在你的代碼看起來像

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>

var socket = io(); 

$(document).ready(function($) {
  $('.rules-table').on('click', '.runRule', function(event) {
    event.preventDefault();
    /* Act on the event */
    var ruleID = $(this).parents('tr').attr('id');

    // send notification before going to post 
    socket.emit('new_notification', {
        message: 'Messge is ready to sent',
        title: title,
        icon: icon,
    });
    $.ajax({
      url: '/ajax/run-rule.php',
      type: 'POST',
      dataType: 'json',
      data: {
        ruleID: ruleID
      },
    })
    .done(function(data) {
      console.log(data);

      // send notification when post success 
      socket.emit('new_notification', {
        message: 'Messge was sent',
        title: title,
        icon: icon,
      });

    })
    .fail(function() {
      console.log("error");

      // send notification when post failed 
      socket.emit('new_notification', {
        message: 'Messge was failed',
        title: title,
        icon: icon,
      });
    })
    .always(function() {
      console.log("complete");
    });

  });
});

現在在節點服務器端為您的請求創建處理程序以獲取您的請求並向所有連接的設備/瀏覽器發送消息(server.js)

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res) {
   res.sendfile('index.html');
});


io.on('connection', function (socket) {
  socket.on( 'new_notification', function( data ) {
    console.log(data.title,data.message);

    // Now Emit this message to all connected devices
    io.sockets.emit( 'show_notification', { 
      title: data.title, 
      message: data.message, 
      icon: data.icon, 
    });
  });
});

http.listen(3000, function() {
   console.log('listening on localhost:3000');
});

現在客戶端/瀏覽器/客戶端使接收器從節點服務器接收套接字消息

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>   

var socket = io();

/**
 * Set Default Socket For Show Notification
 * @param {type} data
 * @returns {undefined}
 */
socket.on('show_notification', function (data) {
    showDesktopNotification(data.title, data.message, data.icon);
});
/**
 * Set Notification Request
 * @type type
 */
function setNotification() {
    showDesktopNotification('Lokesh', 'Desktop Notification..!', '/index.jpeg');
    sendNodeNotification('Lokesh', 'Browser Notification..!', '/index.jpeg');
}
/**
 * Check Browser Notification Permission
 * @type window.Notification|Window.Notification|window.webkitNotification|Window.webkitNotification|Window.mozNotification|window.mozNotification
 */
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
Notification.requestPermission(function (permission) {
});
/**
 * Request Browser Notification Permission 
 * @type Arguments
 */
function requestNotificationPermissions() {
    if (Notification.permission !== 'denied') {
        Notification.requestPermission(function (permission) {
        });
    }
}
/**
 * Show Desktop Notification If Notification Allow
 * @param {type} title
 * @param {type} message
 * @param {type} icon
 * @returns {undefined}
 */
function showDesktopNotification(message, body, icon, sound, timeout) {
    if (!timeout) {
        timeout = 4000;
    }
    requestNotificationPermissions();
    var instance = new Notification(
            message, {
                body: body,
                icon: icon,
                sound: sound
            }
    );
    instance.onclick = function () {
        // Something to do
    };
    instance.onerror = function () {
        // Something to do
    };
    instance.onshow = function () {
        // Something to do
    };
    instance.onclose = function () {
        // Something to do
    };
    if (sound)
    {
        instance.sound;
    }
    setTimeout(instance.close.bind(instance), timeout);
    return false;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM