I've been having trouble loading the socket.io library for my JS client code on a Node.js app hosted on Heroku.
For now, I have this line at the end of my index.html file:
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
But then, when I do socket = io.connect('http://myherokuapp');in my JS client code, I get an expected 'io is not defined' error.
Any idea how to correctly load the library on Heroku?
Thanks!
Ok so I finally found my way through. I'm sharing in case it helps someone.
I load the script in index.html this way:
<script type="text/javascript" src="http://myapp.herokuapp.com/socket.io/socket.io.js"></script>
It makes sense because the client-side library is actually loaded from the node server and shouldn't be pushed manually.
In my client-side JS file, I instantiate the socket this way:
socket = io.connect('http://myapp.herokuapp.com/');
Also, and this goes beyond the scope of this question, but you can't use websocket on Heroku for now. They have a little note about that here.
Hope this helps!
Related
I 'm a beginner of Node.js development,
Now I try to use bootstrap framework in my first Express web app.
I use
npm install bootstrap
to download the files,and it seems that npm puts them in my node_modules folder.
My question is how can I refer to the bootstrap files in my views in express?
I know a typical way is copying the bootstrap file into the public folder. So my html files can find them. But I don't think this is a good idea.
Thank you.
You need to use in your server.js:
app.use(express.static(__dirname + '/node_modules/bootstrap/dist'));
to define a static resourse and then use:
<script language="javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
I found a similar question. In which the solution is explained better by #augusto-goncalves. His solution works for me. It is similar to the solution of #victor-behar but more elaborated and clears confusion.
You have to reference it in the <script> and <link> tags in the header or at the bottom of your main script.
If you're using express, you're probably using templating. To use it in your header part or in your main template (depending on how you've managed your views) like :
<script language="javascript" src="node_modules/bootstrap/.../bootstrap.min.js"></script>
and
<link rel="stylesheet" href="node_modules/bootstrap/.../bootstrap.min.css"/>
This works only if you didn't moved your files with a gulp or a grunt task
There's also a way to transpile scss in express using node sass middleware, for example https://github.com/sass/node-sass-middleware.
That way you can override bootstrap scss. You can do the same for JS with webpack: transpile client-side js and then include the bundle.js in your frontend.
We created a simple js file, intending to find out if http.createServer works on client browser or not:
var http = require("http")
var server = http.createServer()
server.listen(9024, function () {
console.log("demo server listening on port 9024")
})
and embedded it into a html after browserify.
Display the html in chrome, unfortunately, it always fails on line 2 on http.createServer():
"Uncaught Type Error: undefined is not a function"
We also played around with "serve-browserify" a bit without success.
We have attempted the same thing on both chrome and firefox, and on Linux and Windows. All failed.
Searching through the web, there are quite a few examples for browserify http into the browser.
They all appear to be simple invocation of browserify. However we don't seem to be able to get the same good result.
Your help will be greately appreciated.
You can't use Node.js modules in the browser. All Browserify does is bundling CommonJS modules, it does not allow you to run server side code in the browser.
I'm using the Connect static middleware for Node.js in order to serve static assets in a web app I'm building. However, occasionally it fails to serve a static file, and instead sends the request through to my own server code, which looks like this:
var app = connect();
app.use(connect.static('public'));
app.use(function(request, response) {
var pathname = url.parse(request.url).pathname;
console.log(pathname);
...
});
So, in an ideal world, this code only logs the request if the static middleware doesn't catch a request to a static file first.
My directory structure in public looks like this:
public/
javascripts/
application.js
lib/
jquery-2.0.3.min.js
stylesheets/
screen.css
And in my html view, i'm grabbing these assets like so:
<script type="text/javascript" src="/javascripts/lib/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/javascripts/application.js"></script>
<link rel="stylesheet" href="/stylesheets/screen.css" />
Connect has no trouble grabbing the /javascripts/application.js and /stylesheets/screen.css files, but it fails to fetch my jquery file in /javascripts/lib/, and this request is passed on to my server code, where the middleware should have caught and rendered it.
Clearly there's some sort of problem with Connect fetching the file from the subdirectory lib/, because I've already checked the file permissions on jquery-2.0.3.min.js and they are exactly the same as those on application.js.
Maddeningly, however, this bug appears to manifest itself entirely randomly. I'll start the server and it'll have the problem, but then when I restart the server it'll be gone. Then after making some unrelated change (I'm talking unrelated as in changing the CSS file slightly) on the app I'll start up the server and there it is again, and the error will remain and then go away after a few more restarts without any change to the code base.
As such, this is proving to be an incredibly difficult one to reproduce. If anybody has run into anything like this before, or has any idea what the problem might be, I would really really appreciate it.
If it helps at all, the nearest I can pinpoint the start of this error is this commit, in which I broke up an ejs template I wrote into partials to reuse the header and footer. I can't for the life of me tell how this might have started my problem, but maybe it might help someone diagnose the issue.
I trying to make a small chat website using node.js and socket.io.
To include the socket.io.js on my client-sided files:
<script src="192.168.0.108:1337/socket.io/socket.io.js"></script>
But is it normal that it returns an empty file?
http://screencast.com/t/HPAjAqV13q8q
I would also like to add that if on my server-sided file, I do res.write('Hello World'), the 'Hello World' Will appear on the web-page AND in the socket.io.js file
You can try this:
<script src='/socket.io/socket.io.js'></script>
And you should created a client io.connect
var socket = io.connect('http://localhost:5000');
You can also use socket.io's auto-discovery feature and don't specify the server
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect();
</script>
What solved it was opening the port on which socket.io was listening, in my case it was 8080... Now my socket.io.js has javascript code inside of it.
Now I am getting a 404 error on a xhr.send(null) in that socket.io.js file, but that is another story...
For example, let's say we're trying to use socket.io.
In the html file served to the client, we include the following in the file.
<script src="/socket.io/socket.io.js"></script>
So two questions regarding this:
When the html file gets served to the client, it loads the socket.io.js resource (http://localhost:8080/socket.io/socket.io.js) without triggering the requestHandler in server.js (I have a log statement for any request that hits localhost:8080). How does this resource load on the client without triggering the requestHandler?
Where does Node find the socket.io.js resource that is required by the client?
Assuming you are using one of the basic Socket.io examples, this is because Socket.io overrides your handle with it's own and won't run your handler if the request is for something that socket.io manages.
When you call .listen(app) or .listen(80) it will set up all of the handlers it needs to process data and serve the client JS file.