I am building a real-time chat application using Node.js and socket.io.
I have built two js files - index.js for handling socket connection server requests and client.js for the client-side code. When I include console.log, I cannot get the output in the command line.
index.html
<!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">
<!--connects server and client-->
<script src="http://localhost:8000/socket.io/socket.io.js"></script>
<script src="./js/client.js"></script>
<link rel="stylesheet" href="./css/style.css">
<title>NiChat App</title>
</head>
<body>
<!--Navbar-->
<nav>
<img class="logo" src="logo.png" alt="Log">
</nav>
<!--Container for the chat app-->
<div class="container">
<div class="message" id="m-left">Palpatine: Did you ever hear the tragedy of Darth Plagueis the wise?</div>
<div class="message" id="m-right">Anakin: No.</div>
</div>
<!--Send box-->
<div class="send">
<form id="send-container" action="#">
<input type="text" name="msgInp" id="msgInp">
<button class="btn" type="submit">Send</button>
</form>
</div>
</body>
</html>
index.js
//file which will host the socket io
const io = require("socket.io")(8000)
const users = {};
io.on('connection', (socket) => { //io.on listens to several socket connections
console.log('a user connected');
socket.on('new-user-joined', Name => { //accepts an event 'new-user-joined'
console.log('New user', Name)
users[socket.id] = Name;
socket.broadcast.emit('user-joined', Name)
});
socket.on('send', message => {
socket.broadcast.emit('receive', { message: message, name: users[socket.id] })
});
})
client.js
const socket = io('http://localhost:8000');
const form = document.getElementById('send-container');const msgInp = document.getElementById('msgInp');const msgContainer = document.querySelector(".container")const Name = prompt("Enter your name to join");socket.emit('new-user-joined', Name)
The client.js file is within the js folder.
The index.js is within the node_modules folder.
Please help me out.
I tried putting console.log at different places of both the js files but am unable to produce an output.
This answer provided the solution to my question.
Here is the link
Adding this { transports: ['websocket'] } inside the io makes the problem go away.
This question already has an answer here:
Link index.html client.js and server.js
(1 answer)
Closed 1 year ago.
OVERVIEW
I am trying to create a Dapp with Ethereum and the course I am following (Udacity Blockchain Nanodegree Program) is asking us to create a HTML page from where a User using the page's buttons can interact with the Smart Contract. I am a beginner with HTML and anything related to hosting servers and routing, etc. So, I created two really basic functions in the Javascript file to practice how to call them and later on replace it with the correct web3 functions.
PROBLEM
The thing is that I've used a separated Javascript file for my functions and when I try to call those functions from the HTML file it doesn't work.
I've read that the main reason is that the functionFile.js is not in the server.js and it should have a route.
QUESTIONS
Why my code doesn't work? Could you explain it so that a beginner like me can understand it?
What is the code that I need to implement in server.js that will solve these errors and make the page work as intended?
PROJECT DIRECTORY STRUCTURE
SERVER.JS CODE
const http = require('http');
const fs = require('fs');
const PORT = 8080;
fs.readFile('./index.html', function (err, html) {
if (err) throw err;
http.createServer(function (request, response) {
response.writeHeader(200, { "Content-Type": "text/html" });
response.write(html);
response.end();
}).listen(PORT);
});
TEST.JS CODE
function letMeCallYou() {
alert("Bazinga!!! you called letMeCallYou");
}
function myfunction() {
document.write("welcome to Javatpoint");
}
INDEX.HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<title>StarNotary DAPP Front End</title>
<meta name="viewport" content="width=device-width, initial-scale=1"
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<style>
input {
display: block;
margin-bottom: 12px;
}
</style>
<body>
<h1>StarNotary DAPP</h1>
<h3 id='name'>Star Name: </h3>
<hr>
<h3 id='owner'>Star Owner: </h3>
<hr>
<h3>Claim Star</h3>
<hr>
<h3>TEST</h3>
<button id="test" onclick="letMeCallYou()">Testing External Javascript library</button>
<script src="scripts/test.js"></script>
<script>letMeCallYou();</script>
</body>
</html>
ERROR SCREENSHOT
So I managed to solve my problem after modifying the server.js file folder. Here is my updated project file architecture with the updated server.js code.
PROJECT ARCHITECTURE
SERVER.JS CODE
const express = require('express');
const app = express();
// THIS LINE WAS THE SOLUTION TO THE PROBLEM
app.use(express.static('./public'));
app.get('/', (req, res) =>{
res.setHeader('Content-type', 'text/html');
res.sendFile('./public/index.html');
});
app.listen(8080, () =>{
console.log('APPLICATION INITIALIZED....');
});
INDEX.HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<title>StarNotary DAPP Front End</title>
<meta name="viewport" content="width=device-width, initial-scale=1"
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<style>
input {
display: block;
margin-bottom: 12px;
}
</style>
<body>
<h1>StarNotary DAPP</h1>
<h3 id='name'>Star Name: </h3>
<hr>
<h3 id='owner'>Star Owner: </h3>
<hr>
<h3>Claim Star</h3>
<hr>
<h3>TEST</h3>
<button id="test" onclick="letMeCallYou()">Testing External Javascript library</button>
<script src='./scripts/app.js'></script>
</body>
</html>
EXECUTION SCREENSHOT
I'm working on freecodecamp voting app (https://www.freecodecamp.com/challenges/build-a-voting-app) using MEAN stack. I've completed back end part(does not include user authentication as of now).
Currently i'm focusing on front end part. I've created a html page which displays the list of all the polls. Now ideally speaking, when i click on a particular poll, i should be redirected to a template html which displays the options as well as the vote count for each option. For this purpose i've used ng-route library. But instead of getting the html page, i'm getting json array from node server.
Here are my code snippets:
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/routes.js"></script>
<script type="text/javascript" src="js/controllers/poll-read-controller.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body class="background" ng-app="votingApp">
<!-- div for button group><!-->
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="home">Home</button>
<button type="button" class="btn btn-default" id="login">Log In</button>
</div>
<!-- div for header><!-->
<div class='header'>FreeCodeCamp Voting App</div>
<!-- div for voting list><!-->
<div ng-controller="VotingListController as v">
<ul class='list'>
<li class='question row' ng-repeat='poll in v.polls'><a ng-href='/{{poll.question}}'>{{poll.question}}</a></li>
</ul>
</div>
<poll_view></poll_view>
</body>
</html>
app.js
(function(){
// Declare app level module which depends on views, and components
var ang = angular.module('votingApp', ['ngRoute']);
ang.controller("VotingListController",['$scope','$http','$location',function($scope,$http,$location){
var list = this;
$http.get('https://fcc-voting-app-ajinkya009.c9users.io/list').success(function(data){
list.polls=data;
});
}]);
})();
routes.js
(function(){
// Declare app level module which depends on views, and components
var ang = angular.module('votingApp')
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/:question',{
templateUrl:'/../template/poll_view.html',
controller:'pollReadController',
controllerAs:'pollRead'
});
}]);
})();
poll-read-controller.js
(function(){
angular.module('votingApp')
.controller('pollReadController',function($http,$routeParams){
var controller = this;
$http.get('https://fcc-voting-app-ajinkya009.c9users.io/'+$routeParams.question).success(function(data){
controller.vote = data;
});
});
})();
poll_view.html
<div ng-repeat="vote in pollRead.vote">
<ol>
<li>
<p>Option:{{vote.option}}</p>
<p>Count:{{vote.count}}</p>
</li>
</ol>
</div>
and here's a sample json data I'm getting instead of html page:
[
{
_id: "57d90d6bbb1828e112ff70dc",
question: "google or yahoo",
__v: 0,
vote: [
{
option: "google",
count: 2,
_id: "57d90d6bbb1828e112ff70de"
},
{
option: "yahoo",
count: 0,
_id: "57d90d6bbb1828e112ff70dd"
}
]
}
]
server/index.js
var express = require('express');
var path = require('path');
var bodyParser = require("body-parser");
var app = express();
var mongoose = require('mongoose');
var polls = require('./models/poll');
var methodOverride = require('method-override');
var port = 8080;
var ip = process.env.IP;
var db = mongoose.connect('mongodb://localhost/meanapp');
var poll = db.model('poll',polls);
mongoose.connection.once('open', function() {
console.log('Listening on port: '+ port);
app.use(express.static(path.join(__dirname + "/../client")));
app.use(bodyParser.json());
app.set('view engine','html');
//app.use(express.logger('dev'));
//app.use(express.methodOverride());
//app.use(app.router);
// Add Middleware necessary for REST API's
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(methodOverride('X-HTTP-Method-Override'));
// CORS Support
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
app.get('/list',function(req,res){
console.log('received')
poll.find({},function(err,list){
if(err)throw err;
res.json(list);
});
});
app.get('/:question',function(req,res){
poll.find({question: req.params.question},function(err,data){
if(err)throw err;
res.json(data);
});
});
app.post('/question',function(req,res){
var p = new poll({question:req.body.question,vote:req.body.vote});
p.save(function(error){
if(error){
throw error;
}
res.json(p);
});
});
app.put('/:question',function(req,res){
poll.update(
{
"question": req.params.question,
"vote.option":req.body.option
},
{$inc:{"vote.$.count":1}},
function(error){
if(error)throw error;
}
);
res.json(poll);
});
app.put('/question/update/:id',function(req,res){
poll.update(
{"_id":req.params.id},
{"$set":{"question":req.body.question,"vote":req.body.vote}},
function(error){
if(error)throw error;
}
);
});
app.listen(port);
});
Here's link to my project: https://ide.c9.io/ajinkya009/fcc_voting_app
P.S. I'm learning MEAN stack since two months(quite beginner), so if you find any mistake in the code,no matter how trivial, please let me know.
Finally solved it!! I had not added 'fragment identifier' (#) in the anchor href link in index.html. Along with this, I had to tweak some of the other code as well.
Here is the updated and working code:
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/routes.js"></script>
<script type="text/javascript" src="js/controllers/poll-read-controller.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body class="background" ng-app="votingApp">
<!-- div for button group><!-->
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="home">Home</button>
<button type="button" class="btn btn-default" id="login">Log In</button>
</div>
<!-- div for header><!-->
<div class='header'>FreeCodeCamp Voting App</div>
<!-- div for voting list><!-->
<div ng-controller="VotingListController as v">
<ul class='list'>
<li class='question row' ng-repeat='poll in v.polls'><a ng-href='#/list/{{poll.question}}'>{{poll.question}}</a></li>
</ul>
</div>
<div class='container' ng-view></div>
</body>
</html>
client/app.js
(function(){
// Declare app level module which depends on views, and components
var ang = angular.module('votingApp', ['ngRoute']);
ang.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
$routeProvider
.when('/list/:question',{
templateUrl:'/../template/poll_view.html',
controller:'pollReadController',
controllerAs:'pollRead'
});
//$locationProvider.html5Mode(true);
}]);
ang.controller("VotingListController",['$scope','$http','$location',function($scope,$http,$location){
var list = this;
$http.get('https://fcc-voting-app-ajinkya009.c9users.io/list').success(function(data){
list.polls=data;
});
}]);
ang.controller('pollReadController',function($scope,$http,$routeParams){
var list = this;
alert($routeParams.question);
$http.get('/list/'+$routeParams.question).success(function(data){
list.polls = data;
})
.error(function(){
alert("An unexpected error occured!");
});
});
})();
client/poll_view.html
<div class='container' ng-repeat="poll in pollRead.polls">
<h2>{{poll.question}}</h2>
<div ng-repeat = "v in poll.vote">
<ul>
<li>
<p>Option:{{v.option}}</p>
<p>Count:{{v.count}}</p>
</li>
</ul>
</div>
</div>
server/index.js
var express = require('express');
var path = require('path');
var bodyParser = require("body-parser");
var app = express();
var mongoose = require('mongoose');
var polls = require('./models/poll');
var methodOverride = require('method-override');
var port = 8080;
var ip = process.env.IP;
var db = mongoose.connect('mongodb://localhost/meanapp');
var poll = db.model('poll',polls);
mongoose.connection.once('open', function() {
console.log('Listening on port: '+ port);
app.use(express.static(path.join(__dirname + "/../client")));
app.use(bodyParser.json());
app.set('view engine','html');
//app.use(express.logger('dev'));
//app.use(express.methodOverride());
//app.use(app.router);
// Add Middleware necessary for REST API's
//app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
//app.use(methodOverride('X-HTTP-Method-Override'));
// CORS Support
/*app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});*/
app.get('/list',function(req,res){
console.log('received');
poll.find({},function(err,list){
if(err)throw err;
res.json(list);
});
});
app.get('/list/:question',function(req,res){
poll.find({question: req.params.question},function(err,data){
if(err)throw err;
res.json(data);
});
});
app.post('/question',function(req,res){
console.log(req.body);
console.log(req.body.vote);
//res.json({success:"200"});
var o = req.body.option;
var c = req.body.count;
/*var p = new poll(
{question:req.body.question,vote:{option,count}}
);*/
var p = new poll({question:req.body.question,vote:req.body.vote});
p.save(function(error){
if(error){
throw error;
}
res.json(p);
});
});
app.put('/:question',function(req,res){
poll.update(
{
"question": req.params.question,
"vote.option":req.body.option
},
{$inc:{"vote.$.count":1}},
function(error){
if(error)throw error;
}
);
res.json(poll);
});
app.put('/question/update/:id',function(req,res){
console.log(req.params.id);
console.log(req.body);
poll.update(
{"_id":req.params.id},
{"$set":{"question":req.body.question,"vote":req.body.vote}},
function(error){
if(error)throw error;
}
);
});
app.listen(port);
});
Been trying for a couple hours to get Angular with use Routs I've created. Finally decided to try using Express and so I set up a simple server.js file to run as a stand along server.
But nothing works and I keep getting the same error
Uncaught SyntaxError: Unexpected token <
All my files are in the public dir of my app like so
server.js
/public
main.html
/lib
angular/
bootstrap/
/views/
search.html
list.html
/scripts
app.js
controllers.js
My server.js file is pretty simple
var express = require('express'),
app = express();
app.use(express.static('/public'))
.get('*',function(req,res){
res.sendfile('./public/main.html');
})
.listen(3000);
Here's my app.js / routes
angular.module("myApp", ['ngRoute','ui.bootstrap','ui-leaflet'])
.config(function($routeProvider,$locationProvider){
$routeProvider.when('/search',{
controller: 'searchCtrl',
templateUrl: 'views/search.html'
})
.when('/list',{
controller: 'listCtrl',
templateUrl: 'views/list.html'
})
.otherwise({
redirectTo: '/search'
});
$locationProvider.html5Mode(true);
});
Finally here is my main.html
<!DOCTYPE html>
<base href="/">
<html ng-app="myApp" lang="en">
<head>
<meta charset="UTF-8">
<title>TEST APP</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h3>MY APP</h3>
</div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
</body>
</html>
Try serving your html file like this:
var express = require('express');
var app = express();
var path = require('path');
//middleware to resolve root directory
app.use("/", express.static(path.resolve(__dirname)));
//this is assuming index.html and server.js are in the same directory
app.get('/', function(req, res) {
res.sendFile('/index.html');
});
I want to use my original html in node.js
This is simple hsh.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> How to Say Hello </title>
<link type="text/css" href="./sys/lib/css/uniform.default.css" rel="stylesheet" media="screen" />
<link type="text/css" href="./sys/lib/css/jquery-ui.1.10.3.smoothness.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="./sys/lib/scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./sys/lib/scripts/jquery-ui.1.10.3.min.js"></script>
<script type="text/javascript" src="./sys/lib/scripts/myhello.js"></script>
<script>
$(function(){
$( "#sayDate" ).datepicker();
});
function resetHello()
{
document.getElementById("hello").value = "";
document.getElementById("sayDate").value = "";
}
</script>
</head>
<body>
<form name="syaHello">
How to say hello in your contry?<br>
<input type="text" id="hello" value="">
<INPUT id=sayDate style="WIDTH: 100px" name=sayTime>
</form>
<div class="docBtn_list">
<input type="button" value="View Hello" onclick="javascript:howHello();" />
<input type="button" value="Reset" onclick="resetHello();" />
</div>
</body>
</html>
myhello.js
function howHello()
{
alert(document.getElementById("hello").value + " " +
document.getElementById("sayDate").value);
}
and nodeSev.js
var http = require('http'),
fs = require('fs');
fs.readFile('./hsh.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(3000);
});
But this is not working about jquery and howHello java script.
I don't want change html and js too much and don't use express package.
Before answering your question...
Your question aims at serving static web content.
You should install 'express' (a node module based on famous 'connect', which can be used for this as well but lacks other features) and configure it to serve your file from a static directory:
var express = require('express');
var app = express.createServer();
/* configure your static directory */
app.configure(function(){
app.use(express.static(__dirname + '/static'));
});
/* on request, send index.html */
app.get('/', function(req, res){
res.sendfile(__dirname + '/index.html');
});
app.listen(3000);
Now that you have express installed, take a look at Jade.
You can then process received requests and dynamically serve content. That's state of the art - serving pre-coded html is 90's-style.