io.connect not working on local html page - javascript

I have an html page that needs to connect to a node.js server via socket.
The code works when in an html page that's hosted on my EC2 however, it's not working when I have it on an HTML page on my machine. Here's my code:
<script type="text/javascript src="http://54.213.92.113:8080/socket.io/socket.io.js"></script>
<script type="text/javascript src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var socket = io.connect('http://54.213.92.113:8080');
$(document).ready(function(){
socket.on('jqplot', function(sentdata){
alert(sentdata);
});
});
</script>
I have no idea why this isn't working...I feel like i've don't everything correctly!
The javascript works when I comment out the line var socket = io.connect('http://54.213.92.113:8080');

Is 54.213.92.113 external EC2 address?
Is 8080 port of instance(security group) opened?
ping - use external or ElasticIP
nmap(I check, it inaccessible) - add 8080 to instance assigned security group

Related

Nodejs web application for mqtt using jquery

I want to design a web app capable of publishing message on mqtt broker when a switch state is changed or a form is filled and submitted etc. I am able to publish the message using mqtt library on node. I am also able to detect the normal switch state when it is changed on html page using javascript and jquery. Now I want to call the mqtt publish function from node app here. How will I do it?
Here is the normal html file switch.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="switch.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="switch.js"></script>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch" id = "switchLabel1">
<input type="checkbox" id = "switch1">
<div class="slider round"></div>
</label>
</body>
</html>
The javascript that detects the switch state switch.js
$( document ).ready(function() {
$('#switch1').attr('checked', true);
$('#switch1').click(function(){
if($(this).prop("checked") == true){
console.log("switch1 is checked.");
}
else if($(this).prop("checked") == false){
console.log("switch1 is unchecked.");
}
});
});
The Nodejs app publishing message to mqtt index.js. MQTT library is installed using npm.
var mqtt = require('mqtt')
var client = mqtt.connect('mqtt://192.168.15.3')
client.on('connect', function () {
client.subscribe('mqtt_node_subscribe')
client.publish('mqtt_node_publish', 'Hello mqtt')
})
client.on('message', function (topic, message) {
// message is Buffer
console.log(message.toString())
})
What I want to do is call client.publish("topic", "message") when instead of console.log in switch.js
When I do that it says client not defined, so I tried merging both js and running node, it says $ not defined. I tried including jquery in node app, it says window missing. So I need a method to serve this web application using node and use jquery etc as is.
MQTT over a websocket is a difficult approach. The same work can be done using socket.io. It is a js based library giving capabilities of topics publish and subscribe messages. Give it a try.

How do i remote include a javascript file in Titanium appcelerator and use the functions of that file?

I am required to remotely include into my appcelerator project, a javascript file available at a particular link, and use the function declared in that file to process some data.
What i would like to achieve is something like the following in html -
<script src="https://some-link/Data.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var testVariable = someMethod(localdata);
});
//use testVariable as necessary
</script>
//someMethod() is declared in remotely available Data.js
I am a newb at Appcelerator and im not really able to follow some of the threads i have come across, so some detailed help would be really appreciated. Thank you in advance.
Well according to me , you should first understand few points first :
You want to include a remote file hosted at some server , now as the Titanium code converts to native code at compile time , you cannot include Titanium API's from remote file.
If you want to include a remote file , then only option which I see is loading that file in webview.
Now coming to your problem , as you said that you want to fetch some data only from remote server by triggering some JS function from remote file. So following is what would I do :-
a/ Create a hidden webview in my main window with a EventListener of webview. Something like :
var webview = Titanium.UI.createWebView({url:'localHtmlFile.html'});
//event listener to handle the response from webview
Ti.App.addEventListener('fromWebView', function(e)
{
var testVariable = e.data;
});
b/ In localHtmlFile.html file :
<!DOCTYPE html>
<html>
<body>
<script src="https://some-link/Data.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var testVariable = someMethod();
//respond the fetch data to the main window via fireEvent
Ti.App.fireEvent( 'fromWebView', { data : testVariable } );
});
</script>
</body>
</html>
PS : This is just a logic to begin with , you have to edit code according to your requirements

SERIALITY() plugin installation on firefox or chrome

Please help me to understand how to install the Seriality Plugin (www.zambetti.com/projects/seriality/‎) in Chrome or Firefox.
I want to read from a COM Port on the client side of a web page.
Take a look at the Google code site, this site contains the DMG file you can use to install the Seriality.plugin file.
https://code.google.com/p/seriality/
You can also see the sample source on the site that shows the javascript to use the plugin, below is a snippet shown on the site that prints "Hello World" to the first port seen on the system at a baudrate of 9600 when this HTML file is loaded.
<html>
<head>
<script type="text/javascript">
function setup()
{
var serial = (document.getElementById("seriality")).Seriality();
serial.begin(serial.ports[0], 9600);
serial.write("Hello World");
}
</script>
</head>
<body onload="setup();">
<object type="application/Seriality" id="seriality" width="0" height="0"></object>
</body>
</html>

Javascript Relative URL

We have an MVC3 application in IIS7: http://mydomain.com/myapplication/
What would be the relative URL in javascript for:
http://mydomain.com/myapplication/mycontroller/myaction
/mycontroller/myaction - goes to http://mydomain.com/mycontroller/myaction
../mycontroller/myaction - goes up one level (in this case also to http://mydomain.com/mycontroller/myaction)
mycontroller/myaction - goes to http://mydomain.com/myapplication/mycontroller/myaction when running as dev on localhost but on server goes to http://mydomain.com/mycontroller/myaction
./mycontroller/myaction - was what I figured would be right, but that didn't work either!
If you are developing in ASP.NET MVC you can set root var on server side like this:
<script language="javascript" type="text/javascript">
var root = '<%= this.Request.ApplicationPath%>';
</script>
and use it in JS:
<script language="javascript" type="text/javascript">
img = root + '/someotherrootfile.js'
</script>
You would just list the file name.
<script src="filename.js"></script>
If I understand you correctly you would only need to list the filename or path directory with no leading slash.

jQuery $.load() functioning on personal webserver, but not production webserver

EDIT: I have discovered that this is a 405 error. So there is something going on with the webserver and handling POST methods.
I am having a strange occurrence. I have identical javascript code on both my test environment and production environment.
The test environment functions, and the production does not. Here is my identical code.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
<script type="text/javascript" src="./js/jquery.scrollTo-min.js"></script>
</head>
<body>
<div class="content" id="content">
<a id="changeText" href="test.html">Change</a>
</div>
<script>
$(document).ready(function() {
$("#changeText").live('click', function(){
var url = $(this).attr("href");
$("#content").load(url, {var1:Math.random()*99999},function(){
alert(url + " loaded");
});
$.scrollTo("0%", 400);
return false;
});
});
</script>
</body>
</html>
Both environments report that
alert(url + " loaded");
is happening. But only my test environment actually displays the change.
The production webserver has "test.html" available in the correct location.
Are you sure the scrollTo script is being included on the production server ( or am I misinterpreting what you mean by change ) ? Perhaps try a root relative path instead of './js'? I would check Firebug's script tab to ensure it is being included.
405 errors mean that the URL you're sending to isn't expecting you to send the data in that manner. For example, if you're sending a POST request to a URL that's only designed to handle a GET request, you'll get this error.
My guess is whatever server you're running on is set up to not allow POST data to be sent to a page with a .html extension, causing the error you're seeing. Try changing the extension to a .php, .aspx, etc, and see if that helps.

Categories

Resources