nodeJS and PHP (Laravel) integration for Socket.IO live chat
Currently I have a website which I wrote on PHP via the Laravel framework. I have wrote a live chat using nodeJS with Socket.IO and Express and now what I want to do is to integrate it inside my already written Laravel website. The problem is the chat must be in the main page, which is currently rendered by the views of Laravel. Currently I am on a shared hosting.
The question: What are your best suggestions for such integration? I know that the LAMP stack comes ready in most shared domains but I have completely no idea how I am to get PHP(Laravel) and my nodeJS chat to work together.
Things I have tried:
- Elephant.IO - Didn't have any big success with it yet...
Answer
the solution is simple (but finding ANYTHING about it on the internet was not). You just need to include your socket.io JS file in the HTML view of PHP, then the socket.io JS files makes a connection to your node.JS server. This works all fine on localhost. However, if someone else tries to log into your chat from outside, they will experience a "Forbidden crossdomain request" error, which is because you have probably followed some "guide" like me and your socket.io connection in the CLIENT is like that:
var socket = io.connect('localhost:8080');
instead of
var baseURL = getBaseURL(); // Call function to determine it
var socketIOPort = 8080;
var socketIOLocation = baseURL + socketIOPort; // Build Socket.IO location
var socket = io.connect(socketIOLocation);
// Build the user-specific path to the socket.io server, so it works both on 'localhost' and a 'real domain'
function getBaseURL()
{
baseURL = location.protocol + "//" + location.hostname + ":" + location.port;
return baseURL;
}
The PHP client code is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- Wrapper-->
<div id="wrapper">
<!-- Chat: Input -->
<div id="chat-input">
<!-- Username -->
<div class="username">
<p id="username">John Doe</p>
</div>
<!-- Form -->
<form action="">
<!-- Input field -->
<input type="text" class="chat_input-message" id="message" placeholder="Enter your message..." autocomplete="off" autofocus="on" />
<!-- Button -->
<button>Send</button>
</form>
<!-- END: Form -->
</div>
<!-- END Chat: Input -->
<div id="chat-output">
<div id="messages"></div>
</div>
</div>
<!-- END: Wrapper -->
<!-- Scripts -->
<!-- Socket.IO -->
<script src="../node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js"></script>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Chat -->
<script src="../public/js/chat.js"></script>
<!-- End: Scripts -->
</body>
</html>
The server-side node.JS code does not need any tweaks, forget everything about Redis or in PHP (Elephant.IO, AJAX random injects, forget about any hacks). It simply works as a magic.