问题描述
我正在尝试构建一个表单,该表单在提交时发送带有填充数据的通知。当我运行代码时,它在控制台上向我显示此错误
polling-xhr.js:229 GET http:// localhost:3000 / socket.io /?EIO = 4&transport = polling&t = NMtL4rR net :: ERR_CONNECTION_REFUSED
此错误似乎是溢出
这是我的代码
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/bootstrap@4.5.3/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/bootstrap@4.5.3/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,shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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"
}
}
我在这里需要更改什么?
解决方法
我认为您需要一个 CORS
模块。有两种方式
- 使用 npm
npm install cors
// server.js
...
app.use(require('cors')())
...
- 启用 CORS 选项(如果您使用的是 Socket.IO v3)
const io = require("socket.io")(http,{
cors: {
origin: "http://localhost:4200",methods: ["GET","POST"]
}
})
http.listen(3000)
,
我有相同的讯息! 我还尝试将服务器端链接到客户端。 该代码有效,但是几天后我收到了此消息...
为什么会这样?
,我通过在客户端放置“127.0.0.1:3000”而不是“https://localhost:3000”解决了这个错误。这是我的代码
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);
});
});
});
上面从服务器端首先检查登录套接字是否连接了套接字。然后在控制台日志检查有这样的标题:
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