Socket.io v1.x not working on Heroku - node.js

I had a simple chat app built with express and socket.io (v0.9.x) which was working on Heroku. Now that I updated to socket.io 1.3.5, however, the chat functionality is no longer working.
I have the server configured as follows
app.set('port', process.env.PORT || 5000);
var server = app.listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
var io = require('socket.io').listen(server);
Then in the client (I downloaded the actual socket.io.js file)
script(src='/javascripts/socket.io.js', type='text/javascript')
var socket = io.connect('http://' + document.domain + ':' + location.port);
One thing I notice is that when I run the app locally, if I open the dev console and type socket it returns the socket.io code, but when it's running on Heroku it just says Uncaught ReferenceError: socket is not defined, could this be part of my issue?
UPDATE: In response to jfriend00's comment I changed the code on the client back to what it was, shown below, but it has made no difference
script(src='/socket.io/socket.io.js', type='text/javascript')
var socket = io.connect();
Also, no errors are showing, but there is also no notification to say socket.io started which I was seeing before (don't know if it's deprecated in the newer version, or a sign of a fault)

Related

Server responds with 404 when trying to connect Socket.io to an Express app

I'm building a VueJS app using vue-cli's webpack template.
I've split the front and back ends into different Heroku applications and deployed them.
Background:
My client app has the same setup as described here
tl;dr the above Medium article:
We now have a fresh Vue-cli/webpack app, and a server.js file used to create an Express server that serves the built app files.
The problem:
I've been running into issues trying to use socket.io on said server.js file.
Here's how server.js looks like:
var http = require('http'),
path = require('path'),
express = require('express'),
app = express(),
server = http.createServer(app),
socketIO = require('socket.io'),
port = process.env.PORT || 8080,
history = require('connect-history-api-fallback'),
serveStatic = require('serve-static')
app.use(serveStatic(path.join(__dirname, '/dist')))
server.listen(port, () => {
// logs when running node server.js
console.log('listening on port', port)
})
const io = socketIO(server);
io.on('connection', (socket) => {
console.log('Connected!!!');
});
And this is how I call socket.io inside of my .vue component:
const io = require('socket.io-client')
const socket = io('http://localhost:8080')
As soon as this last line is uncommented I receive a friendly Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/socket.io/?EIO=3&transport=polling&t=M9yJX8nsocket.io/?EIO=3&transport=polling&t=M9yHe0F
Additional info:
Not sure if relevant, but still saying - I'm Using "connect-history-api-fallback" to point all non-existent routes to a wildcard 404 .vue component that displays a friendly user message and allows them to go back to existing routes.
Can this be a part of the reason? What I read about my issue is that I probably have trouble making socket.io run on the same server that my app is running in.
I experienced the problem initially when trying to first connect my Vue App with Vue-Socket.io
upon the line
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'));
Where as an URL I used http://localhost:8080
I've spend a good few days on the problem and still have no clarity on where this problem is rooted in. I am really trying to understand and would highly appreciate any form of feedback. I read about people having the same / similar problem, and tried calling io() without my localhost + port url.
First question here, hope it's properly asked.
Okay, guys, I don't know why, but following the code placed in the "Docs" section of Socket IO's website resulted in the same error (Express 3/4 section). I then went on to copy the Chat demo and had success, so I'm now importing Socket.IO in my Index.html file
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
With server.js looking like this:
var path = require('path'),
app = require('express')(),
http = require('http').Server(app),
io = require('socket.io')(http),
port = process.env.PORT || 8080,
history = require('connect-history-api-fallback'),
serveStatic = require('serve-static')
app.use(serveStatic(path.join(__dirname, '/dist')))
http.listen(port, () => {
console.log('listening on port', port)
})
io.on('connection', (socket) => {
console.log('Connected!!!');
});
I'm going to close this now and see how to implement the functionality I'm looking for - I now have a good starting point. Best of luck to anyone struggling with this.
Cheers!

why 'connection' never be triggered?

On another terminal,
$curl localhost:3001
However, on nodejs server side,
I never saw
"sdfsdf" for
console.log("sdfsdf");
Questions
1 Can some expert explain why?
2 How to fix it to make 'connect' callback triggered?
Thank you.
var express = require('express'),
http = require('http')
var app = express();
var server = http.createServer(app);
//var server = http.Server(app);
//server.listen(app.get('port'), function () {
server.listen(3001, function () {
//logger.info('openHAB-cloud: express server listening on port ' + app.get('port'));
console.log("3001");
});
app.get('/', function(req, res){
//res.sendfile('index.html');
res.send("xxx");
});
io = require('socket.io').listen(server);
io.on('connection', function(socket) {
console.log("sdfsdf");
});
To connect to a socket.io server, you must use a socket.io client - you cannot just use a regular curl or http request.
A socket.io client must be specifically designed to connect to a socket.io server. That means it uses the socket.io message format on top of webSocket and it follows the proper convention that socket.io and webSocket use for connecting.
Here are some client-side examples: https://socket.io/docs/client-api/
The connection can be made either from browser Javascript with the appropriate socket.io library included or using any socket.io client-side library from some other Javascript environment.
To see a bit how webSocket connections (which socket.io uses), you may want to read this: How does WebSockets server architecture work?. And then, socket.io adds its own message layer on top of webSockets.
const io = require('socket.io-client');
const socket = io('http://localhost:3001');

Socket.io + Azure web sockets issue

I am working on a multiplayer chess game with NodeJS and socket.IO.
I have problem hosting it on Azure tho.. I tried many different approaches, a few mentioned:
Forcing the application to only use WebSockets by adding the code below:
io.configure(function() {
io.set('transports', ['websocket']);
});
Added <webSocket enabled="false"/> in web.config file..
Note: This disables the IIS WebSockets module, which includes its own implementation of WebSockets and conflicts with Node.js specific WebSocket modules such as Socket.IO. If this line is not present, or is set to true, this may be the reason that the WebSocket transport is not working for your application.
Matching origin protocol to ensure no SSL issues.
io.configure(function() {
io.set('match origin protocol', true);
});
I now started from scratch, since I thought my server-side part was corrupt, and tried Socket.io chat example instead.
I followed the steps.
Created a new web app on Azure.
Published my files through FileZilla FTP.
Enabled Web Sockets on Azure for my app (disabled by default).
STILL THE SAME ERROR! See picture below.
Anyone? I am unsure if it's a client-side or server-side issue. It seems like it's trying to XHR-poll instead of using web sockets..
Thanks in advance.
I got it working, thank you Chris Anderson-MSFT for your help.
The weird thing that occurred for me when deploying with FTP was that my node_modules folder differed with version(s) specified in my package.json.
I solved this by connecting my web app on Azure to a local Git repository and deploying the app through git. This connects my packages recursively and matches correct versions.
I also needed to enforce my client-side socket-io to use web sockets by specifying transport method:
var socket = io({transports:['websocket']});
And this is what my server-side file ended up looking like:
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var port = process.env.PORT || 3000;
app.use(express.static('public'));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/public/default.html');
});
io.on('connection', function(socket) {
io.set('transports', ['websocket']);
console.log('new connection on socket.io');
socket.on('move', function(msg) {
socket.broadcast.emit('move', msg);
});
});
server.listen(port, function () {
console.log('Server listening at port %d', port);
});

Heroku socket.io sample error in Express 4.0

So I'm trying to use the sample heroku application: https://github.com/lstoll/socket-io-chat-heroku as a template to build my own socket.io application, but I'm running on Express 4.0, Node 0.10.x, and Socket.io 0.9.16.
Now the problem is that when I run my server, everything is fine, but when I run my client, I get the following error:
Uncaught ReferenceError: require is not defined socket.io.js:12
Uncaught ReferenceError: io is not defined chat2:2
My relevant server code is as follows:
var app = express();
var http = require('http');
var server = http.createServer(app);
var sio = require('socket.io');
var port = 3000 || process.env.PORT;
server.listen(port);
var io = sio.listen(server);
io.sockets.on('connection'), function(socket) {
...
});
On my client side, I have the following:
I've tried both (this is in jade, by the way):
script(src='/socket.io/socket.io.js') OR script(src='http://localhost:3000/socket.io/socket.io.js')
var socket = io.connect() OR var socket = io.connect('http://localhost:3000')
Neither of these options have worked, always resulting in an error on the client side.
Is there something special to do for Express 4.0? I've asked a very similar question here: Node.js /socket.io/socket.io.js not found express 4.0 but this is another attempt at getting chat to work with a different template.
Update and Edit: after some work, I was able to deploy a heroku app using express 4.0 and socket.io, at: http://salty-escarpment-7398.herokuapp.com/chat.
The problem now is to integrate it back into my current app, and after much work, I now am getting an error:
22:19:56 web.1 | GET /socket.io/?EIO=2&transport=polling 404 26ms - 1.67kb
22:19:59 web.1 | GET /socket.io/?EIO=2&transport=polling 404 25ms - 1.67kb
I have:
io.set('transports', ['xhr-polling']);
io.set('polling duration', 10);
To set it to xhr-polling, and my server code is pretty much identical to what was above. The page loads, though, and it's only when trying to send a chat that nothing happens and the 404 starts appearing.
Thanks
By default Socket.IO 1.0.4 allows polling and websocket transports. You removed polling transport ! return the polling transport back:
io.set('transports', ['websocket',
'flashsocket',
'htmlfile',
'xhr-polling',
'jsonp-polling',
'polling']);

Modulus.io and Socket.io problems

I am making a socket.io app, it is working perfectly locally, until i try to put it on Modulus.io, Then I can't connect to my app, it isn't generating an error though... this is some relevant code:
(Server)
var io = require('socket.io').listen(Number(process.env.PORT) || 8080)
io.set('log level', 5);
io.set("origins = *");
It says info - socket.io started and that's it. When I try to connect, socket.on("error") fires with ETIMEOUT

Resources