I have a node.js server running on the port 8443. Whenever I try to run the application through the browser my socket.io keeps connecting for about 20 seconds before the url turns red at the end.
Edit 3 : This is my directory structure and now with updated files
/var/www/html/nodetest/
Inside this
/node_modules
/app.js
/index.html
Node JS is installed on server.
Here is my main app.js code (as suggested in answer) :
var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var fs = require('fs');
// Run server to listen on port 8443.
server = app.listen(8443, () => {
console.log('listening on *:8443');
});
io.listen(server);
io.sockets.on('connection', function(socket) {
socket.emit('message', 'this is the message emitted by server');
});
app.get('/', function(req, res){
fs.readFile(__dirname + 'index.html', function(error, data) {
res.writeHead(200);
res.end(data);
});
});
And this is my client browser side code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1
/socket.io.min.js"></script>
<script type="text/javascript">
var websocket;
function onload() {
websocket = io.connect();
websocket.on('message',function(data) {
console.log('Received a message from the server!',data);
});
};
</script>
</head>
<body onload="onload()">
<div id="divId"></div>
</body>
</html>
Here is an image of the error
Now it shows 404 Error
I've modified the code as per your need. The code is working as it is showing message emitted by server after loading in browser's console as in the below image.
Server.js:
let express = require('express')
let app = express();
let http = require('http').Server(app);
let io = require('socket.io')(http);
let port = 8443;
var fs = require('fs');
var path = require('path');
app.get('/', function (req, res) {
fs.readFile(path.join(__dirname, 'index.html'), function (error, data) {
res.writeHead(200);
res.end(data);
});
});
// Run server to listen on port 8443.
http.listen(port, function () {
console.log(`listning on ${port}`);
});
io.on('connection', function (socket) {
socket.emit('message', 'this is the message emitted by server');
socket.on('disconnect', function () {
console.log('Client disconnected');
});
});
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.min.js"></script>
<script type="text/javascript">
var websocket;
function onload() {
websocket = io().connect();
websocket.on('message', function (data) {
console.log('Received a message from the server!', data);
});
};
</script>
</head>
<body onload="onload();">
</body>
</html>
You are doing this in a manner I haven't seen yet. Here is an example that is working. The main difference is my webserver returns the file that I am connecting with the socket.
EDIT: I updated this to use your webserver. I modified it to make it make it server the index.html file.
Webserver:
var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var fs = require('fs');
// Run server to listen on port 8000.
server = app.listen(8447, () => {
console.log('listening on *:8447');
});
io.listen(server);
io.sockets.on('connection', function(socket) {
socket.emit('message', 'this is the message emitted by server');
});
app.get('/', function(req, res){
fs.readFile(__dirname + '/index.html', function(error, data) {
res.writeHead(200);
res.end(data);
});
});
index.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.min.js"></script>
<script type="text/javascript">
var websocket;
function onload() {
websocket = io.connect();
websocket.on('connect',function() {
console.log('Client has connected to the server!');
});
websocket.on('message',function(data) {
console.log('Received a message from the server!',data);
});
websocket.on('disconnect',function() {
console.log('The client has disconnected!');
});
};
</script>
</head>
<body onload="onload()">
<div id="divId"></div>
</body>
</html>
You are creating two separate servers and only starting one of them so your socket.io server is never started.
Change this:
var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
// Run server to listen on port 8000.
server = app.listen(8447, () => {
console.log('listening on *:8447');
});
to this:
var app = require('express')();
// Run server to listen on port 8000.
var server = app.listen(8447, () => {
console.log('listening on *:8447');
});
var io = require('socket.io')(server);
app.listen()
creates its own server so you don't want to use both it and http.createServer()
.
Here's the code for app.listen()
so you can see how it works:
app.listen = function(){
var server = http.createServer(this);
return server.listen.apply(server, arguments);
};
So, you can see that the server you created with http.createServer()
and then bound to socket.io was never started with .listen()
.
You make a simple mistake. In your html
file change socket.io library file source https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.min.js
to socket.io cdn sorce which is https://cdn.socket.io/socket.io-1.4.5.js
.
After that run restart you app.
if yo getting 404
again, then in you html replace websocket = io.connect();
to websocket = io.connect(your_server_domain_or_host_name:nodejs_server_running_port);