Note - I'm using Pug to render my pages.
My page, when including the script(src="/socket.io/socket.io.js"), does not stop loading.
Here's the relevant content from my app.js.
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
All packages are installed correctly.
In my head tag:
script(src="/socket.io/socket.io.js")
script.
var socket = io();
Yet, my page does not stop loading. What have I done wrong here?
Update:
app.js
const path = require('path');
const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const AppError = require('./utils/appError');
const globalErrorHandler = require('./controllers/errorController');
const userRouter = require('./routes/userRoutes');
const viewRouter = require('./routes/viewRoutes');
const projectRouter = require('./routes/projectRoutes');
const app = express();
app.set('view engine', 'pug')
app.set('views', path.join(__dirname, 'views'));
//MIDDLEWARES
if (process.env.NODE_ENV === 'development') {
app.use(morgan('dev'));
}
app.use(express.urlencoded({extended: true}));
app.use(express.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use((req, res, next) => {
req.requestTime = new Date().toISOString();
next();
});
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'overview'));
})
//ROUTES
app.use('/', viewRouter);
app.use('/api/1/users', userRouter);
app.use('/api/1/projects', projectRouter)
app.all('*', (req, res, next) => {
next(new AppError(`Can't find ${req.originalUrl}.`, 404));
});
app.use(globalErrorHandler);
module.exports = app;
server.js (run by node)
const mongoose = require('mongoose');
const dotenv = require('dotenv');
// mongoose.set('debug',true);
dotenv.config({path: './config.env'})
const app = require('./app');
const DB = process.env.DB.replace('<PASSWORD>', process.env.DBPASS);
mongoose.connect(DB, {
useNewUrlParser: true,
useCreateIndex: true,
useFindAndModify: false,
useUnifiedTopology: true
}).then(con => {console.log('🔗 Connected.')})
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`📈 Running on ${port}.`)
});
const http = require('http').Server(app);
const io = require('socket.io')(http);
io.on('connection', socket => {
socket.on('greeting', msg => {
console.log(msg);
})
});
http.listen(80);
Now that you've shown your code, this part is wrong:
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`📈 Running on ${port}.`)
});
const http = require('http').Server(app);
const io = require('socket.io')(http);
You are creating two separate servers there and binding socket.io to the one that isn't running. Change that above code to this:
const port = process.env.PORT || 3000;
const server = app.listen(port, () => {
console.log(`📈 Running on ${port}.`)
});
const io = require('socket.io')(server);
Earlier attempt to help before OP had shown their actual code.
My guess is that something is messed up in your environment or something is wedged in your OS or something is blocking some requests. To rule things in or out, I would suggest you try this simple app which works just fine for me:
// app.js
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const path = require('path');
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "temp.html"));
});
io.on('connection', socket => {
socket.on("greeting", msg => {
console.log(msg);
});
});
server.listen(80);
and the HTML file temp.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="/socket.io/socket.io.js"></script>
<style>
</style>
</head>
<body>
<button id="myButton">Press Me</button>
<script>
const socket = io();
document.getElementById("myButton").addEventListener("click", () => {
socket.emit("greeting", "hi from client");
});
</script>
</body>
</html>
You put these two files in the same project and you have the server-side socket.io library installed in that project (it should be in node_modules per a normal installation).
Start the server with node app.js in a way that has a server console that you can see output from. Then, from a browser on the same computer, go to http://localhost. It should load a web page with a single button on it. Press that button. You should see a message in the server console that says hi from client each time you press that button.
If this is working, then we would need to see all your project code to see what's wrong with your actual project.
If this isn't working, then we need to know what errors you get. You can try moving this project to a different port in case you have something blocking some things on a particular port. You can reboot your computer in case something in the networking or file system is wedged.
Im trying to create a search bar that will query and display the data from my own Postgres database. I have a search bar on my screen, and I think I am connected to my database, but i cannot get any results to show up. Any help would be appreciated. Im still quite new to using node.js and developing tools such as this. When i submit my search, i receive a 404 error message.
Index.js
const express = require('express');
const router = express.Router();
const pg = require('pg');
const path = require('path');
const connectionString = process.env.DATABASE_URL || 'postgres://postgres:postgres#localhost:5432/todo';
router.get('/', (req, res, next) => {
res.sendFile(path.join(
__dirname, '..', '..', 'client', 'views', 'index.html'));
});
router.get('/api/v1/todos', (req, res, next) => {
const results = [];
// Get a Postgres client from the connection pool
pg.connect(connectionString, (err, client, done) => {
// Handle connection errors
if(err) {
done();
console.log(err);
return res.status(500).json({success: false, data: err});
}
// SQL Query > Select Data
const query = client.query('SELECT name FROM world_heritage_sites.caravanserai ORDER BY iso ASC;');
// Stream results back one row at a time
query.on('row', (row) => {
results.push(row);
});
// After all data is returned, close connection and return results
query.on('end', () => {
done();
return res.json(results);
});
});
});
App.js
const express = require('express');
const path = require('path');
const favicon = require('serve-favicon');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const routes = require('./server/routes/index');
// var users = require('./routes/users');
const app = express();
// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'html');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'client')));
app.use('/', routes);
// app.use('/users', users);
// catch 404 and forward to error handler
app.use((req, res, next) => {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use((err, req, res, next) => {
res.status(err.status || 500);
res.json({
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use((err, req, res, next) => {
res.status(err.status || 500);
res.json({
message: err.message,
error: {}
});
});
module.exports = app;
HTML
<!DOCTYPE html>
<html ng-app="nodeTodo">
<head>
<title>Todo App - with Node + Express + Angular + PostgreSQL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/search.js" type="text/javascript"></script>
<script src="/search.js"></script>
<script src="//code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body ng-controller="mainController">
<div class="container">
<div class="header">
<h1>SuckySearchBar</h1>
<hr>
<h1 class="lead">Designing Search Bars Suck This Never Works</h1>
</div>
</body>
<body ng-controller="searchController">
<div class="container">
<div class="search-box">
<input class="search" type="text" placeholder="Search" id="search" method='GET' autocomplete="on" onkeyup="search();">
<table class="result table-bordered" id="search"></table>
<script>
function searchinput(){
$.ajax({
type: 'GET',
url: '/api/v1/todos' + searchinput,
success: function(result){
window.location.reload(true);
}
})
}
</script>
</div>
</body>
</html>
Search.js
function search(search_string, func) {
pool.query(
"SELECT name FROM world_heritage_sites.caravanserai ORDER BY iso ASC",
[search_string],
function(err, result) {
if(err) {
func([])
} else {
func(result.rows)
}
}
);
}
module.export = search;
first of all, congrats for starting a new studies task! But let's solve this issue, shall we?
1 - My tip for you, is that before you even start to worry about the frontend, let's make sure that our service is running fine, and we shall test it on the server-side only. "I think I am connected to my database", we cannot proceed if we think something is going on fine, we need to make sure!
2 - We need our service running, that`s the only way we can get our DB connected. So for now, we forget about the interface and DB, let's focus on the service:
Inside your "app.js" you are trying to import your routes right? By doing
const routes = require('./server/routes/index');
But in order to do that, you need to export those routes before, then go to your "index.js" file and add "module.exports = router". Now you can use your router imported inside your "app.js" file!
Stays like this:
const express = require('express');
const router = express.Router();
const pg = require('pg');
const path = require('path');
const connectionString = process.env.DATABASE_URL || 'postgres://postgres:postgres#localhost:5432/todo';
Almost there, our service needs to listen to some port now
router.get('/', (req, res, next) => {
res.sendFile(path.join(
__dirname, '..', '..', 'client', 'views', 'index.html'));
});
router.get('/api/v1/todos', (req, res, next) => {
console.log("HAHAHAHAHA")
const results = [];
// Get a Postgres client from the connection pool
pg.connect(connectionString, (err, client, done) => {
// Handle connection errors
if(err) {
done();
console.log(err);
return res.status(500).json({success: false, data: err});
}
// SQL Query > Select Data
const query = client.query('SELECT name FROM world_heritage_sites.caravanserai ORDER BY iso ASC;');
// Stream results back one row at a time
query.on('row', (row) => {
results.push(row);
});
// After all data is returned, close connection and return results
query.on('end', () => {
done();
return res.json(results);
});
});
});
module.exports = router;
Now our application needs to listen to some port. I don't have access to your folder structure, that's why I will work the idea using only these two files you presented us. Inside your "app.js" you got tell your application to serve using one port, you can do that by typing
"app.listen(8000, () => console.log('listening'))
"
since you are exporting your app, you can import and use it anywhere you'd like, but I told you already, I will work the idea restricted to the files you showed us, that's why your "app.js" would be like this
check this Docs before : https://node-postgres.com/features/connecting
const express = require('express');
const path = require('path');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const routes = require('./index');
// var users = require('./routes/users');
const app = express();
// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'html');
// uncomment after placing your favicon in /public
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'client')));
app.use('/', routes);
// app.use('/users', users);
// catch 404 and forward to error handler
app.use((req, res, next) => {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use((err, req, res, next) => {
res.status(err.status || 500);
res.json({
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use((err, req, res, next) => {
res.status(err.status || 500);
res.json({
message: err.message,
error: {}
});
});
app.listen(8000, () => console.log('listening'))
module.exports = app;
Ok, now our service is running, go to your terminal and type: node app.js
it should print "listening" in your shell.
Now try to access http://localhost:8000/api/v1/todos in your browser, it should print an error "pg.connect is not a function"
That's because you are not using the lib the right way, try something like this
const express = require('express');
const router = express.Router();
const path = require('path');
const { Pool, Client } = require('pg')
const connectionString = 'postgres://postgres:postgres#localhost:5432/todo'
const client = new Client({
connectionString: connectionString,
})
client.connect()
router.get('/', (req, res, next) => {
res.sendFile(path.join(
__dirname, '..', '..', 'client', 'views', 'index.html'));
});
router.get('/api/v1/todos', (req, res, next) => {
const results = [];
client.query('SELECT name FROM world_heritage_sites.caravanserai ORDER BY iso ASC;', (err, res) => {
console.log(err, res)
client.end()
})
});
module.exports = router;
But remember, you need to have your Postgres service running in your localhost to connect using this connection string you are using. If you configured your Postgres service and db the right way, it should work fine, then you just need to call your route "localhost:8000/api/v1/todos" in your interface.
Actually there are a lot of things you should check in your code, and maybe it's good if you get some background before start this project. Try some tutorials for beginners on youtube and check other dev's code. Good Luck and Good code dude!
I hope I gave you at least a little help :)
I think what #Molda is saying is that you should change methods=['GET'] to method='GET'. Can you post the surrounding html as well?
EDIT
Ok, so I think you are confusing the javascript running on your server and the javascript running in the browser. If you are going to call search() from the onKeyUp() event handler Then it is going to run in the browser. Since it is going to run in the browser, it does not have the ability to access postgres directly. What it should do is make an ajax request to a route on the server that provides it with the search results as json (similar to what you did with /api/v1/todos you could define /api/v1/search), which it then renders on the page somehow (perhaps with jquery). In this case, you shouldn't even need to define method on your input.
I've tried numerous methods to solve this from app.use(express.static(__dirname + "public")) to res.render and it works in my terminal but not in my local host. Where am I going wrong?
Here's my JS file:
const express = require('express');
const bodyParser = require('body-parser');
var fs = require ('fs');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
//
app.get('/index', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
})
//app.use(express.static(__dirname + '/public'));
//app.get('/index.html', (request, response) => response.sendFile( __dirname, "/index.html"));
app.post('/userinfo', (request, response) => {
const postBody = request.body;
console.log(postBody);
response.send(postBody);
});
app.listen(3002, () => console.info('Application running on port 3002'));
And here's my HTML file:
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Express - Node.js POST data example</title>
</head>
<body>
<form action="/userinfo" method="POST">
Some data: <input type="text" name="data" id="data">
<button type="submit">Send</button>
</form>
</body>
</html>
There is no response for base url or / route is defined. You have defined only two routes and I assume /index for your index page. So, the page will be render at localhost:3002/index . You have to define another response for / or base url like,
app.get('/', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
})
Hopefully, your problem will be solved.
I am trying to display the contents of my database on a webpage.
The way I want to do it is by displaying the content in the database by descending order. I have made the connection to MongoDB and am able to see my data in the terminal stored correctly. I just can't seem to figure out how to display that stored data now.
Thanks!
Server.js file.
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: true })
var mongoose = require("mongoose");
mongoose.Promise = global.Promise;
mongoose.connect("mongodb://localhost:27017/node-demo");
var nameSchema = new mongoose.Schema({
Alert: String
});
var User = mongoose.model("User", nameSchema);
app.listen(3000, function() {
console.log('listening on 3000')
})
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})
app.get('/alertview', (req, res) => {
res.sendFile(__dirname + '/alertview.html')
})
app.post('/', urlencodedParser, function (req, res) {
var myData = new User(req.body);
myData.save()
.then(item => {
res.send("item saved to database");
})
.catch(err => {
res.status(400).send("unable to save to database");
});
});
User.find({},function(err,docs){
console.log(docs);
})
Html file I want to display the alerts on.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/alertpageStyle.css" media="screen" />
<meta charset="UTF-8">
<title>View Alerts</title>
</head>
<body>
<div class="header">
<h1>Current Alerts</h1>
</div>
</body>
</html>
Simple example using the EJS templating, essentially you pass your object to the template at the time of rendering. You can also iterate over data. Same approach can be used for Handlebars or Mustache packages.
var express = require('express');
var path = require('path');
var index = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use('/', index);
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
I'm trying setup simple app with node, express and angular2. The problem is that, when I run localhost, open it in browser, I get errors: "Uncaught SyntaxError: Unexpected token <". I think it happens because of incorrect path or wrong code in my node/express files.
For example, when I'm trying open library file in source, I always get index.html code :
Here is the folder structure:
Below I'll show full code
index.js
'use strict'
// require dependencies
let express = require('express');
let bodyParser = require('body-parser');
let path = require('path');
// require our custom dependencies
let router = require('./router');
let app = express();
const PORT = process.env.PORT || 4000;
// get the data from a POST
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
//share folder with static content
app.use(express.static(__dirname + '../frontend/build'));
app.use('/', router);
app.listen(PORT, function() {
console.log('Example app listening on port', PORT);
});
router.js
let express = require('express');
let router = express.Router();
let path = require('path');
let User = require('./models/user');
router.use(function(req, res, next) {
console.log('request to', req.path);
next();
});
router.route('/users')
.get(function(req, res) {
User.find(function(err, users) {
if (err) {
res.send(err);
}
res.json(users);
});
});
router.get('*', function (req, res) {
res.status(200).sendFile(path.resolve('frontend/build/index.html'));
})
module.exports = router;
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Angular 2 App!</title>
<base href="/">
<!-- load the dependencies -->
<script src="./assets/libs/core-js/client/shim.min.js"></script>
<script src="./assets/libs/zone.js/dist/zone.js"></script>
<script src="./assets/libs/reflect-metadata/Reflect.js"></script>
<script src="./assets/libs/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) {
console.error(err);
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Thanks!
Update
I changed in router.js from this
router.get('*', function (req, res) {
res.status(200).sendFile(path.resolve('frontend/build/index.html'));
});
to this
router.get('/', function (req, res) {
res.status(200).sendFile(path.resolve('frontend/build/index.html'));
});
and now I have 404 error, files not found