admin管理员组

文章数量:1323730

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="/[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=".5.1.slim.min.js" integrity="sha384- 
 DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="/[email protected]/dist/js/bootstrap.bundle.min.js" 
   integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" 
   crossorigin="anonymous"></script>
   <script src=".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="/[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=".io/3.0.1/socket.io.js"></script>

<script src=".4.1/jquery.min.js"></script>

<script src=".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=".5.1.slim.min.js" integrity="sha384- 
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="/[email protected]/dist/umd/popper.min.js" integrity="sha384- 
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="/[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?

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/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./jquery-3.5.1.slim.min.js" integrity="sha384- 
 DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr/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./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/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./ajax/libs/socket.io/3.0.1/socket.io.js"></script>

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

<script src="https://cdnjs.cloudflare./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./jquery-3.5.1.slim.min.js" integrity="sha384- 
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384- 
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr/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?

  • javascript
  • html
  • notifications
Share Improve this question edited Nov 11, 2020 at 15:07 James Z 12.3k10 gold badges27 silver badges47 bronze badges asked Nov 11, 2020 at 13:04 cbracbra 771 gold badge3 silver badges11 bronze badges 3
  • But how do you serve your HTML files? There's nothing in your server code about serving your files, like express.static() or app.get("/"). How do you display them? – Jeremy Thille Commented Nov 11, 2020 at 13:19
  • sorry, i've just prepared this code from a youtube video – cbra Commented Nov 12, 2020 at 4:38
  • ... but what's the answer to my question? :) – Jeremy Thille Commented Nov 12, 2020 at 7:43
Add a ment  | 

4 Answers 4

Reset to default 5

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)

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);

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

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

本文标签：

版权声明：本文标题：javascript - polling-xhr.js:229 GET http:localhost:3000socket.io?EIO=4&amp;transport=polling&amp;t=NMtL4rR net::ERR_CONN 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742121016a2421697.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。