Socket.io how create file run time on local server - node.js

I have written down this code in NPM module with the help of socket.io,
Index.html
<html> <head> <title>WebRTC client</title> </head> <body>
<script src='socket.io/socket.io.js'></script> </body> </html>
In server.js file
var static = require('node-static');
var http = require('http');
var file = new(static.Server)();
var app = http.createServer(function (req, res) {
file.serve(req, res);
}).listen(8181);
var io = require('socket.io').listen(app);
io.sockets.on('connection', function (socket){
console.log('io.sockets.on');
});
Root folder has index.html, server.js, and socket.io folder contains no file
Hit localhost:8181 in a browser, index.html will run and socket.io/socket.io.js file automatically created
http://localhost:8181/socket.io/socket.io.js
and I checked my socket.io folder there is no file? How socket.io.js created? and what is the main purpose of a socket.io/socket.io.js file?

"You might be wondering where the /socket.io/socket.io.js file comes from, since we neither add it and nor does it exist on the filesystem. This is part of the magic done by io.listen on the server. It creates a handler on the server to serve the socket.io.js script file."
from the book Socket.IO Real-time Web Application Development, page 56

Related

Why I'm getting a blank page from running a node server that point to the /dist folder of an Angular app?

My simple node server is:
const express = require('express');
const app = express();
app.get('*', (req, res) => {
res.sendFile(__dirname + '/dist/page/index.html');
})
app.listen(3335, () => { console.log('Server is listening on 3335'); });
But I'm getting the index file that seems not running the main.js
The Angular app, at the moment it's literally a page/component that is app.component.ts, so there is not any routing.
Use express.static() for serving static files.
It is because you have set a response of 'index.html' file for each and every request the server would receive. The first response would be good that's the index.html page only as expected. But, the index.html page must be having some script and css tags to fetch your Angular Javascript code which I assume would be on the same node server. So when the browser would encounter a line like:
<script src="/angularApp.js"></script>
..in your index.html file while parsing it, it would make another request to the node server for http://localhost:<port>/angularApp.js but would get the index.html file as the response as that is what you have set.
Do it like this to serve static files like .html, .css, .js or what have you:
app.use(express.static(path.join(__dirname, '/dist')));

Can i use node as webserver for html app?

I'm sorry to ask such a simple question. I've been sent files by someone, an index.html file which pulls in a js file within script tags. I have to start a webserver to get through authentication and view the files (am in dev).
In my CLI i have navigated to the directory containing index.html. I have checked with node -v that I have it installed globally (yes, v 8.6). I've run the simple command node and checked my browser at http://localhost:3000 and a few other ports but get no joy. I've also tried node index.html but CLI throws an error.
How do i start the webserver? All the examples online tell me to build a .js file, but this is not an option.
Steps to set up a node web server
Create the route folder from your local machine.
Go to the command prompt from the project root path.
Install express using the command npm install express
Create server.js file
create the folder wwww and create the Index.html inside it.
server.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/www'));
app.listen('3000');
console.log('working on 3000');
Index.html
<!doctype html
<html>
<head>
<title> my local server </title>
</head>
<body>
<h1> server working </h1>
<p> just put your html,css, js files here and it work on your own local nodejs server </p>
</body>
</html>
Go to the project root path and take the command prompt, then start the server by running the command node server.js
Then go to the browser and run the url localhost:3000.
Now you can see the html page will render on your browser.
Since you don't want to build a backend but just an http server.
I would propose to use an npm package that do just what you need:
Open a console
npm install http-server -g
Go to your "index.html" folder (in the console) then type:
http-server
Then reach your content in your browser at this address:
http://localhost:8080
Documentation here:
https://www.npmjs.com/package/http-server
Yes, this is possible.
A very simple example of how to do this would be to create file, let's call it app.js and put this in it:
const http = require('http'), // to listen to http requests
fs = require('fs'); // to read from the filesystem
const app = http.createServer((req,res) => {
// status should be 'ok'
res.writeHead(200);
// read index.html from the filesystem,
// and return in the body of the response
res.end(fs.readFileSync("index.html"));
});
app.listen(3000); // listen on 3000
Now, run node app.js
Browse to http://localhost:3000
There's loads of other npm packages that will help you out do this, but this is the simplest 'pure node' example to literally read index.html and serve it back as the response.
Its very easy to start a server using node js
Create a server.js file,
const http = require('http')
const fs = require('fs');
http.createServer(function (req, res) {
fs.readFile('index.html', function(err, data) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();
});
}).listen(3000);
Run node server.js
Here is a reference
This will even solve your backslash issue by this

Express / Node / Cloud9 - issues serving static files

I'm having an issue serving a simple static html file with Express on a Cloud9 server.
My file structure is simply:
/workspace
/public
Screenshot from c9.io here
And here's my code, I get a Cannot GET/ (screenshot) when previewing in the browser.
static.js (located in the C9 workspace):
var http = require('http');
var path = require('path');
var express = require('express');
var app = express();
app.use(express.static(path.join(__dirname, '/public')));
http.createServer(app).listen(8080);
static.html (located in /public):
<!doctype html>
<html>
<body>
<p>Hello World!</p>
</body>
</html>
I know the server's listening on the right port, because the preview works when I write directly to the response stream using Express, like this:
app.use(function(request, response) {
response.end("Hello world!\n");
});
http.createServer(app).listen(8080);
Apologies for the simplicity of the request, I just pared everything down to understand the fundamental reason I'm seeing "Cannot GET/".
Thanks for your help.
renaming the file from static.html to index.html will work

External script error in socket.io server

I'm having a problem, whenever I try to import a local script:
<script src="socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
var socket = io();
editor.getSession().on('change', function e() {
socket.emit('editor-change', editor.getValue());
});
socket.on('editor-change', function(val) {
edit.setValue(val);
});
</script>
Everything gets imported fine except the ace-builds which is in the correct directory. Here's an image of the error:
I don't understand why I'm getting this error (404) because all these files (including the server scripts) are hosted in the same directory as the file giving off the 404 error.
By default node.js does not serve any files. If you want it to serve files, then you either have to set up specific routes to serve specific files or use a module like express-static that can serve directories of files for you.
You can read more about serving static files here: http://expressjs.com/starter/static-files.html

nodejs and socket.io.js path resolution

I have just started learning nodejs with the socket.io.js library. My question isn't really related to the stuff in these libraries but rather on how the files are served by a visiting browser.
In my server directory there are just 2 files present (index.html and server.js) along with the node_modules directory (for socket.io). In the index.html I have a script tag including the client side socket.io lib as follows,
<script src="/socket.io/socket.io.js"></script>
The relecvant server code is,
var server = http.createServer(
function(req, res) {
res.writeHead(200, { 'Content-type': 'text/html'});
res.end(fs.readFileSync(__dirname + '/index.html'));
}
).listen(8080,
function() {
console.log('Listening at: http://localhost:8080');
}
);
My question is where is this file present on the server (there is no socket.io directory in the dir where index.html is present)? So how and from where is this being resolved and downloaded correctly by the web browser?
Sorry for the noob question.
The client side file is injected by the socket.io npm module automatically so that when you upgrade the npm module your client side version of socket.io gets updated automatically.
The actual file lives at:
/usr/local/lib/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js
Edit: Forgot to mention that when you initialise socket.io you are actualy making it start its own server that serves the file.

Resources