I'm setting up a new socket.io project and i can't load the file "socket.io.js"
I have 2 files:
the server file (index.js)
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.send('<h1>Hello world</h1>');
});
io.on('connection', function(socket){
console.log('a user connected');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
the client file:
<!doctype html>
<html>
<head>
<title>Socket.IO </title>
</head>
<body>
<script src="[HOST DOMAIN]:3000/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
</body>
</html>
I call the client file from path "[HOST DOMAIN]/en/test" and socket.io.js is returning 404 not found.
what could be the error? should i indicate that I am in "/en/test"?
Thanks for help!
Related
I have a problem while loading views using ui-router in cordova ios build. I'm using cordova angular in my application. The ui-router working fine in android build but while i'm running the app using cordova emulate ios the views not getting loaded.
here is my code looks like,
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Awesome material design app</title>
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
<link rel="stylesheet" href="lib/ionic/css/ionicons.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ngPercentDisplay.css">
<script src="node_modules/angular/angular.js"></script>
<script src="lib/angular-ui-router.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"> </script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="node_modules/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="lib/angular-touch.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="js/controller.js"></script>
<script src="js/router.js"></script>
</head>
<body ng-app="YourApp">
<div layout="column">
<ng-include src="'templates/partials/sidebar.html'" style="top:0px" ng-if ="lang =='ENGLISH'"></ng-include>
<ng-include src="'templates/partials/sidebar-right.html'" style="top:0px" ng-if ="lang =='ARABIC'"></ng-include>
<div ui-view></div>
</div>
</body>
</html>
The router.js file looks like below
app.config(['$urlRouterProvider', '$stateProvider','$compileProvider', function($urlRouterProvider, $stateProvider,$compileProvider) {
$urlRouterProvider.otherwise('/signup');
$stateProvider.state('signup', {
url:'/signup',
templateUrl: 'templates/sign-up.html',
controller: 'signupCtrl'
});
}]);
The index.js file looks like
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
controller.js looks like below,
'use strict';
var app = angular.module( 'YourApp', [ 'ngMaterial','ui.router']);
app.controller('myCtrl',['$scope',function ($scope) {
$scope.detail={};
$scope.detail.name="MyApp";
$scope.detail.desc="welcome to my app!";
}]);
Please help me if any one knows about this issue. Thanks in advance.
I went exactly by the instructions for integrating google sign-in:
https://developers.google.com/identity/sign-in/web/sign-in#specify_your_apps_client_id
sign-in works, but sign-out gives a javascript error in the line:
var auth2 = gapi.auth2.getAuthInstance();
The error is:
gapi.auth2 undefined
I include the google platform library as instructed:
<script type='text/javascript' src='https://apis.google.com/js/platform.js' async defer></script>
Why does it not work?
Are signIn and signOut used on the same page?
Div g-signin2 loads and inits gapi.auth2 so it should work as long as those are on the same page.
In case signOut is on separate page, you should manually load and init gapi.auth2 library.
Full example (you have to replace YOUR_CLIENT_ID with your actual client_id):
<html>
<head>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
</head>
<body>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
function onLoad() {
gapi.load('auth2', function() {
gapi.auth2.init();
});
}
</script>
Sign out
<script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script>
</body>
</html>
Chat does work on localhost, doesn't work on Amazon EC2
index.html
<html>
<head>
<title> Chat with socket.io and node.js</title>
<style>
#chat {
height:500px;
}
</style>
<head>
<body>
<h1 style="text-align:center;">CHAT</h1>
<div id="chat"></div>
<form id="send-message">
<input size="35" id="message"></input>
<input type="submit"></input>
</form>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function(){
var socket = io.connect();
var $messageForm = $('#send-message');
var $messageBox = $('#message');
var $chat = $('#chat');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $messageBox.val());
$messageBox.val('');
});
socket.on('new message', function(data) {
$chat.append(data + '<br />');
});
});
</script>
</body>
</html>
app.js
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server);
server.listen(3333);
app.get('/', function(req, res){
res.sendfile(__dirname + '/index.html');
});
io.sockets.on('connection', function(socket){
socket.on('send message', function(data){
io.sockets.emit('new message', data);
});
});
chat example is taken from http://www.youtube.com/watch?v=pNKNYLv2BpQ
node -v
v0.10.13
rails '3.2.13'
when I run -> node app.js
I get -> info - socket.io started
& when I try to access my_ip:3333 -- no luck.
Any help or hint will be really appreciated.
Solution :) http://docs.aws.amazon.com/opsworks/latest/userguide/layers-server-nodejs.html
"Node.js Application Configuration
The main file run by Node.js must be named server.js and reside in the root directory of the deployed application.
The Node.js application must be set to listen on port 80 (or port 443, if applicable)."
I downloaded this piece of code to test try out some stuff but somehow it doesn't seem to be able to read the xml although it is in the same folder. Any idea how to get it to work??
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<title>Reading XML with jQuery</title>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "sites.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('site').each(function(){
var id = $(this).attr('id');
var title = $(this).find('title').text();
var url = $(this).find('url').text();
$('<div class="items" id="link_'+id+'"></div>').html(''+title+'').appendTo('#page-wrap');
$(this).find('desc').each(function(){
var brief = $(this).find('brief').text();
var long = $(this).find('long').text();
$('<div class="brief"></div>').html(brief).appendTo('#link_'+id);
$('<div class="long"></div>').html(long).appendTo('#link_'+id);
});
});
}
});
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>Reading XML with jQuery</h1>
</div>
</body>
</html>
Try running it through a web server like Apache. I don't believe that XmlHttpRequest is reliable across browsers against the local file system. Technically it is meant to make HTTP requests to a web server.
See this SO answer
https://stackoverflow.com/a/5469527/1649198
I'm trying to create a PhoneGap application for Android and iOS.
So far I've been succeeding to the extent that I've been able to access the LocalFileSystem on Android 2.2 and up.
On iOS (5 and 6), I've had no such luck unfortunately.
The FileReader and FileWriter examples fail to work as well.
I've spent some time debugging this using jsconsole.com and as far as I can tell window.requestFileSystem and window.webkitRequestFileSystem are both undefined.
Which would explain why I have issues with the file system.
I'm using Cordova 2.2.0 and XCode 4.5 for the iOS part.
Both the example and my own code is working on Android.
If any of you have any advice I'd really appreciate the positive effect it will have on my mental health!
Edit:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
</head>
<body>
<div class="app">
click!
</div>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script src="http://jsconsole.com/remote.js?secret-debug-key"></script>
<script type="text/javascript" src="js/filesystem.js"></script>
<script type="text/javascript">
var myfs;
document.addEventListener('deviceready', function() {
myfs = new FS();
myfs.initializeFileSystem();
});
</script>
</body>
</html>
filesystem.js:
var FS = (function()
{
var self = {};
self.initializeFileSystem = function()
{
window.requestFileSystem = window.webkitRequestFileSystem || window.requestFileSystem;
window.requestFileSystem(1, 0, self.gotFS, self.fail);
};
self.gotFS = function (fileSystem)
{
window.rootFS = fileSystem.root;
//create our cache directory if it does not exist
var entry = fileSystem.root;
entry.getDirectory("tempdirectory", {create: true, exclusive: false}, function() {console.log("directory already present or created");}, function(error) {console.log("Error creating directory " + error.code);});
};
self.fail = function()
{
console.log("requestFileSystem failed");
};
self.downloadImage = function(url, fileName, callback)
{
var ft = new FileTransfer();
var filename = fileName;
var callback = callback;
ft.download(
url,
window.rootFS.fullPath + "/" + filename,
function(entry)
{
if(callback!= undefined)
{
callback(entry);
}
},
function(error)
{
console.log("download error: " + error.code);
}
);
};
self.clicked = function()
{
//random test URL
var url = "http://www.embeddedpeople.dk/_/rsrc/1301663383918/home/ydelser/konsulentydelser/test/test.png?height=400&width=350";
self.downloadImage(url, "test.png", function(){console.log("download succesful");$('body').append('<img src="file:///data/data/dk.attention8.filesystem/test.png" />');});
return false;
};
return self;
}
);
This works on Android, after the click has been made, the file is downloaded and an img tag containing a reference to the path of the downloaded image should be inserted in the DOM.
I'm aware that this path isn't valid on iOS nor the correct one on a device with an SDcard, but the issue is occuring before this img tag is added.
This image should show that the javascript code works in Android ( taken of the Android Emulator ).
If you need further clarification or have questions I'll provide them as fast as I can.
Thank you for your time!
I've finally resolved this issue.
I've had a common "www" folder that I'd transfer from my Android to my iOS project.
I've naively overwritten the entire www folder, and this has been causing the problem.
The cordova.js file in the root of the www folder is platform specific, and I had thusly used the Android cordova.js file in my iOS project, which obviously wasn't working.
Thank you to fmertz on #phonegap for pointing me in the right direction.