'polling-xhr.js:229 GET http://localhost:3000/socket.io/?EIO=4&transport=polling&t=NMtL4rR net::ERR_CONNECTION_REFUSED

I'm trying to build a form that sends notification with filled data when submitted. when i run the code it shows me this error on the console

polling-xhr.js:229 GET http://localhost:3000/socket.io/?EIO=4&transport=polling&t=NMtL4rR net::ERR_CONNECTION_REFUSED

this error seems like a overflow

here is my code

admin.html

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
   <link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
  integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 
  crossorigin="anonymous">

  <title>Hello, admin</title>
  </head>
  <body>
  <div class="container" style="max-width: 500px;">
    <div style="margin-top: 40px;"></div>
    <h1>Send Notification</h1>
    <form>
        <div class="form-group">
          <label for="name">name</label>
          <input type="text" class="form-control" id="name" aria-describedby="emailHelp">
        </div>
        <div class="form-group">
            <label for="profession">profession</label>
            <input type="text" class="form-control" id="profession" aria-describedby="emailHelp">
          </div>
          <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" class="form-control" id="email" aria-describedby="emailHelp">
          </div>
       
       
        <button type="button" id="sendNotification" class="btn btn-primary">Submit</button>
      </form>
  </div>


 <!-- Optional JavaScript; choose one of the two! -->

 <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- 
 DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
   integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" 
   crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.1/socket.io.js"></script>

   <script type="text/javascript">
    var socket = io("http://localhost:3000");

    $( "#sendNotification" ).click(function() {

        var name = $( "#name" ).val()
        var profession = $( "#profession" ).val()
        var email = $( "#email" ).val()

        socket.emit("sendNotification" ,{
            "name" : name,
            "profession" : profession,
            "email" : email
        });
    });
</script>
</body>
</html>

user.html

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 <!-- Bootstrap CSS -->
 <link rel="stylesheet" 
 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
 integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 
 crossorigin="anonymous">

 <title>Hello, user</title>
 </head>
 <body>
  <div class="container" style="max-width: 500px;">
    <div style="margin-top: 40px;"></div>
    <h1>Get Notification</h1>
    
  </div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.1/socket.io.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.js"></script>


<script type="text/javascript">
    var socket = io("http://localhost:3000");

    socket.on("sendNotification", function(details){
        $.notify("Name :"+details.name, {
            autoHide : false,
            className : "success"
        });
    });

    
</script>

<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- 
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384- 
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" 
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 
crossorigin="anonymous"></script>
-->
</body>
</html>

server.js

var express = require("express");
var app = express();

var http = require("http").createServer(app);
var io = require("socket.io")(http);

http.listen(3000, function(){
console.log("Successfully Connected Node Server");

 io.on("connection", function(socket){
    console.log("Auth value: " + socket.id);

    socket.on("sendNotification", function(details){
        socket.broadcast.emit("sendNotification", details);
    });
});
});

package.json

 {
 "name": "notification-server",
 "version": "1.0.0",
 "description": "Notification",
 "main": "index.js",
 "scripts": {
"test": "none"
 },
"repository": {
"type": "git",
"url": "none"
 },
"keywords": [
"none"
],
"author": "cbra",
"license": "MIT",
"dependencies": {
"express": "^4.17.1",
"http": "0.0.1-security",
"socket.io": "^3.0.1"
}
}

what do i have to change here?

javascripthtmlnotifications


Solution 1:[1]

I think you need a CORS module. there are two ways

  1. using npm
npm install cors

// server.js

...
app.use(require('cors')())
...
  1. enable CORS option (If you are using Socket.IO v3)
const io = require("socket.io")(http, {
    cors: {
        origin: "http://localhost:4200",
        methods: ["GET", "POST"]
    }
})
http.listen(3000)

Solution 2:[2]

I've resolved this error by putting '127.0.0.1:3000' instead of 'https://localhost:3000' in client side. here is my code

var ip = '127.0.0.1:3000';

var socket = io.connect(ip);

Solution 3:[3]

server.js

var express = require("express");
var app = express();

var http = require("http").createServer(app);
var io = require("socket.io")(http);

http.listen(3000, function(){
console.log("Successfully Connected Node Server");

 io.on("connection", function(socket){
    console.log(socket)

    socket.on("sendNotification", function(details){
        socket.broadcast.emit("sendNotification", details);
    });
});
});

Above from server side first check socket connected or not by login socket. Then on the console log check there is headers like this:

      host: '127.0.0.1:3000',
      connection: 'keep-alive',
      'sec-ch-ua': '" Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"',
      accept: '*/*',
      'sec-ch-ua-mobile': '?0',
      'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36',
      origin: 'http://localhost:3000',
      'sec-fetch-site': 'cross-site',
      'sec-fetch-mode': 'cors',
      'sec-fetch-dest': 'empty',
      referer: 'http://localhost:3000/',
      'accept-encoding': 'gzip, deflate, br',
      'accept-language': 'en-GB,en-US;q=0.9,en;q=0.8'
    },```

So from console log you can see host is: 127.0.0.1:3000

include socket.io from the root path:

<script src="/socket.io/socket.io.js"></script>

Now on the front end script you can get io this way:

const socket = io('127.0.0.1:3000');


This should work

Solution 4:[4]

You need to make sure that your node server is running. You can start the server by running

node server_file_name

server_file_name is the file that contains your socket.io server code, in your case it is

node server

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Abid_015
Solution 3 SK Shewa
Solution 4 Iwalewa Fawaz

Related Questions