Heroku socket.io server runs locally, but not anywhere else - node.js

Basically my socket.io server is only working for.. one computer only, I suppose. It works if I use Chrome, Chrome incognito, Edge. I tried using the app with my phone, while on the same Wifi, and that's where I encountered problems. It looked like socket.io just wouldn't work then. I feel like it's only working for one client (maybe ip, port issues?)
I use socket.io in pair with React js, and oh boy it was pain in the arse to make them work both locally and on Heroku.
Here's my server file /src/server/index.js
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const axios = require("axios");
const port = process.env.PORT || 4001; // Only this port works for some reason
const index = require("./routes/index");
const app = express();
const path = require('path');
const server = http.createServer(app);
const io = socketIo(server); // < Interesting!
io = socketIo.listen(app);
io.configure(function () {
io.set("transports", ["xhr-polling"]);
io.set("polling duration", 10); // Recommended from online guys
});
app.use(express.static(path.join(__dirname, '../../index')));
app.get('/', (req, res, next) =>
res.sendFile(index))
io.on("connection", socket => {
console.log("New client connected");
})
server.listen(port, () => console.log(`Listening on port ${port}`));
I use config file to dynamically change the server and I import it every time I need to connect to my socket via socket.io-client
let server = 'ws://XXXXXXXXXXXXX.herokuapp.com/socket.io/?EIO=4&transport=websocket';
const env = process.env.NODE_ENV;
if (env === 'development') {
server = 'http://127.0.0.1:4001';
}
module.exports = server;
What could be the problem? Why is only working on my root computer? Could be a dyno problem or something else?
I'm a complete beginner with both heroku and socket.io, so any information would be helpful.
**EDIT:
I am not sure, but I feel like a server running in my VS Code made it work in my heroku app. I have turned it off and the server just keeps sending net::ERR_CONNECTION_REFUSED error.

Solution:
Using mars/heroku-cra-node buildpack is a must. It seperates react-ui and server code. Port config: const port = process.env.PORT || 4001,
Client listens for: let server = window.location.hostname
Also good to have a seperate config file for clientside that has the following:
const env = process.env.NODE_ENV;
if (env === 'development') {
server = 'http://localhost:4001';
}
module.exports = server;
Then you won't have to change ports and servers in development (VSCode) or production (Heroku).

Related

localhost:3000 not responding

I've just started learning node.js but when I try to launch the hello world code by writing on the terminal node server.js, localhost:3000 gives me the following error:
This page isn’t working;
localhost didn’t send any data.
ERR_EMPTY_RESPONSE
I've been searching for 2h now and I've found nothing. I've checked the port 3000 in cmd with netstat -a -n -o and it says that the port is listening (so I guess it is working). So what is preventing me from accesing to that port.
Here it my JS files:
server.js:
const http = require('http');
const app = require('./app');
const port = process.env.PORT || 3000;
const server = http.createServer();
server.listen(port);
app.js:
const { request } = require('express');
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.status(200).json({
message: 'It works'
});
})
module.exports = app;
Add the required app to the createServer call:
const server = http.createServer(app);
In this way the http server can route your http requests to it.
Could process.env.PORT be set somewhere, causing your app to be hosted on that port instead?
An easy way to check would be to console.log the PORT variable in your script, and see if it has any value.
If it does have a value, trying going to localhost:PORT

Socket.io is not connecting on Heroku

I am using Socket.io in my NodeJS backend. However, the sockets do not work. For example, one should receive a link and then send them to all other rooms under the same code, but the code is not executing. In my heroku logs I receive no errors but when I inspect element the page I get
polling-xhr.js:268 GET https://localhost:5000/socket.io/?EIO=3&transport=polling&t=NDADDNH net::ERR_CONNECTION_REFUSED
and
Failed to load resource: net::ERR_CONNECTION_REFUSED
I have looked into similar problems from this forum and made several changes but none of them have solved the issue. Also a bunch of the posts answer with solutions for ws in general which I don't understand at all :/
From what I read the issue might be with my ports? I followed a few of them but the same errors still occured.
Socket.io:
/***BACKEND***/
const express = require('express');
const path = require('path');
const app = express();
let rooms = [];
/***SERVER***/
const port = process.env.PORT || 5000;
server = app.listen(port, function(){
console.log('App is listening on port ' + port)
});
/***SOCKET.IO***/
const socket = require('socket.io');
io = socket(server);
io.on('connection', (socket) => {
//bunch of functionality
}
and then in my client I am using
this.socket = io('localhost:5000');
//one of the functions
this.syncQueue = () => {
this.socket.emit('SYNC_QUEUE', {
activeRoom: this.props.getRoom()
});
}
this.socket.on('RECEIVE_QUEUE', newQueue => {
props.onAddToQueue(newQueue);
});
FYI Everything works on localhost
Localhost will not work on the server and if you are using default namespace you no need to specify the URL. So try this, this.socket = io()
On the client side, you're trying to connect to localhost:5000 instead of the URL Heroku provides. Try this this.socket = io('heroku url goes here').

Using sockets with express in production environment(heroku)

While working with localhost I used the following code to implement socket functionality-
Server Side
var express = require('express');
var app = express();
const io = require('socket.io')(5000);
Client Side
<script src="http://localhost:5000/socket.io/socket.io.js"></script>
<script>const socket = io.connect('http://localhost:5000');</script>
The above code worked fine for me locally. Earlier tried use the code given in the official documentation, but it did not work. I got a 404 error when trying to load socket.io.js file and it said 'io is not defined' on the client side. That code is given below-
Server Side
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
Client Side
<script src="/socket.io/socket.io.js"></script>
<script>var socket = io.connect('http://localhost');</script>
Now I need to deploy the app to Heroku and don't know how to do the socket functionality. I tried both the above ways but none worked in Heroku. I am getting '404 error' and 'io is not defined'. The server-side code is written in ./app.js and client-side code written in ./public/index.html.
How do I get this socket functionality to work in Heroku and also why is the official code not even working locally?
Trying to get the same thing working, don't have all the answers but on heroku you need to grab the port from the environment variable.
// Needed for Heroku serving
if (process.env.PORT > 0)
port = process.env.PORT;
else
port = 5000;
// create the express server (app) and the socket io server (io)
const app = express();
const server = app.listen(port, () => {
console.log("Listening on port: " + port);
});
const io = require('socket.io')(server);
Client Side
const socket = socketIOClient('APPNAME.herokuapp.com:80');
socket.emit("MsgType", "Payload")

Socket.io port configuration with Heroku

I'm trying to get socket.io working on my heorku app, but I think I'm having some trouble defining the ports. On the backend I have my express app listening to the process.env port or 5000, and I have my socket.io port listening on 8000.
Node.js
const express = require("express");
const app = express();
const server = require('http').Server(app)
const io = require('socket.io')(server)
const socketPort = 8000;
io.listen(socketPort);
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on port ${port} !`));
And on my front end I have my socket to route requests to localhost:8000
Reactjs
const socket = io('http://localhost:8000')
//Open connection to backend
socket.on('connect', ()=>{
console.log("Connected");
})
It works just fine when I run it locally, but I can't get it working on Heroku - GET http://localhost:8000/socket.io/?EIO=3&transport=polling&t=MszLUDm net::ERR_CONNECTION_REFUSED
Is there a specific way I need to set up these ports? As far as I know I can only set up one process.env port. Should I be subbing something into the "localhost:8000" on the front end?
Thanks!
On the client side I ended up just declaring the socket like this:
const socket = io();
Leaving out the localhost:5000 part altogether.

Socket.io not working on node server

I'm running a server and all it needs to do is connect to a 3rd party public socket.io stream. I have it working in my react app but can't get it to work on my server. I'm using node and express.When I run I get no errors. Here is my code
var express = require("express");
var app = express();
var port = 3000;
var io = require('socket.io-client/dist/socket.io');
var socket = io.connect('http://socket.coincap.io', {transports: ['websocket']});
socket.on('trades', function(tradeMsg) {
console.log("worked");
});
app.listen(port, () => {
console.log("Server listening on port " + port);
});
Just checked my code, I do something like the following which is a bit different than your code. Don't know if it's your solution but maybe that could helps you.
In a separate socket-io.js
module.exports = function (app, server) {
var socketIO = require('socket.io').listen(server, {'transports': ['websocket']});
global.socketIO = socketIO;
socketIO.set('origins', '*:*');
socketIO.sockets.on('trades', function (tradeMsg) {
console.log("worked");
});
};
Then in my www after var server = http.createServer(app); I've got:
require('socket-io')(app, server);
You can try installing socket.io-client using npm.
npm install socket.io-client --save
And try running the following code. It should work fine.
var express = require("express");
var app = express();
var port = 3000;
var socket = require('socket.io-client')('http://socket.coincap.io');
socket.on('trades', function(tradeMsg) {
console.log("worked");
});
app.listen(port, () => {
console.log("Server listening on port " + port);
});

Resources