React, proxy to websocket from package.json get local machine - node.js

On AWS ec2 instance I have 2 projects react and nodejs
Due to specific of server I can't connect toc socket by it's ip, but...
I'm trying to use localhost from react package.json proxy, but it's not working. React trying to get :3334 port on my local machine
"proxy": {
"/api": {
"target": "http://localhost:3000"
},
"/socket.io": {
"target": "http://localhost:3334",
"ws": true
}
}
React on port 8000, nodejs on port 3000, socket should be listened on port 3334. I implement connection to nodejs, but with this ws. Can't understand what an I doing wrong
in react:
const socket = openSocket("http://localhost:3334");
On other instance or local machine everything works fine, with ip, but I really need this localhost connection.
Please, help

The problem was that I define in react io socket strictly to localhost. Solution:
const socket = openSocket();

Related

ECONNREFUSED error using webpack-dev-server in Motoko project

I created a motoko backend and added some JavaScript and HTML for the frontend. Now I would like to deploy my project using webpack.
After the successfull deployment I get the following error interacting with the frontend:
[webpack-dev-server] [HPM] Error occurred while proxying request localhost:8080/api/v2/status to http://localhost:8000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)
Reading the documentation the frontend should run on the server http://localhost:8080 and API request will be proxyed to the replica on port 8000.
If I open port 8000 it says:
Could not find a canister id to forward to.
So from my understanding, the frontend server runs and if he makes an API call (e.g. calling a function within my code) it proxys it to port 8000, but the service on this port is inactive.
The webpack.config.js config for the proxy:
// proxy /api to port 8000 during development
devServer: {
proxy: {
"/api": {
target: "http://localhost:8000",
changeOrigin: true,
pathRewrite: {
"^/api": "/api",
},
},
},
hot: true,
watchFiles: [path.resolve(__dirname, "src", frontendDirectory)],
liveReload: true,
},
};
UPDATE
I fixed the issue. The API calls where routed to the wrong adress. I changed it in the webpack.config.js to http://127.0.0.1:8000/.
I fixed the issue. The API calls where routed to the wrong adress. I changed it in the webpack.config.js to http://127.0.0.1:8000/.

Cloud9: "Invalid host header" on React & nodejs app

Im developping a Reactjs & nodejs webapp on AWS's cloud9.
My problem is that i struggle to make a HTTP request from Reactjs frontend to my express backend server.
Both back and front run well separately.
React run on port 8080 and express on port 8081.
Here is the frontend request:
async function getAccessToken(){
await axios.get('/api/token',{
keepAlive: true}).then(function(response){
response.json().access_token;
}).catch(function(error){
console.log('Error dans App.js: ', error);
});
}
Heres the server :
const secureServer = https.createServer({passphrase:process.env.PASSPHRASE, cert: certfile, key: keyfile,}, app);
secureServer.listen(process.env.PORT_SERVER, console.log('Server started on port', process.env.PORT_SERVER));
When i start both and access the application preview, i get an "Invalid host header".
So i searched here, and i dont want to mess with react-scripts webpack.config.js.
I tried to set a "proxy": http://0.0.0.0:8081 in react package.json, to no avail.
Im at a loss here and hope someone can help.
Thanks in advance.

Unable to connect nodejs api on localhost:5000 on server

I have successfully deployed React app on digitalocean droplet with mongodb.
My server configured with nodejs nginx pm2 and everything is working fine
here is my site
www.xdomain.ml
But I build my react app to connect with the backend nodejs api.
I am using socket.io and axios to connect.
everything is working fine on my local computer but it could not connect on the server.
my socket configuration is like
const socket = io("localhost:5000")
and axios is like
axios.post("http://localhost:5000/delete-domains")
on browser console, showing
polling-xhr.js:198 GET https://localhost:5000/socket.io/?EIO=4&transport=polling&t=NjNh9TP net::ERR_SSL_PROTOCOL_ERROR
what I am missing?
do I need to replace the localhost:5000 to 127.0.0.1:5000 on code and build again?
But the mongodb connection successfully establish by
"mongodb://localhost:27017/api";
please help
Thanks
Try to change
const socket = io("localhost:5000")
to
const socket = io("http://localhost:5000")
Or other advance setting:
const socket = io.connect('http://localhost', {
port: 5000,
reconnect: true
});
const socket = io("localhost:5000")
on this line you are missing "http://" or if you have ssl "https://"
this line should be
const socket = io("http://localhost:5000");

How to setup a proxy using web sockets and angular CLI

I have a simple web app built using the angular CLI. I want it to communicate with a backend using web sockets. I have the backend already written and have tested with a simple index.html page that the server can send and receive on sockets.
In my angular-cli project I have setup a proxy config file to setup a proxy to the backend.
proxy.conf.json
{
"/sock": {
"target": "http://localhost:3000",
"changeOrigin": true,
"ws": true,
"logLevel": "debug"
}
}
Then start the server with the following.
ng serve --proxy-config proxy.conf.json
For now I have a service that simply attempts to open a socket and send a fixed string which I'm expecting to see logged by the backend.
import { Injectable } from '#angular/core';
import * as io from 'socket.io-client';
#Injectable()
export class ChatService {
private socket: any;
constructor() {
this.socket = io({ 'path': '/sock' });
this.socket.emit('chat message', 'Hello World from browser!');
}
}
Note: I've had several go's at this with and without the /sock part of the url.
I start both servers. Get no console errors in the browser. But in the angular CLI web pack server I get the following messages.
10% building modules 2/2 modules 0 active[HPM] Proxy created: /sock -> http://localhost:3000
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
[HPM] GET /sockjs-node/530/z1z3teld/websocket -> http://localhost:3000
[HPM] Upgrading to WebSocket
[HPM] Error occurred while trying to proxy request /sockjs-node/530/z1z3teld/websocket from localhost:4200 to http://localhost:3000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
Are web sockets supported or have I made a silly mistake?
Thanks
I managed to figure it out with a bit of trial and error. I looked at the console for the basic index.html page that works within the backend project. This backend project is basically the chat server demo application on the socket.io website. I noticed that when it opens up the web socket the url looks like the following:
http://localhost:3000/socket.io/EIO=3&transport=websocket&sid=wTvdQTclHXJSUmAmAAAA
So back in the angular CLI project I modified my proxy config to include the /socket.io/ part plus also added a wildcard.
{
"/sock/*": {
"target": "http://localhost:3000/socket.io/",
"ws": true,
"logLevel": "debug"
}
}
Bingo! Now when the service is constructed it opens the socket and emits a message which I can see logged in the backend.

node server hosted on heroku not serving socket.io file

So I've made a multiplayer space shooter using node.js, socket.io and kineticJS.
My Node.js server does not actually serve the client's page. My client-side files are currently hosted in a local Apache server on my computer.
The node server is up and running on Heroku right now and I can't seem to be able to get socket.io loaded on the client-side. I keep getting the "io is not defined" error.
This is how I import the script:
<script src="http://xxx-xxx-xxxx.herokuapp.com:5000/socket.io/socket.io.js"></script>
I have followed the instructions shown here: https://devcenter.heroku.com/articles/nodejs
And my package.json file looks like this:
{
"name": "Grid-Frontier",
"version": "0.0.1",
"dependencies": {
"socket.io": "0.9.x"
},
"engines": {
"node": "0.6.x"
}
}
On localhost everything is fine and I can just do the following:
// Importing on client side
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
// Server-side
server.listen(8080);
socket = io.listen(server);
Because Heroku allows you only to communicate in port 80, you cannot use other ports therefore the address should be: http://xxx-xxx-xxxx.herokuapp.com/socket.io/socket.io.js not port 5000. Actually there is nothing on port 5000, it is internal to machine.

Resources