Making xampp and node(socket.io) work together

Question

I have a little web app which applies some AngularJS and php for some functions and some queries from the database(xampp's Apache and mySQL). Now I want to apply to a simple chat in the web app and I do not know how to configure nor what ports and so on.

Following something similar to http://socket.io/get-started/chat/

I have index.js as such

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

app.get('/', function(req, res){
   res.sendFile(__dirname + '/index.html');

});

io.on('connection', function(socket){
   console.log('a user connected');
   socket.on('disconnect', function(){
   console.log('user disconnected');
   });
});


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

I am trying port 443 and 80, but they doesnt seem to work (xampp shows 80 and 443, no idea how ports work)

my JS file then has var socket = io();

In my browser console , I'm getting something like

socket.io-1.2.0.js:2 GET http://localhost/socket.io/?IO=3&transport=polling&t=1465649664392-0 404 (Not Found)

How do I resolve this problem? I am expecting output such as a user connected in the cmd after running node index.js but I do not.

I followed the example for the chat, and it works fine without xampp.

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Your problem is that for socket.io to work it needs to be able to communicate with the back end over http (e.g. to switch the protocol). But if xampp is using the port it won't work. You could probably try something where your xampp forwards requests to http://localhost/socket.io/* to the node.js server.

You can use the ProxyPass directive in the Apache httpd.conf and do something like

RewriteEngine On
RewriteCond %{REQUEST_URI}  ^/socket.io            [NC]
RewriteCond %{QUERY_STRING} transport=websocket    [NC]
RewriteRule /(.*)           ws://localhost:8000/$1 [P,L]

ProxyPass        /socket.io http://localhost:8000/socket.io
ProxyPassReverse /socket.io http://localhost:8000/socket.io

Also make sure that the required modules are enabled

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so

Then you'd have to start the node.js server on port 8000

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

edited May 23 '17 at 11:52

Community

1
1

answered Jun 11 '16 at 13:22

Till Arnold

561
2
11

Do I just put the directive anywhere in the config file? and do I access xampp normally such as `localhost/foldername` ? – Lester Jun 11 '16 at 13:29
You do everything normally. You add the directive anywhere in the `httpd.conf`. I added it at the end of the file. – Till Arnold Jun 11 '16 at 15:57
Can I have your example? I did everything you said and nothing changed ( I probably lack the knowledge around these stuff) – Lester Jun 12 '16 at 03:38
My `apache/conf/httpd.conf` is http://pastebin.com/ruihe9GR. You probably can't coppy the entire file because of the absolute paths in there. My `main.js` file is this http://pastebin.com/CTfgNJmS. I run it with `node main.js`. My `index.php` file is http://pastebin.com/YWh7haPF. I have this file in `htdocs/php-test/index.php`. I access the example in my browser under `http://localhost/php-test/`. I'm using the windows version of xampp under windows 10. Oh and you need to restart apache after changing `httpd.conf` – Till Arnold Jun 12 '16 at 09:47

Ishak Ali · Answer 2 · 2016-12-07T07:59:37.523

0

You can simply do this and no need for any http redirects open your client side js

var configUrl = 'http://localhost:3000';// currently my node js using this port
var socket = io(configUrl);

and remaining things works smoothly in your client side

socket.emit('chatMessage', ...
socket.on('chatMessage', ..

edited Dec 07 '16 at 07:59

answered Dec 07 '16 at 07:50

Ishak Ali

340
4
10

Parag Jain · Answer 3 · 2021-07-13T13:39:46.123

We can use scoket.io client library, so we can use JavaScript as client and node.js as server.

Please checkout below example:

index.html(client)

<!DOCTYPE html>
<html>
<head>
  <title>Hello world</title>
  <script src="https://cdn.socket.io/4.0.1/socket.io.js"></script>
</head>
<body>
  <script>
    var socket = io('http://localhost:5000');
  </script>
</body>
</html>

app.js (Node.js server)

var io=require('socket.io')(5000,{
  cors:{
    origin: "http://localhost",
  },
});


//Whenever someone connects this gets executed
io.on('connection',socket => {
 console.log('A user connected');
});

Making xampp and node(socket.io) work together

3 Answers3