Develop Reference

Socket io connection not established with express node js, console log does not work

Trying to connect to socket io through a separate chat page tab and not with index.html, but not able to connect. I do not want the chat page to be the home page. Server and client console log does not work either. This only console logs "Express app listening at http://localhost:8888" but not "New WS Connection".
Server.js
require('dotenv').config();
const express = require('express');
const querystring = require('querystring');
const axios = require('axios');
const port = 8888 || process.env.PORT;
const socketio = require('socket.io');
const cors = require('cors');
const path = require('path');
const http = require('http');
const { addUser, removeUser, getUser, getUsersInRoom } = require('./users');
const router = require('./router');
const app = express();
const server = http.createServer(app);
const io = socketio(server);
app.use(cors());
app.use(router);
io.on('connect', (socket) => {
socket.on('join', ({ name, room }, callback) => {
console.log('New WS Connection...');
const { error, user } = addUser({ id: socket.id, name, room });
if(error) return callback(error);
socket.join(user.room);
socket.emit('message', { user: 'admin', text: `${user.name}, welcome to room ${user.room}.`});
socket.broadcast.to(user.room).emit('message', { user: 'admin', text: `${user.name} has joined!` });
io.to(user.room).emit('roomData', { room: user.room, users: getUsersInRoom(user.room) });
callback();
});
socket.on('sendMessage', (message, callback) => {
const user = getUser(socket.id);
io.to(user.room).emit('message', { user: user.name, text: message });
callback();
});
socket.on('disconnect', () => {
const user = removeUser(socket.id);
if(user) {
io.to(user.room).emit('message', { user: 'Admin', text: `${user.name} has left.` });
io.to(user.room).emit('roomData', { room: user.room, users: getUsersInRoom(user.room)});
}
})
});
server.listen(port, function(){
console.log(`Express app listening at http://localhost:${port}`);
});
router.js
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.send('server is up and running');
});
module.exports = router;
chat.js on client side
import React, { useState, useEffect } from 'react'
import queryString from 'query-string';
import io from "socket.io-client";
import './Chat.css';
import InfoBar from '../InfoBar/InfoBar';
import Input from '../Input/Input';
import Messages from '../Messages/Messages';
import TextContainer from '../TextContainer/TextContainer';
let socket;
export default function Chat({ location }) {
const [name, setName] = useState('');
const [room, setRoom] = useState('');
const [message, setMessage] = useState('');
const [messages, setMessages] = useState([]);
const [users, setUsers] = useState('');
const ENDPOINT = 'http://localhost:8888/';
useEffect(() => {
const { name, room } = queryString.parse(location.search);
socket = io(ENDPOINT);
console.log(name, room);
setName(name);
setRoom(room);
socket.emit('join', { name, room }, (error) => {
if(error) {
alert(error);
}
});
}, [ENDPOINT, location.search]);
useEffect(() => {
socket.on('message', (message) => {
setMessages(messages => [...messages, message]);
});
socket.on('roomData', ({ users }) => {
setUsers(users);
});
}, []);
const sendMessage = (event) => {
event.preventDefault();
if(message){
socket.emit('sendMessage', message, () => setMessage(''));
}
}
// console.log(message, messages);
return (
<div className="outerContainer">
<div className="container">
<InfoBar room={room}/>
<Messages messages={messages} name={name}/>
<Input message={message} setMessage={setMessage} sendMessage={sendMessage} />
</div>
<TextContainer users={users} />
</div>
);
}

Axios sending 404 error possible reasons or fixes?

hey I'm very new to MERN stack and I'm having an issue posting data with Axios and express. I might have understood this wrong but here goes my problem. I have a form on a page which I'm trying to submit data from to the backend where I then console log it. the page is a component which contains the onsubmit function, which sends a post request to server.js which then console.logs it, however I've been getting an ERROR 404 on submitting. Dependencies should be installed correctly
This is my on submit function
onSubmit(e) {
e.preventDefault();
console.log(`Form submitted:`);
console.log(` ${this.state.searchquery}`);
const newSearchQuery = {
searchquery: this.state.searchquery,
};
axios.post('http://localhost:3000/', newSearchQuery)
.then(res => console.log(res.data)).then(
(response) => { console.log(response) },
(error) => { console.log(error) }
);;
this.setState({
searchquery: '',
})
}
this is the server.js file
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const todoRoutes = express.Router();
const PORT = 3000;
app.use(cors());
app.use(bodyParser.json());
todoRoutes.route('/').post(function(req, res) {
console.log(req.body);
});
app.listen(PORT, function() {
console.log("Server is running on Port: " + PORT);
});```

App is not configured to use the routes and that's why it throws a 404.
Use this line after todoRoutes.Route():
app.use(todoRoutes);
app.use() is used to register middlewares to the main node app. Since you are using router express middleware, you need to register it as well.
EDIT: This works for me. In case you want the complete code:
ReactJS:
import React from "react";
import axios from 'axios';
class App extends React.Component {
constructor() {
super();
this.state = {
searchquery: ''
};
}
handleChange = (e) => {
this.setState({ searchquery: e.target.value });
}
onSubmit = (e) => {
e.preventDefault();
console.log(`Form submitted:`);
console.log(` ${this.state.searchquery}`);
const newSearchQuery = {
searchquery: this.state.searchquery,
};
axios.post('http://localhost:3000/', newSearchQuery)
.then(res => console.log(res.data)).then(
(response) => { console.log(response) },
(error) => { console.log(error) }
);;
this.setState({
searchquery: '',
})
}
render() {
return (<form onSubmit={this.onSubmit}>
<input type="text" value={this.state.searchquery} name="searchquery" id="searchquery" onChange={this.handleChange} />
<button type="submit">Submit</button>
</form>);
}
}
export default App;
Express code:
const express = require("express");
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const todoRoutes = express.Router();
const PORT = 3000;
app.use(cors());
app.use(bodyParser.json());
todoRoutes.route('/').post(function(req, res) {
console.log(req.body);
});
app.use(todoRoutes);
app.listen(PORT, function() {
console.log("Server is running on Port: " + PORT);
});

how to resolve Mern Stack app connection Failed error

Failed to load resource: net::ERR_CONNECTION_REFUSED getting this error. an the another one is Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:84)
plaese tell me more about this how do i fix this bug.
Client side app.js file
import { useState } from 'react';
import './App.css';
import Axios from 'axios';
function App() {
const [foodname,setFoodName] = useState("");
const [days,setDays] = useState(0);
const addToList = () =>{
Axios.post("http://localhost:3001/insert", {
foodname: foodname,
days: days
});
};
return (
<div className="App">
<h1>CRUD APP WITH MERN</h1>
<label>Enter Food Name:</label>
<input
type="text"
onChange={(event) => {
setFoodName(event.target.value);
}}/>
<label>Days Since I Ate:</label>
<input
type="number"
onChange={(event) => {
setDays(event.target.value);
}}/>
<button onClick={addToList}>Add to List</button>
</div>
);
}
export default App;
Server side index.js file
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
const FoodModel = require("./models/Food");
app.use(express.json());
app.use(cors());
mongoose.connect("mongodb+srv://crudop:crudop#crud.jmbry.mongodb.net/food?retryWrites=true&w=majority",{
useNewUrlParser: true,
useUnifiedTopology: true
});
app.post('/insert',async (req,res)=>{
const FoodName = req.body.foodname;
const days = req.body.days;
const food = new FoodModel({foodname: FoodName, daysSinceIAte:days});
try{
await food.save();
res.send("inserted");
}
catch(err){
console.log(err);
}
});
app.listen(3001, ()=>{
console.log("server is running on port 3001...");
})

wait for MongoDB connection
after that start listening onto the port
mongoose
.connect(DB_URL, {
useUnifiedTopology: true,
useNewUrlParser: true,
})
.then((result) => {
app.listen(3001, () => {
console.log("Server started on port 3001");
});
})
.catch((err) => console.log(err));

Vue api service showing error and not working at all

I am trying to call my vue api service via axios. However, it does not work at all and I am getting Network Error message on my browser console.
Could anyone advice what I did wrong? Below I have attached my code from by the client and server side.
error
api.js
const axios = require('axios')
export default () => {
return axios.create({
baseURL: 'http://localhost:1991'
})
}
api_metrics.js
import api from '#/services/api.js'
const url = api() + '/api/metrics/'
export default {
getIpAddress () {
console.log(url)
return api().get(url)
}
}
express_server.js
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const app = express()
// middleware
app.use(cors())
const metrics = require('./routes/api/metrics')
app.use('/api/metrics', metrics)
const port = process.env.PORT || 1991
app.listen(port, ()=>{
console.log(`server running on port ${port}`)
})
server_api.js
const express = require('express')
const router = express.Router()
router.get('/', (req,res)=>{
console.log('getIpAddress ')
res.send('"metrics"')
})
module.exports = router
home.vue
<template>
<p>Home</p>
</template>
<script>
export default {
data: () => ({
this.user_information = []
}),
async created () {
try {
this.user_information = await
apiService.getIpAddress()
console.log(this.user_information)
} catch (err) {
console.log(err.message)
}
}
}
</script>

The socket.io connection returns an empty array. Ways to receive data in React without reloading the page?

I create a chrome extension in React. I am trying to download data via socket.io. I didn't get any errors, but the array is empty.
I should set the header and token, but I do not know where to do it in the app.js server. Where can I set:
const token = '12345'
headers: {
  'Authorization': `Bearer $ {token}`
}
How can I set port in server app.js and endpoint in client app.jsx if I create chrome extension?
Is there any other way (other than socket.io) to receive data in the method componentDidMount() in React without reloading the page?
When I go to the address http://127.0.0.1:4001, the console.log displays to me New client connected and Error: undefined
Server
//app.js
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const axios = require("axios");
const port = process.env.PORT || 4001;/How port in `chrome extension?`
const index = require("./routes/index");
const app = express();
app.use(index);
const server = http.createServer(app);
const io = socketIo(server); // < Interesting!
const token = "12345";
let interval;
io.on("connection", socket => {
console.log("New client connected");
if (interval) {
clearInterval(interval);
}
interval = setInterval(() => getApiAndEmit(socket), 10000);
socket.on("disconnect", () => {
console.log("Client disconnected");
});
});
const getApiAndEmit = async socket => {
try {
const res = await axios.get(
"https://b.application.com/api/v1/scores?expand=createdBy"
); // Getting the data from DarkSky
socket.emit("FromAPI", res.data); // Emitting a new message. It will be consumed by the client
} catch (error) {
console.error(`Error: ${error.code}`);
}
};
server.listen(port, () => console.log(`Listening on port ${port}`));
//index.js
const express = require("express");
const router = express.Router();
router.get("/", (req, res) => {
res.send({ response: "I am alive" }).status(200);
});
module.exports = router;
Client
//app.jsx
import socketIOClient from "socket.io-client";
class App extends Component {
constructor (props) {
super(props);
this.state = {
scores: []
endpoint: "http://127.0.0.1:4001" /How endpoint in `chrome extension`?
}
}
componentDidMount() {
const { endpoint } = this.state;
const token = "12345";
const socket = socketIOClient(endpoint);
socket.on("FromAPI", data => this.setState({ todos: data }));
}
render () {
<div>
</div>
)
}
}
export default App;

I solved it:
const getApiAndEmit = async socket => {
try {
const res = await axios.get(
"https://b.application.com/api/v1/scores?expand=createdBy",
headers: {
Authorization: `Bearer ${token}`
}
);
socket.emit("FromAPI", res.data); // Emitting a new message. It will be consumed by the client
} catch (error) {
console.error(`Error: ${error.code}`);
}
};

-----------Try Replacing app.js:- -----------------
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const axios = require("axios");
const port = process.env.PORT || 4001;/How port in `chrome extension?`
const index = require("./routes/index");
const app = express();
app.use(index);
const server = http.createServer(app);
const io = socketIo(server); // < Interesting!
const token = "12345";
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
let interval;
io.on("connection", socket => {
console.log("New client connected");
if (interval) {
clearInterval(interval);
}
interval = setInterval(() => getApiAndEmit(socket), 10000);
socket.on("disconnect", () => {
console.log("Client disconnected");
});
});
const getApiAndEmit = async socket => {
try {
const res = await axios("https://b.application.com/api/v1/scores?expand=createdBy", {
method: 'GET',
headers: {
'Content-Type': 'application/json',
"Access-Control-Allow-Origin": "*",
'token': token
}
}); // Getting the data from DarkSky
console.log("res.data:- "+JSON.stringify(res.data,null,4));
socket.emit("FromAPI", res.data); // Emitting a new message. It wil be consumed by the client
} catch (error) {
console.error(`Error: ${error.code}`);
}
};
server.listen(port, () => console.log(`Listening on port ${port}`));

Try modifying app.jsx as:
import socketIOClient from "socket.io-client";
class App extends Component {
constructor(props) {
super(props);
this.state = {
scores: [],
receivedData:[],
endpoint: "https://b.application.com/api/v1/scores?expand=createdBy",
token: "12345"
}
this.onDataReceived = this.onDataReceived.bind(this);
this.socket = socketIOClient(this.state.endpoint, {
extraHeaders: {
Authorization: `Bearer ${this.state.token}`
}
});
this.socket.on("FromAPI", this.onDataReceived);
}
onDataReceived(receivedData) {
console.log("receivedData ", receivedData);
this.setState({
receivedData: receivedData
});
}
render() {
return(
<div></div>
)
}
}
export default App;
Try modifying app.js: function getApiAndEmit
replace the line: socket.emit("FromAPI", res.data);
io.emit("FromAPI", res.data);