I'm working on a chat program, I'm still in the beginning of making it but when I try to connect to the server from the console on google chrome it says a reference error io is not defined.
client
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Chat</title>
</head>
<body>
<div class="chat">
<input type="text" class="chat-name" placeholder="Enter your name">
<div class="chat-messages">
<div class="chat-message">
</div>
</div>
<textarea placeholder="type your message" class="chat-textarea"></textarea>
<div class="chat-status">Status: <span>Idle</span></div>
</div>
<script>src="http://localhost:8080/socket.io/socket.io.js"</script>
</body>
</html>
server.js
var mongo = require('mongodb').MongoClient,
client = require('socket.io').listen(8080);
console.log("Server is running on port 8080");
It's because of this:
<script>src="http://localhost:8080/socket.io/socket.io.js"</script>
It's a standard JS import. It should look like this:
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
Related
I am making a socket.io chat app. When I either start the server or make the first connection it spams the callback. The callback does not stop until the server is stopped. I think the error is coming from the html file, but I'm not exactly sure. Thank you for your time.
IO callback:
io.sockets.on('connection', (socket) =>{
connections.push('socket')
console.log('Connection made \n ' + connections.length + ' made')
socket.on('disconnect', function(data){
connections.splice(connections.indexOf(socket), 1)
console.log('Disconnected: %s sockets left', connections.length)
})
})
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<style>
body{
margin: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul class="list-group" id="users"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea id="message" class="form-control"></textarea>
<br>
<input type="submit" class="btn btn-primary" value="Send">
</div>
</form>
</div>
</div>
</div>
<script>
var socket = io()
</script>
</body>
</html>
The problem is on line 2. You are pushing string i.e 'socket' to connections. 'socket' doesnot refer to the socket variable in the argument. You need to push socket not 'socket' because its just combinations of letters not variable
io.sockets.on('connection', (socket) =>{
connections.push(socket) // this line is changed
console.log('Connection made \n ' + connections.length + ' made')
socket.on('disconnect', function(data){
connections.splice(connections.indexOf(socket), 1)
console.log('Disconnected: %s sockets left', connections.length)
})
})
The following code below is supposed to work as follows, the user is suppose to input a URL, Proxy IP & Proxy port once they click "test" it would grab the response code and replace the html h5 "awaiting test" with the new status code text. I made another version of this same exact script and it worked via client but when you run via electron app and click test button all you get is an error how do I get the button "test" to execute the script? Any help would be greatly appreciated.
Index HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simple Tester</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="header">Simple Tester v1.00</h1>
<div class="content">
<div class="proxytesturls">
<h3 id="url" style="color:#4a04de;" >Site URL:</h3>
<div class="ui large input">
<input type="text" placeholder="Google.com" id="siteurltext">
</div>
</div>
<div class="proxyip">
<h3 id="ip" style="color:#4a04de;">Proxy IP:</h3>
<div class="ui large input" id="proxyinput">
<input type="text" placeholder="1.1.1.1" id="proxyipinput">
</div>
</div>
<div class="proxyport">
<h3 id="port" style="color:#4a04de;">Proxy Port:</h3>
<div class="ui large input">
<input type="text" placeholder="8080" id="proxyportinput">
</div>
</div>
<input type="button" id="btnclick" value="test" onclick="pingProxy();">
<div class="ui raised segment" id="logger">
<h2 style="color:#4a04de;" id="logstext">Logger</h2>
<h5 id="awaitingtest">Awaiting test...</h5>
</div>
</div>
<script src="tester.js" type="text/javascript"></script>
</body>
</html>
tester.js
const request = require('request');
var pingProxy = require('ping-proxy');
var url = document.getElementById("siteurltext").value;
var proxyip = document.getElementById("proxyipinput").value;
var proxyport = document.getElementById("proxyportinput").value;
pingProxy({
proxyHost: proxyip,
proxyPort: proxyport,
proxyTestUrl: 'https://', url
},
function (err, options, statuscode) {
if (statuscode == 407) {
document.getElementById('awaitingtest').innerHTML = ('Status: Proxy Authentication Required');
}
if (statuscode == 200) {
document.getElementById('awaitingtest').innerHTML = ('Status: Valid Proxy!');
}
if (statuscode == 403) {
document.getElementById('awaitingtest').innerHTML = ('Status: Banned Proxy!');
}
if (statuscode == 401) {
document.getElementById('awaitingtest').innerHTML = ('Status: Unauthorized!');
}
}
);
Main.js
const electron = require('electron')
const {app, BrowserWindow} = require('electron')
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadFile('index.html')
}
app.on('ready', createWindow)
Errors:
Uncaught TypeError: callback is not a function
at pingProxyAsync (C:\Users***********\proxytester\node_modules\ping-proxy\ping-proxy.js:21)
at HTMLInputElement.onclick (index.html:37)
You may need to concatenate the proxyTestUrl. Replace the comma with a plus sign.
pingProxy({
proxyHost: proxyip,
proxyPort: proxyport,
proxyTestUrl: 'https://' + url
},
JavaScript
var app= angular.module('myApp',['firebase']);
function MyController($scope,$firebase){
var ref= new Firebase('https://alpha-db.firebaseio.com/');
$scope.messages= $firebase(ref);
$scope.addMessage=function(e) {
if(e.keyCode !=13) return;
$scope.messages.$add({from: $scope.name,body: $scope.msg});//funtion not working....
$scope.msg ="";
}
}
errors occured are ://error:angularfire.min.js:1 Uncaught ReferenceError: Firebase is not defined..
angular.min.js:84 Error: [$injector:unpr] http://errors.angularjs.org/1.2.6/$injector/unpr?p0=%24firebaseProvider%20%3C-%20%24firebase
at Error (native)
HTML
<html ng-app="myApp">
<head>
<script src='lib/angular.min.js'></script>
<script src='lib/angularfire.min.js'></script>
<script src='lib/firebase.js'></script>
<script src='js/app.js'></script>
<script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"> </script>
<link rel='stylesheet' type='text/css' href='css/main.css'>
</head>
<body ng-controller='MyController'>
<h1>CHAT APP </h1>
<div class="list-messages" id="listMessages">
<ul>
<li ng-repeat='msg in messages'><em>{{msg.from}}</em>:{{msg.body}} </li>
</ul>
</div>
<div class="new-message" id="newMessage">
<input type="text" ng-model="name" placeholder="name..">
<input type="text" ng-model="msg" ng-keydown="addMessage($event)" placeholder="Message..">
</div>
</body>
</html>
You have misplaced the order of references, you should load firebase.js before loading angularfire.min.js. Change the order as
<script src='lib/angular.min.js'></script>
<script src='lib/firebase.js'></script>
<script src='lib/angularfire.min.js'></script>
<script src='js/app.js'></script>
When I call a get request, I am getting the ngRepeat:Dupes error because what my get request is getting me from a console.log shows me the hard-coded html code from the page itself.
Here is the console.log
mainController.js:10 <!DOCTYPE>
<html ng-app="myApp">
<head>
<title>Social Network Tutorial</title>
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="css/stylesheet.css"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" ng-controller="navigationController">
<div class="container">
<div ng-show="!loggedIn">
<input type="text" ng-model="login.email">
<input type="password" ng-model="login.password">
<button ng-click="logUserIn()">Login</button>
<a ui-sref="signUp">Create An Account</a>
</div>
<div ng-show="loggedIn">
<a ui-sref="editProfile">Edit Profile</a>
<a ng-click="logOut()">Logout</a>
</div>
</div>
</nav>
<div ui-view></div>
<!--Libraries-->
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-ui-router/angular-ui-router.min.js"></script>
<script type="text/javascript" src="libs/ng-file-upload/ng-file-upload.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<!--Controllers-->
<script type="text/javascript" src="partials/signup/signupController.js"></script>
<script type="text/javascript" src="partials/navigation/navigationController.js"></script>
<script type="text/javascript" src="partials/profile/editProfileController.js"></script>
<script type="text/javascript" src="partials/main/mainController.js"></script>
</body>
</html>
My client side controller shows the following code:
var getTweets = function(initial){
$http.get('/tweets').then(function(response){
if(initial){
$scope.tweets = response.data;
} else {
$scope.incomingTweets = response.data;
};
});
};
getTweets(true);
and my server side api function is the following:
router.get('/tweets', tweetController.getTweets);
lastly the server side controller is the following:
module.exports.getTweets = function(req,res){
console.log("works");
Tweet.find({}).sort({date: -1}).exec(function(err, data){
if(err) {
throw err;
res.json({status: 500});
} else {
console.log(data);
res.json(data);
};
});
};
What did I do wrong?
The console.log on the server side doesn't show "works" meaning the request didn't even reach the server but for some reason the client side got a response.
The server probably returned an error page. Inspect the html that was returned to see what's going on, it probably contains some information.
Debug your app by executing the url /tweets in the browser or Postman (or use Chrome dev tools). If the server doesn't return json, either the url is wrong or something is wrong server side. That eliminates a bug in the client side.
Im making a simple form with Telerik Appbuilder HTML5 + javascript that takes a users input and logs it to the console when they click the submit button.
ClientClass.js:
function Client() {
this.username = "username",
this.password = "Password",
this.printUsername = function() {
this.username=$("#Username").val()
console.log(this.username);
};
};
Home.html:
<div data-role="view" data-title="Login" data-layout="main" data-model="APP.models.login">
<script src="../scripts/ClientClass.js"></script>
<h1 data-bind="html: title"></h1>
<script src="../scripts/ClientClass.js"></script>
<script>
function printUsername() {
var client = new client();
client.printUsername();
}
</script>
<ul data-role="listview" data-style="inset">
<li>
<label>Username
<input type="text" value="" id="Username" />
</label>
</li>
<li>
<label>Password
<input type="password" value="" />
</label>
</li>
<li>
<label>
<button onclick="printUsername()" type="button">Submit</button>
</label>
</li>
</ul>
</div>
Index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ClientClass.js"></script>
</head>
<body>
<script src="scripts/ClientClass.js"></script>
<script src="scripts/ClientClass.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!-- application views will be rendered here -->
<label>
<input type="password" value="password" />
</label>
<div data-role="footer">
<div data-role="tabstrip">
Home
Settings
Contacts
</div>
</div>
</div>
</body>
</html>
It says in the console:
uncaught type error: undefined is not a function.
Then it says it is at index.html#views/home.html:1 and when I click that and it takes me to sources panel of the debugger. And it says the source is index.html and it says:
(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {printUsername() }; }}}})
Does anyone see any issues with my html or javascript? Or the way I import the script? Thanks
you are declaring your client as an object, not as a "class". So using new on your object doesn't make quite sense.
So it's up to you or you keep your object and simply remove:
var client = new client();
or you use a class
function Client(){}