Trying to make VUE application with backend on Node.JS. But the simplest code doesn't work.
My backend:
const HTTPServer = require("http")
server = HTTPServer.createServer((req, res) => {
console.log(req.url)
console.log(req.method)
res.write('Hello world!')
res.end()
})
server.listen(3000, () => {
console.log('Server is up')
})
My frontend:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios#0.12.0/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Get test</title>
</head>
<body>
<div id="app">
<div>
<button class="btn" #click="btn_pressed">Send GET request</button>
</div>
<div> {{comment}}</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
comment: ''
},
methods: {
btn_pressed: function () {
axios
.get('http://localhost:3000')
.then(response => {
this.comment = 'Response is ' + response.data
})
.catch(error => {
this.comment = 'The error is ' + error
})
}
}
})
</script>
</body>
</html>
I see the correct response in Network activity in Chrome, but get "Network error" in the code.
You can tried something just like this:
<script>
var app = new Vue({
el: '#app',
data: {
comment: ''
},
mounted() {
this.btn_pressed()
},
methods: {
btn_pressed() {
axios.get('/')
.then(res => {
this.comment = 'Response is ' + res.data
})
.catch(err => {
this.comment = 'The error is ' + err
})
}
}
})
Related
Below is a snippet of my NodeJS server code.
async function handleLoginReq(req, res) {
let queryDB = `
SELECT password FROM faculty_information
WHERE email='${userInfo["user-email"]}';
`;
try {
const dbres = await client.query(queryDB);
if (dbres.rows.length !== 0) {
if (dbres.rows[0].password === '') {
const errVal = 'Please register yourself correctly';
res.writeHead(302, {
'Location': `/login_page/loginPage.html?error=${encodeURIComponent(errVal)}`
});
res.end();
client.end();
} else if (userInfo["user-password"] === dbres.rows[0].password) {
res.writeHead(302, {
'Location': '/experiment_page/index.html'
});
res.end();
client.end();
} else {
const errVal = 'Incorrect password or email address';
res.writeHead(302, {
'Location': `/login_page/loginPage.html?error=${encodeURIComponent(errVal)}`
});
res.end();
client.end();
}
} else {
const errVal = 'Please sign up';
console.log(errVal);
res.statusCode(302);
res.setHeader('Location', `/login_page/loginPage.html?error=${encodeURIComponent(errVal)}`)
//res.writeHead(302, { 'Location': `/login_page/loginPage.html?error=${encodeURIComponent(errVal)}` });
res.end();
client.end();
}
} catch (err) {
res.writeHead(500);
res.end("Internal server error");
client.end();
}
}
handleLoginReq(req, res);
The client.query() function is a asynchronous function. However, none of the res.writeHead(302)'s are working inside the callback of this function. A res.writeHead(302) does work if I add it below the function call of handleLoginReq(req, res);.
handleLoginReq(req, res);
// Below redirect works
res.writeHead(302, { 'Location': '/experiment_page/index.html' });
res.end();
The above code runs when a form is submitted on /login_page/loginPage.html.
Instead of redirecting the user to either /experiment_page/index.html or back to /login_page/loginPage.html?error=something with a URL parameter, it just reloads the page to /login_page/loginPage.html.
Below is the HTML for this page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/login_page/css/loginStyles.css">
<script src="/login_page/js/labelChange.js" defer></script>
<script src="/login_page/js/redirectSignUp.js" defer></script>
<script src="/login_page/js/loginValidation.js" defer></script>
<title>DigiChit - The Online Chit System | Login</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><h1>DigiChit</h1></li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
<div class="login-info">
<form method="POST" class="form">
<img src="/images/avatar.png" id="avatar" alt="avatar">
<h2>Login</h2>
<div class="input-group">
<input type="email" name="user-email" id="user-email" required>
<label for="user-email">Email</label>
<span id="email-error"></span>
</div>
<div class="input-group">
<input type="password" name="user-password" id="user-password" required>
<label for="user-password">Password</label>
<span id="general-error"></span>
<button type="submit" class="submit-btn" id="login-button">Login</button>
<button type="submit" class="submit-btn" id="sign-up">SignUp</button>
Forgot Password?
</div>
</form>
</div>
</body>
</html>
None of the client side JS scripts are interfering with the process either. I did put console.log()'s in all of the other conditions, and there are no clashes either where many res.writeHead() are running simultaneously.
If anyone can find why this is happening?
I tried to use res.setHeader() and res.statusCode() instead of res.writeHead() to see if anything changed, and nothing happened. I tried using promises instead of async/await and that changed nothing either.
###################################
EDIT (Updated with async/await syntax)
###################################
Here is the server code snippet containing more info on where the function is located.
const server = https.createServer(options, async function (req, res) {
// For form submissions
if (req.method.toLowerCase() === "post") {
let body = '';
req.on("data", (chunk) => {
body += chunk.toString();
})
req.on("end", async function () {
// querystring.decode converts browser query string into an object
const userInfo = querystring.decode(body); // userInfo is an object here
// Status code 302 stands for code of redirection
if (req.url.startsWith("/login_page/loginPage.html")) {
const client = createClient();
await client.connect();
let errVal = "";
async function handleLoginReq(req, res) {
// Below is the query to get user password
let dbQuery = `
SELECT password FROM faculty_information
WHERE email='${userInfo["user-email"]}';
`;
try {
const dbres = await client.query(dbQuery);
if (dbres.rows.length !== 0) {
if (dbres.rows[0].password === '') {
const errVal = 'Please register yourself correctly';
res.writeHead(302, { 'Location': `/login_page/loginPage.html?error=${encodeURIComponent(errVal)}` });
res.end();
client.end();
} else if (userInfo["user-password"] === dbres.rows[0].password) {
res.writeHead(302, { 'Location': '/experiment_page/index.html' });
res.end();
client.end();
} else {
const errVal = 'Incorrect password or email address';
res.writeHead(302, { 'Location': `/login_page/loginPage.html?error=${encodeURIComponent(errVal)}` });
res.end();
client.end();
}
} else {
const errVal = 'Please sign up';
console.log(errVal);
res.writeHead(302, { 'Location': `/login_page/loginPage.html?error=${encodeURIComponent(errVal)}` });
res.end();
client.end();
}
} catch (err) {
res.writeHead(500);
res.end("Internal server error");
client.end();
}
}
await handleLoginReq(req, res);
I'm building a todo list using express handlebars, mongoose, mongodb, google oauth. I'm having trouble with rendering using handlebars. A todo has a mongoose attribute of done. If done true, then a class of complete is applied, which is text-decoration: line-through. The problem is that done is always rendered as true. When I click on the todo, it toggles between true/false in mongodb but doesn't show in hbs.
hbs:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>To Do</title>
</head>
<body>
<div class="container">
<header class="flexContainer">
<h1 class="title main-font center">Welcome {{name}}</h1>
</header>
<form class="center" action="/todos/addTodo" method="POST">
<input type="text" placeholder="Add a To Do" name="todoItem" />
<button type="submit" class="submitButton">
<span>Add Todo</span>
</button>
</form>
<div class="to-do-list flexContainer">
<ul class="task-list center">
{{#each todo}}
<li data-id="{{_id}}">
// Problem is this block of code here.
{{done}} // Added this line just to show the done attribute is toggling between true/false. Status renders here correctly.
{{#if done}} // This if statement doesn't work. All todos are rendered with the complete class.
<span class="complete">{{todo}}</span>
{{else}}
<span class="incomplete">{{todo}}</span>
{{/if}}
<span class="fa fa-trash delete-todo"></span>
</li>
{{/each}}
</ul>
</div>
<h4 class="main-font center">Left to do: {{left}}</h4>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
controller todo.js
const Todo = require("../models/todos");
module.exports = {
getTodos: async (req, res) => {
try {
const todoItems = await Todo.find({ googleId: req.user.googleId }).lean();
const itemsLeft = await Todo.countDocuments({
googleId: req.user.googleId,
done: false,
});
res.render("todos.hbs", {
todo: todoItems,
left: itemsLeft,
name: req.user.firstName,
// done: done, <-- I'm not sure if I have to pass in a variable for done. The variable done seems to work in the hbs file anyways.
});
} catch (err) {
console.error(err);
}
},
addTodo: async (req, res) => {
console.log(req.body);
try {
await Todo.create({
todo: req.body.todoItem,
done: false,
googleId: req.user.googleId,
});
console.log("To do has been added!");
res.redirect("/");
} catch (err) {
console.error(err);
}
},
deleteTodo: async (req, res) => {
try {
await Todo.findOneAndDelete({ _id: req.body.todoId });
console.log("Deleted Todo");
res.json("Deleted Todo");
} catch (err) {
console.log(err);
}
},
markComplete: async (req, res) => {
console.log("markComplete");
try {
await Todo.findOneAndUpdate(
{ _id: req.body.todoId },
{
done: true,
}
);
console.log("complete");
res.json("Marked Complete");
} catch {
console.log(err);
}
},
markIncomplete: async (req, res) => {
try {
await Todo.findOneAndUpdate(
{ _id: req.body.todoId },
{
done: false,
}
);
console.log("Marked Incomplete");
res.json("Marked Incomplete");
} catch {
console.log(err);
}
},
};
main.js:
const deleteBtn = document.querySelectorAll(".delete-todo");
const todoIncomplete = document.querySelectorAll(".incomplete");
const todoComplete = document.querySelectorAll(".complete");
Array.from(deleteBtn).forEach((e) => {
e.addEventListener("click", deleteToDo);
});
Array.from(todoIncomplete).forEach((e) => {
e.addEventListener("click", markComplete);
});
Array.from(todoComplete).forEach((e) => {
e.addEventListener("click", markIncomplete);
});
async function deleteToDo() {
const todoId = this.parentNode.dataset.id;
try {
const response = await fetch("todos/deleteTodo", {
method: "delete",
headers: { "Content-type": "application/json" },
body: JSON.stringify({
todoId: todoId,
}),
});
const data = await response.json();
console.log(data);
location.reload();
} catch (err) {
console.log(err);
}
}
async function markComplete() {
const todoId = this.parentNode.dataset.id;
console.log(todoId);
try {
const response = await fetch("todos/markComplete", {
method: "put",
headers: { "Content-type": "application/json" },
body: JSON.stringify({
todoId: todoId,
}),
});
const data = await response.json();
console.log(data);
location.reload();
} catch (err) {
console.log(err);
}
}
async function markIncomplete() {
const todoId = this.parentNode.dataset.id;
try {
const response = await fetch("todos/markIncomplete", {
method: "put",
headers: { "Content-type": "application/json" },
body: JSON.stringify({
todoId: todoId,
}),
});
const data = await response.json();
console.log(data);
location.reload();
} catch (err) {
console.log(err);
}
}
Routes:
const express = require("express");
const router = express.Router();
const todosController = require("../controllers/todos");
const { ensureAuth, EnsureGuest } = require("../middleware/auth");
router.get("/", ensureAuth, todosController.getTodos);
router.post("/addTodo", todosController.addTodo);
router.put("/markComplete", todosController.markComplete);
router.put("/markIncomplete", todosController.markIncomplete);
router.delete("/deleteToDo", todosController.deleteTodo);
module.exports = router;
According to #76484, it is a string and not boolean. I have fixed it.
Mongoose model schema:
const toDoSchema = new mongoose.Schema({
todo: {
type: String,
required: true,
},
done: {
type: Boolean, // previously string here
required: true,
},
googleId: {
type: String,
required: true,
},
});
I am trying to create an app that allow users to create a videochat event room (by inserting it into the backend's database) and then let other users that have an account on the website to join it. At the moment, the login part is not created, but it is not a problem.
The backend is done in Spring Boot RestAPI (and runs on 8080) and the frontend in nodejs (and runs on 3000). The Peer To Peer system is done using an nodejs server and Peer.js API (and runs on 3001).
The main question is the following:
When the user clicks on an event fetched from the DB, if it is the first one, it becomes host. If not, then it becomes a simple user. When a user enters the room, the host have to refresh the page(like to reconnect to the room) and so does the user, in order to be both connected. Why is so? I will give you the files codes bellow.
The second one: Why this system is not working for Safari and, if it works how to solve it?
server.js:
const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
const { v4: uuidV4 } = require('uuid')
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.get('/', (req, res) => {
var http = require("http")
// BELOW IT IS THE BACKEND CONNECTION. TO TEST YOUR CODE, YOU NEED AN ARRAY THAT HAVE ARRAYS WITH sessionID AND name PARAMS LIKE SO: [{"sessionID":"1231", "name":"event"},{...}].
http.get("http://localhost:8080/events", (resp) => {
let data = "";
resp.on("data", (chunk) => {
data += chunk;
});
resp.on("end", () => {
console.log(data);
res.render('index', {events: data})
});
})
.on("error", (err) => {
console.log("Error: " + err.message);
});
})
app.get('/join', (req, res) => {
res.render('join')
})
app.get('/event', (req, res) => {
res.redirect(`/${uuidV4()}`)
})
app.get('/:room', (req, res) => {
res.render('room', { roomId: req.params.room })
})
io.on('connection', socket => {
socket.on('join-room', (roomId, userId) => {
console.log("User connected: " + userId)
socket.join(roomId)
socket.to(roomId).broadcast.emit('user-connected', userId)
socket.on('disconnect', () => {
socket.to(roomId).broadcast.emit('user-disconnected', userId)
})
})
})
server.listen(3000)
script.js:
const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined, { // user id
host: '/', // path to event
port: '3001' // post
})
const myVideo = document.createElement('video')
myVideo.muted = true
const peers = {}
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
addVideoStream(myVideo, stream)
myPeer.on('call', call => {
call.answer(stream) // HOST SEE OTHERS
const video = document.createElement('video')
call.on('stream', userVideoStream => { // OTHERS SEE HOST
addVideoStream(video, userVideoStream)
})
})
socket.on('user-connected', userId => {
connectToNewUser(userId, stream)
console.log(peers);
})
})
socket.on('user-disconnected', userId => {
if (peers[userId]) peers[userId].close()
})
myPeer.on('open', id => {
socket.emit('join-room', ROOM_ID, id)
})
function connectToNewUser(userId, stream) {
const call = myPeer.call(userId, stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
call.on('close', () => {
video.remove()
})
peers[userId] = call
}
function addVideoStream(video, stream) {
video.srcObject = stream
video.addEventListener('loadedmetadata', () => {
video.play()
})
videoGrid.append(video)
}
room.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template</title>
<script>
const ROOM_ID = "<%= roomId %>"
</script>
<script src="https://unpkg.com/peerjs#1.3.1/dist/peerjs.min.js" defer></script>
<script src="/socket.io/socket.io.js" defer></script>
<script src="script.js" defer></script>
<style>
#video-grid{
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
grid-auto-rows: 300px;
}
video{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div id="video-grid">
</div>
</body>
</html>
index.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<script>
var raw = "<%= events %>"
raw = raw.replaceAll(""", "\"") // DONE BECAUSE WHEN PASSING THE PARAM, INSTEAD OF " IT IS THE " ENTITY
var events = JSON.parse(raw)
window.onload = (event) => {
var table = document.querySelectorAll("#events")[0];
table.innerHTML = '';
for (let index = 0; index < events.length; index++) {
table.innerHTML += "<tr><td><a href='/" + events[index].sessionID + "'>" + events[index].name + "</a></td></tr>"
}
};
</script>
</head>
<body>
<h1>Create Event</h1>
<table id="events">
</table>
</body>
</html>
I'm learning nodejs and I have a project where I want users to post form data which then populates an html table located in public/index.html.
At the moment, I am writing the submitted data to a database collection using the following code:
const mongoose = require('mongoose')
const express = require('express');
const app = express();
const server = app.listen(3000);
app.use(express.json()); // for retrieving form data
app.use(express.static('public'));
mongoose.connect('mongodb://localhost/class', {useNewUrlParser: true})
.then( () => console.log('Connected to class database'))
.catch( () => console.error('Connection attempt to class database failed'))
const personSchema = new mongoose.Schema({
name: String,
date: {type: Date, default: Date.now}
})
const Person = mongoose.model('Person', personSchema)
app.post('/join_class', (req,res) => {
res.send('... joining class')
console.debug(req.body.name)
// document.getElementById('class_table').insertRow(req.body.name)
joinClass(req.body)
})
async function joinClass(data){
console.log(data)
person = new Person({
name: data.name
})
await person.save();
}
My problem is I need the same data to populate an HTML table located in my public/index.html but of course I don't have access to the document object in index.js. The index.html file is below:
<!DOCTYPE html>
<html lang="en">
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js'></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <script src="/client.js"></script> -->
<title>TestING</title>
</head>
<body>
<table id='class_table'>
<tr><th>Class</th></tr>
<tr><td>testing</td></tr>
</table>
</body>
</html>
So, how can I create a mongoDB event/alert such that when the post data is inserted into the database, the same data is made available to index.html where I CAN use the document object to populate the table?
Here's a example in which you can add new Person's and the list in the index.html page should update on a successful insert.
index.js
app.post('/join_class', (req, res) => {
var person = new Person({
name: req.body.name
});
person.save().then((data) => {
res.send(data);
}).catch((err) => {
res.status(500).send(err);
});
})
app.get('/class', (req, res) => {
Person.find({}).then((data) => {
res.send(data);
}).catch((err) => {
res.status(500).send(err);
});
})
index.html (body tag content)
<body>
<div>
Name:<br>
<input type="text" id="name" value="">
<br>
<button onclick="addPerson()">Add Person</button>
</div>
<br/>
<b>Person's in List: </b>
<ul id='class_table'>
</ul>
<script src="/client.js"></script>
</body>
client.js
function listPerson() {
var req = new XMLHttpRequest();
req.open("GET", '/class');
req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
req.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var aList = JSON.parse(req.responseText),
list = document.getElementById("class_table");
list.innerHTML = "";
aList.forEach(e => {
var item = document.createElement("li");
item.innerHTML = e.name;
list.appendChild(item);
});
}
};
req.send();
}
function addPerson() {
var req = new XMLHttpRequest();
req.open("POST", '/join_class');
req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
req.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) { listPerson(); } //Get list of Person on completion
};
var sName = document.getElementById("name").value;
req.send(JSON.stringify({ "name": sName }));
}
//Initially load a list of Person's
listPerson();
I have a cpu intensive task on the server, while its running I want to tell the client of the progress to have a good user experience, I looked into SSE using koa-sse-stream, my problem as stated in the question the client is getting all the message at the end of the response which is wrong, the messages must arrive as they are produced.
/event route handler:
import { isObject } from 'util';
import koarouter from 'koa-router';
import koasse from 'koa-sse-stream';
import ipc from 'node-ipc';
ipc.config.maxRetries = 1;
ipc.config.stopRetrying = true;
ipc.config.retry = false;
ipc.config.appspace = 'alerts_event';
ipc.config.silent = true;
const router = new koarouter();
router.get(
'/event',
koasse(),
async (ctx, next) => {
const { client_id } = ctx.state;
// const sse = new SimpleSSE(ctx, false);
let resolver: () => void;
const p = new Promise(res => {
resolver = res;
});
ipc.serve(client_id, () => {
ipc.server.on('message', (data, socket) => {
if (isObject(data)) {
ctx.sse.send(data);
}
});
ipc.server.on('socket.disconnected', _ => {
ctx.sse.end();
resolver();
});
});
ipc.server.start();
await p;
ipc.server.stop();
await next();
},
async ctx => {
console.log(ctx.res.getHeaders());
},
);
export default router;
client html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h6 id="display"></h6>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const display = document.getElementById('display');
const es = new EventSource('/alerts/v1/event');
es.onmessage = msg => {
console.log('got message from server');
console.log(msg);
display.innerHTML = msg.data;
};
es.onerror = err => {
console.log('got error');
console.log(err);
};
axios({
method: 'get',
url: 'http://localhost:4001/alerts/v1/xlsx',
})
.then(data => {
console.log(data);
es.close();
})
.catch(err => console.log(err));
</script>
</body>
</html>
The problem was with the promise that I wait for to resolve it stopped koa-sse-stream from piping its stream to ctx.body. Once I remove it everything worked as expected.