Elephant.io
Component ID
Component name
Component type
Maintenance status
Development status
Component security advisory coverage
Component created
Component changed
Component body
What is elephant.io?
Elephant.io provides a socket.io client fully written in PHP that should be usable everywhere in your project.
It is a light and easy to use library that aims to bring some real-time functionality to a PHP application through socket.io and websockets.
For elephant.io magic to operate, the following dependencies must be fulfilled:
- Socket.IO 0.8+
- PHP 5.3+
- NodeJS 0.6.5+
Example usage(Try out the demo)
In our case we have a Drupal site and one different site for example a simple .html site(it can be Drupal site as well)
The users are connected to this html site and listening to the changes from the Drupal site. From the Drupal site you want to notify the connected users if something happens on the Drupal backend. It can be basically everything (node update, order status change, content insert). When something occurs on the php side, you can simply notify the users on the html site with few lines of php code.
0, http://37.9.171.77:4000 --> change to the url where your socket is running
1, Install the module -> it will enable the Elephant IO library (you need to download the library and place it to sites/all/libraries/elephant.io folder
2, You need to have node and socket.io up and running
3, Then you can create a simple socket.js file:
var io = require('socket.io').listen(4000);
io.sockets.on('connection', function (socket) {
socket.on('clientMessage', function(content, name) {
socket.broadcast.emit('serverMessage', name + ' said: ' + content);
});
});This will show the already updated or inserted node from Drupal site
4, Make a simple html page:
<html>
<head>
<title>Node.js WebSocket realtime insert / update notifications from Drupal site</title>
<style type="text/css">
#name-desc {
padding-top: 30px;
width: 600px;
}
#name {
width: 400px;
}
#title {
width: 300px;
}
#messages {
position: fixed;
top: 150px;
bottom: 8px;
left: 8px;
right: 8px;
border: 2px solid #EEEEEE;
padding: 8px;
}
</style>
</head>
<body>
<div id="name"><b>Realtime site notifications from Drupal backend</b></div>
<div id="name-desc">Try update or insert content here: <a href="http://elephant_io.opencommerce.eu" target="_blank">Elephant IO drupal backend</a> and check how this page will be updated realtime with node.js and sockets. Try opening the html site in more browsers and all browsers should be updated automatically, when Drupal content gets updated / inserted!</div>
<div id="messages"></div>
<script src="http://37.9.171.77:4000/socket.io/socket.io.js"></script>
<script type="text/javascript">
var messagesElement = document.getElementById('messages');
var lastMessageElement = null;
function addMessage(message) {
var newMessageElement = document.createElement('div');
var newMessageText = document.createTextNode(message);
newMessageElement.appendChild(newMessageText);
messagesElement.insertBefore(newMessageElement, lastMessageElement);
lastMessageElement = newMessageElement;
}
var socket = io.connect('http://37.9.171.77:4000');
socket.on('serverMessage', function(content) {
addMessage(content);
});
</script>
</body>
</html>
This will listen to the changes, then append them to our div. (simple)
5, Check the example_elephant_io.module how the node insert / update fires the socket.emit -> basically it's simple as:
$elephant = new ElephantIOClient($url, 'socket.io', 1, false, true, true);
$elephant->init();
$elephant->send(
ElephantIOClient::TYPE_EVENT,
null,
null,
json_encode(array('name' => 'clientMessage', 'args' => array($entity->title . t(' inserted!'), $user->name)))
);
$elephant->close();6, Create your own module, use the library and enjoy!
Please mind this module is for developer use only, after installing the module you need to implement your own code to see some real results.
For more information, click here: Elephant.io library for php realtime actions