Cannot get /socket.io/socket.io.js on client application - javascript

My server side application is hosted on heroku: https://shielded-dusk-72399.herokuapp.com/
Relevant code looks like this:
const
express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server),
port = process.env.PORT || 8080
server.listen(port, (err) => {
console.log(err || 'listening on my very special port ' + port)
})
In my heroku logs this gets logged: "listening on my very special port 28428"
Now on my client application:
Currently my client application is running on port 8080
In my index.html:
<script>/socket.io/socket.io.js" charset="utf-8"></script>
When I go to localhost:8080 I get the following errors:
Cannot GET http://localhost:8080/socket.io/socket.io.js
Other Attempts:
<script src="https://shielded-dusk-72399.herokuapp.com:28428/socket.io/socket.io.js" charset="utf-8"></script>
Cannot GET https://shielded-dusk-72399.herokuapp.com:28428/socket.io/socket.io.js net::ERR_CONNECTION_REFUSED
<script src="https://shielded-dusk-72399.herokuapp.com:8080/socket.io/socket.io.js" charset="utf-8"></script>
Cannot GET https://shielded-dusk-72399.herokuapp.com:8080/socket.io/socket.io.js net::ERR_CONNECTION_REFUSED
And then I copied ./node_modules/socket.io-client/dist/socket.io.js to resources/js and get this error:
Cannot GET http://localhost:8080/resources/js/socket.io.js 404 (Not Found)
Any ideas?
I've used these all as references and still coming up short:
node.js /socket.io/socket.io.js not found
Node.js /socket.io/socket.io.js not found express 4.0
Can't get socket.io.js

You need to specify from where to serve your static js file. For instance, if you placed the socket.io.js file in your /resources/js/ folder, add the following:
app.use('/resources', express.static(path.join(__dirname, 'resources')))
Then your file will be available on http://localhost:8080/resources/js/socket.io.js

Related

How to keep socket.io client in frontend code

I am just learning webdev and want to try to make a multiplayer game using Express and socket.io
I can make a server with socket.io in it which listens. That part works fine.
However when I try to connect a client, this only works if I let the HTML file with the following in it be served by the server like follows:
Server code:
const express = require('express')
const app = express()
const http = require('http')
const server = http.createServer(app)
const { Server } = require('socket.io')
const io = new Server(server)
const port = 3000
io.on('connection', (sock) => {
console.log('client connected')
})
// This seems to be necessary, but I don't want it to be!!!
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})
server.listen(port, () => {
console.log(`Server listening on port ${port}`)
})
This index.html has the following at the bottom:
<script src="/socket.io/socket.io.js"></script>
<script>const socket = io()</script>
However I want to keep all my frontend code seperate from the server. I made a seperate repository for the frontend and backend. I want the frontend to contain all the UI logic and use only data calls (AJAX) to get Json data from the server. So I want to put this index.html file in my frontend code only.
Yet if I do this the connection doesn't work.
I can start the server fine.
I open index.html from WebStorm which also creates a server for this which I configured to also listen to port 3000
Yet it cannot find /socket.io/socket.io.js and I get the following error in the console.
It also doesn't work if WebStorm runs on a different port.
The resource from “http://localhost:3000/socket.io/socket.io.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
How can I keep this html in my client repo only and still work with socket.io, or is this not possible?
You can't have multiple servers listening on the same port. Run the servers on different ports and either:
Have a reverse proxy forwarding requests to your Socket.io server (which needs special handling) and your front end server or
Put an absolute URL in the script src and configure CORS.

Node.js + Apache - https://localhost:3000/socket.io/ ERR_CONNECTION_REFUSED

I am implementing a simple game in Node.js. I have a client.js for my client side code, and a server.js running on a remote server, which both use sockets to communicate on port 3000
I am also running Apache on port 80, and using ProxyPass in my apache configuration file, to route the url mywebsite.io/agario to my nodejs server.
<Location /agario>
ProxyPass http://localhost:3000/
ProxyPassReverse http://localhost:3000/
</Location>
I am also using cloudflare to route my webserver 167.179.xx.xx through the url https://agario.mywebsite.io for SSL so that I can use HTTPS.
The problem
When I try to connect to my website https://agario.mywebsite.io/agario I am receiving the following error:
socket.io-1.4.5.js:1 GET https://localhost:3000/socket.io/?EIO=3&transport=polling&t=MakAMgZ net::ERR_CONNECTION_REFUSED
I am unclear why my client code is trying to connect to localhost, when I have specified in the code to connect to the remote server. Potentially I am just confused on how to run the node.js server as this is my first taste of Node.js and sockets.
client.js
...
var socket;
socket = io.connect('https://agario.mywebsite.io/agario');
...
server.js
var app = express();
var server = app.listen(3000, listen);
// This call back just tells us that the server has started
function listen() {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://' + host + ':' + port);
}
app.use(express.static('public'));
var io = require('socket.io')(server);
io.sockets.on('connection',
function(socket) {
console.log("We have a new client: " + socket.id);
...
});
If I have missed out any vital information please let me know and I will update my question, thank you.
You server is listening on port 3000 and you're trying to connect with it via 443, you should try something like this
socket.connect('https://ip:3000');
However, if you're sure that ur client is using the same port as the server or u have a port forwarding then try to use netcat just to make sure the the problem is with your script not the network config :
nc -zv -w1 ip port

connecting to socket.IO server through apache webproxy

I have 2 node.js apps on my vps. One on port 3001 and one on port 5001(ssl) and 5000(http).
I use apache proxy to route traffic from the homepage to the node.js Servers. it also allows me to easily install a LE certificate.
This is my apache setup
ProxyPass /herstelling http://localhost:5000/
ProxyPassReverse /herstelling http://localhost:5000/
ProxyPass /kaaswijn http://localhost:3001/
ProxyPassReverse /kaaswijn http://localhost:3001/
The site loads, but I'm unable to get my socket.io to connect.
This is the code I'm using
In order to get https working i set up a domain cdn.quintenverhelst.be to get a certificate.
This domain just points directly to the server IP
On the nodeJS Server:
var app = require('express')();
var http = require('http').Server(app);
var port = 5000;
var express = require('express');
var io = require('socket.io')(http);
https.createServer({
//server keys
}, app).listen(5001);
Client side connecting code:
<script src="https://cdn.quintenverhelst.be:5001/socket.io/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script> var socket = io.connect("https://cdn.quintenverhelst.be:5001");</script>
<script src="https://cdn.jsdelivr.net/gh/verhelstq/maintenanceReport/engine.js"></script>
When I open this it gives me the error:
socket.io.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
The URL does not resolve to the socket.io.js file. Looks like its not even loading socket IO script into the page:
<script src="https://cdn.quintenverhelst.be:5001/socket.io/socket.io.js"></script>
Try removing the port number, the JS file resolved when I tested on my end.
<script src="https://cdn.quintenverhelst.be/socket.io/socket.io.js"></script>
That should get you at least past this first error.

NodeJS Express sendFile that includes external JS files

So, I have a file structure like this:
App
client
index.html
App.js
server
node_modules
package.json
server.js
the server.js is the server file ran by node, it serves up the index.html
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.sendFile("client/index.html",{ root: '../' });
});
http.listen(3000, function(){
console.log('Server is listening on port 3000');
});
So the index.html includes the App.js in it's head, like you normally would
<script type="text/javascript" src="App.js"></script>
The problem is, that App.js is never found and included when I connect. Gives a 404. How could I fix it?
This one solved mine. You can check this out.
var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/public/js'));
Thus, my app.js can be accessed via -> http://localhost:3000/js/app.js
Your server doesn't seem to do anything but sending client/index.html when http://127.0.0.1:3000 is requested in a browser.
So what actually happens, when the browser received the index.html, it sends another request to http://127.0.0.1:3000/App.js. But your Server can't answere that request. It can only anwere requests for the index. If you want a static server check out serve-static on Github:
https://github.com/expressjs/serve-static
Or you could write another route for you app anwering with the App.js as you did for the index.html.
looking at your server folder structure you need to access using the path ./client/App.js, instead of only App.js
So your script tag will look like,
<script type="text/javascript" src="./client/App.js"></script>

How to configure expressjs/socketio webchat on ubuntu server

I wasn't sure if this is appropriate on the Ubuntu exchange or here but it is mostly code related i believe.
So I have created a neat working little web-chat application using socket.io which I've been developing on my Win10 pc using Git-bash and running it on my localhost with node.js and everything has been working just fine.
Thus I have come to a point where I would like to try out my app on my web-server.
Lets get more detailed what my Problems are:
I am unsure of how my server.js file should listen or open up the ports so to speak.
I have tried looking in the sockets.io chat example and tried their method yet the '../..' module leaves me confused.
Following the express.js site tutorial I actually get my server to respond listening on port 3000 yet my website returns the no socket.io/socket.io.js found.
this and this just lead to another localhost tutorial
In Short I have come to the point where when i do node server.js It seems to start listening here's the code to that part:
var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
var io = require('socket.io').listen(server);
var port = process.env.PORT || 3000;
app.get ('/', function(req,res) {
res.sendFile(__dirname + '/index.html');
});
app.use("/static", express.static('./static/'));
server.listen(3000);
But now the problem is is that my html file cannot seem to find the socket.io/socket.io.js file, even though i have installed sockets.io, i consulted to this stack question which should fix it, but it didnt thus leads me to believe theres a thicker more server side issue?
Versions i am using:
express: **4.16.4**;
node : **10.15.0**;
npm : **6.4.1**;
socket : **2.2.0**;
EDIT: Added my html code snips
html
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="static/index.js"></script>

Categories

Resources