NodeJS, Socket.Io and Express

yavstr · Fri Jul 28, 2017 5:49 am

I'm trying to get this up and running and the NodeJS seems to be fine, my problem is my HTML page can't find the socket.io/socket.io.js

Here is my server code:

Code: Select all

var express = require('express');
var app = express();
var server = require('socket.io');
app.use(express.static('public'));
server.createServer(app).listen(8080);

var serv_io = io.listen(server);
serv_io.sockets.on('connection', function(socket) {
console.log('user connected');
socket.emit('SocketCallback', {value:'Connection Successful'});
});

and my html

Code: Select all

<head>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<script type="text/javascript">
var socket = io();
socket.on('SocketCallback', function (data) {
console.log(data);
});
</script>
</body>

Now here is my file structure:

project-folder/index.js
project-folder/package.json
project-folder/node_modules
project-folder/public/index.html

When I run the index.js the server seems fine and no issues, when I open the index.html page in the browser on the pi it can't find the socket.io.js file and because of that io is undefined.

Can anyone please offer some help?

Heater · Fri Jul 28, 2017 5:56 pm

Looks like your server is listening on port 8080.

Meanwhile the JS in your page might not be requesting from that port.

The simple socket.io with express example on the socket.io web site works fine. https://socket.io/docs/
Or at least my rendition of it does, see below.

Also you have no connect call in your client side JS. Like so:

Code: Select all

var socket = io.connect();

or

Code: Select all

var socket = io.connect('whateverurl:whateverport');

index.js:

Code: Select all

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

server.listen(8080);

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

io.on('connection', function (socket) {
    socket.emit('news', { hello: 'world' });
    socket.on('my other event', function (data) {
        console.log(data);
    });
});

index.html:

Code: Select all

<html>
    <head>
        <script src="/socket.io/socket.io.js"></script>
    </head>
    <body>
        <h1>Hello!</h1>
        <script type="text/javascript">
            var socket = io.connect('http://localhost:8080');
            socket.on('news', function (data) {
                console.log(data);
                socket.emit('my other event', { my: 'data' });
            });
        </script>
    </body>
<html>

yavstr · Fri Jul 28, 2017 9:14 pm

Thanks for the feed back Heater.

I've tried so much and with it being late yesterday I don't even remember what I did and didn't do.

Today I have the following:

index.js:

Code: Select all

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

server.listen(8080);

app.get('/', function (req, res) {
   res.sendfile(__dirname + '/manual.html');
});

function onConnection(socket) {
  console.log('user connected');
  socket.emit('notify', { value: '...is this thing on?' });
}

io.on('connection', onConnection);

manual.html

Code: Select all

<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <title> ... Testing ... </title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="web.css">
	<script src="/socket.io/socket.io.js"></script>
    </head>

    <body>
	<script type="text/javascript">
		var socket = io.connect(); // i have tried var socket = io.connect('http://localhost:8080');
		socket.on('notify', function ( data ) {
			console.log(data);
		});
	</script>
    </body>
</html>

When I run

Code: Select all

node index.js

I get the following error:

Code: Select all

/home/pi/node_programs/deserest/node_modules/socket.io/node_modules/engine.io/node_modules/ws/index.js:9
const WebSocket = require('./lib/WebSocket');
^^^^^
SyntaxError: Use of const in strict mode.
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Server.init (/home/pi/node_programs/deserest/node_modules/socket.io/node_modules/engine.io/lib/server.js:119:16)
    at new Server (/home/pi/node_programs/deserest/node_modules/socket.io/node_modules/engine.io/lib/server.js:65:8)
    at Function.attach (/home/pi/node_programs/deserest/node_modules/socket.io/node_modules/engine.io/lib/engine.io.js:123:16)

Even better if I clone done an example project I get the same issue.
I know there's something I'm overlooking I'm just past being tired and am not seeing the issue.

yavstr · Fri Jul 28, 2017 9:30 pm

Well, it was something sill.
It never crossed my mind to check the version of node that was installed.

Turns out it was version 0.12, I have upgraded the installed version and I'm able to connect.

Heater · Sat Jul 29, 2017 1:16 am

Excellent.

Yes, version 0.12... is ancient in the node.js world. A lot has change since then. For example "const" is a language feature of the new 2015 standard of Javascript.

I use nvm to make it easy to install new versions of node. Or revert back to older versions should anything break.

https://github.com/creationix/nvm

I have also taken to getting my node programs to test the version of node they are running under and refuse to start, with a polite message, if the version is older than what I originally wrote the program with.

NodeJS, Socket.Io and Express

NodeJS, Socket.Io and Express

Re: NodeJS, Socket.Io and Express

Re: NodeJS, Socket.Io and Express

Re: NodeJS, Socket.Io and Express

Re: NodeJS, Socket.Io and Express