Reflected client actions from a different computer - javascript

I'm working on my new blog, for now the server side is NodeJS(using expressjs), I host the server on my computer.
For rapid development I'm using GulpJS.
Before I explain the weird thing. Let me say that both ports(3000 and 80 are open).
Gulp version: 3.9.0
NodeJS version: 0.10.35
Browser-sync: 2.7.12
This is my index.js, I use node index.js to start the server.
var express = require('express');
var app = express();
app.use(express.static('public'));
app.set('base', '/public');
app.get('/', function(req, res) {
res.sendfile('index.html');
});
var server = app.listen(80, function() {
var host = server.address().address;
var port = server.address().port;
console.log('Example app istening at http://%s:%s', host, port);
});
Now this is the important part from gulpfile.js I use(I removed most tasks for simplicity):
var sync = require("browser-sync").create();
gulp.task('browser-sync', function() {
sync.init({
proxy: "http://localhost:80",
browser: "chrome",
port: 3000
});
});
So after I work a while on the my blog I decided to show it to a friend, while the NodeJS server is running and Gulp is watching over some html, js and sass files, I send my domain.ml:3000 to my friend, the domain points to my external IP and the port 3000 is due to the proxy defined via the gulpfile.js.
The weird thing I can't explain:
While my friend played with the website his actions were reflected to me, meaning we both visited domain.ml:3000 and when he clicked a link with src attribute set to #, on my side the url changed to domain.ml:3000/#, I also have a link that when clicked opens a tab(the transition is made by some js+css transitions) and again when the tab opens on his side it also opens on my side.
I'm thinking it's something with the browser-sync proxy but I can't explain nor understand this behavior, if anyone can help me figure it I'll be very thankful, have a nice day.

That's basically what browser-sync is meant to do. You can sync browsers to test the same app simultaneously. That will change once you make a gulp build and serve that build, instead of your 'dev version'.

This is the deal, browser-sync is sending the hash url via your proxy to your server (as you click links with '#') that fragment has a somewhat different treatment.
The server on port 80 is now a puppet replaying all URLS from your browser-sync session, you are both connected on browser-sync port 3000, when one of you sends in a hash change, you both receive the new location as you server on port:80 now also has the new location.

Related

How to run socketIO server together with main server on nodejs

Currently, we have a main server that is being hosted on localhost:3000 but to run our socket.io function, we need to run it on the same server. However, we need to run it separately (npm start separately). Is there a way to run it together or on the same server without it crashing?
You cannot run socket.io in a separate process, but on the same port as some other web server in some other process. The OS will not allow that as only one process can have a listening server on a specific port. If they are in the same process, that's easy as pie as socket.io is built to share an http server in the same process (one listening server internally, traffic divided between the two uses). But, not from separate processes.
To do that, you'd have to use something like nginx on your port 3000 to proxy plain web requests to one server on some other port say 3001 and socket.io requests to another server on some other port say 3002. The client would only deal with port 3000 and nginx would direct the traffic to the right server on different ports.
I'm thinking that when you say "npm start separately", you must have some other problem you're trying to solve with that statement and we could probably help with a better way to solve that actual problem (if you disclosed what that actual requirement is) while keeping socket.io and the http server in the same process and thus no need for a proxy to divide the traffic between two separate servers.
For example, you could start up your web server with no socket.io server started and then you could tell your web server process to start up the socket.io server later. Or you could start both the web server and socket.io server in the same process at initialization time, but have a temporary server configuration that blocks incoming socket.io connections until some other requirement is met.
But, without understanding what the real requirement is, you're just lobbing us an XY problem where you describe your attempted solution rather than the actual problem that needs to be solved. When we explain that your attempted solution is the wrong way to go, we need to know what the real problem is to help further.
This is simple SocketIo Server Code.
It's not a client code.
You have to download SocketIO at npm.
const express = require('express');
const http = require('http');
const SocketIo = require('socket.io');
const app = express();
app.set('view engine', 'pug');
app.set('views', __dirname + '\\views');
app.use('/public', express.static(__dirname + '/public'));
app.get('/', (req, res) => res.render('home'));
const handleListen = () => console.log('Listening on http://localhost:3000');
const httpServer = http.createServer(app);
const wsServer = SocketIo(httpServer);
wsServer.on('connection', (socket) => {
console.log('someone joined!')
socket.on('join_room', (roomName) => {
socket.join(roomName);
socket.to(roomName).emit('welcome');
});
});
httpServer.listen(3000, handleListen);
For more Info visit official documentation.
https://socket.io/get-started/chat

deploying node add on server without using localhost

I have a node app that I am trying to deploy on my server. I have an index.html file in a public folder and an app.js file. If I navigate to the project in the command line and run node app.js it runs the app on localhost:8888 and shows the index.html file.
Now that I have uploaded this to my server I am wondering what I need to do, and change (if anything) in my app.js file so that i can visit the site without visiting localhost:8888, but instead the actual url.
I have tried http://162.xx.xxx.xxx/folderName/app/public:8888, but this doesn't work.
var express = require('express')
var app = express();
app.use(express.static(__dirname + '/public'))
app.get('/', function (req, res) {
res.send('Hello World!')
})
app.listen(8888, function () {
console.log('Example app listening on port 8888!')
});
"Server" is a word with two primary meanings in software development.
It can mean either "A piece of software that listens on a network" or "A computer running that kind of software".
So having uploaded the JavaScript program to the remote computer that is your server you need to do exactly the same as you did on your own computer.
i.e. you need to get a terminal on the server and run node app.js
It will then be available at http://your.example.com:8888/
(More advanced uses would involve using software like forever or system.d to run it automatically as a background process).
If you were using the term server with the other meaning (i.e. you mean "Apache HTTP" or "IIS" or similar), then you are out of luck.
Using Node for server side code means running a server written in JavaScript.
To use this in combination with something like Apache, you would either:
Run the Node server instead of Apache
Run the Node server on a different port and point some services at that port explicitly
Run the Node server on a different port and use something like ProxyPass to have Apache relay requests to it
Change the port number from 8888 to 80 and then use the address of your server in the browser. For example, "mysite.com" for a domain name or "123.45.678" for an IP address.
If there are other sites on that server, you can't run it on port 80. (Port 80 is the default port websites use.) You'd need to use a different port. So, say you kept 8888 -- the address would be yoursite.com:8888

Running website on node js server

I want to access my node app from my base url path, example.com so I set my listening port to 80 inside my app.js file with express js.
Below is my app.js file. Credit: node static site tutorial.
var express = require('express');
var path = require('path');
var app = express();
// Define the port to run on
app.set('port', 80);
app.use(express.static(path.join(__dirname, 'public')));
// Listen for requests
var server = app.listen(app.get('port'), function() {
var port = server.address().port;
console.log('Magic happens on port ' + port);
});
I start my server with node app.js and can access my content as intended - but as soon as my connection is closed, my site is inaccessible. This is my first time experimenting with a non LAMP solution.
How can I keep my node server running on the cloud to serve my website? Is this what we call "deploying node to production?".
This is just a personal site with some static html / js files.
When you close the connection, you close the shell session you started node in.
Since you are running it in linux, simplest method is to run it in background node app.js &
Or you can install screen for a terminal which will stay running & can be detached from your current session. http://www.thegeekstuff.com/2010/07/screen-command-examples/
Also, In case of unhandled errors in your code, servers programs can crash. To keep the server running & restarting when crashed use nodemon or forever.

What HTTP address can I send requests to from when hosting on Heroku? (client to server)

This sounds really dumb, but...
I have a Node.js Express server that used to be completely functioning on my localhost. I recently deployed it on Heroku and made some changes so my actual index.js listens to process.env.PORT instead of localhost. it listens to process.env.PORT fine through that, but I have a page rendered in React.js called app.js stored within a directory (./js/app.js) that makes HTTP requests when buttons are clicked.
However, whenever I try accessing process.env.PORT from within the app.js to make these requests, process is undefined, so everything falls apart. When working on it locally, I would just send the requests to http://localhost:3000/database, but now I have to change that since it's deployed on Heroku now.
How can I communicate between my client (app.js) and my server (index.js)?
I know this is something super simple and I've tried searching for it for the past couple of hours, but I just don't know how to phrase it.
Thank you!
Try to define your address and port in your app.js file as a heroku server address:
var server = app.listen(8000, function () {
var host = server.address().address;
var port = server.address().port; // put your adress here :)
console.log('Example app listening at http://%s:%s', host, port);
});
I am there if you get another pb :)

Node.js socket.io.js not found or io not defined

I'm trying to run a node.js application on my freebsd server, but I can't get the socket.io library to work with it. I've tried including:
<script src="/socket.io/socket.io.js"></script>
Which gives a 404 error, and if i link directly to the file (i.e. where it is in my public_html folder) I get the io not defined error.
Thanks in advance
Try creating another node.js application that has this single line in it and then run it with node.js
var io = require('socket.io').listen(8000);
Then in your browser visit http://127.0.0.1:8000 and you should get the friendly "Welcome to socket.io." greeting. If you are getting this then socket.io is running and will serve the socket.io.js file.
The only other thing that I can think of that might be happening is that you might not be linking to the alternate port in your client file. Unless you're running the socket.io server on express which is running on port 80. For now create a client file that has the script source for socket.io set to
<script src="http://127.0.0.1:8000/socket.io/socket.io.js"> </script>
This should connect to the socket.io server running on port 8000 and get the socket.io.js file.
Your node.js application still has to serve it - it does not get served automagically. What do you have in your server? It should be something like
var app = require('express').createServer();
var io = require('socket.io').listen(app);
or similar (the listen is important). The location is not a real location on the disk - socket.io library should intercept the URL and serve its clientside library, as far as I understand.
Add the following after body parser:
, express.static(__dirname + "/public")
So something like:
var app = module.exports = express.createServer(
express.bodyParser()
, express.static(__dirname + "/public")
);
For those who got the same kind of issue if they run (open) your html file directly from your local file directory(ex: file:///C:/Users/index.html).
Solution: You have to run(open) the file through localhost (ex: http://localhost:3000/index.html) where the server is listening to.
Below code snippet shows how to create a server and how to wire together with the express and socket.io
const express = require("express");
const app = express();
const httpServer = require("http").createServer(app);
const io = require("socket.io")(httpServer);
///////////////////////////////////////////////////////////////
// Any other server-side code goes here //
//////////////////////////////////////////////////////////////
httpServer.listen(3000, () => {
console.log(`Server listening to port 3000`);
});

Categories