我做了一个实时聊天应用程序。使用Mysql数据库。
我本地系统中的代码运行完美，即通过
获取方法
http://localhost:3000/index.htmlindex.htmlserver.js$.get('http://localhost:3000/messages', (data) => {
有了这个
实时服务器
$.get('https://repoName.netlify.app/messages', (data) => {
如果我有机会解决这个障碍，我将不胜感激！ 索引.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div class="jumbotron">
<h1 class="display-4">Send Message</h1>
<br>
<input id="name" class="form-control" placeholder="Name">
<br>
<textarea id="message" class="form-control" placeholder="Your Message Here"></textarea>
<br>
<button id="send" class="btn btn-success">Send</button>
</div>
<div id="messages">
</div>
</div>
<script>
$(() => {
$("#send").click(() => {
sendMessage({
name: $("#name").val(),
message: $("#message").val()
});
})
getMessages()
})
function addMessages(message) {
$("#messages").append(`
<h4>${message.name} : </h4>
<p>${message.message}</p>`)
}
function getMessages() {
$.get('http://localhost:3000/messages', (data) => {
data.forEach(addMessages);
})
}
function sendMessage(message) {
$.post('http://localhost:3000/messages', message)
getMessages()
}
</script>
</body>
</html>
服务器.js
var express = require('express')
var app = express()
var db = require('./connection')
var bodyParser = require('body-parser')
var cors = require('cors')
app.use(express.static(__dirname))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(cors())
// mysql
function selectUser() {
return new Promise((resolve, reject) => {
let sql = `Select * from user`
db.query(sql, (err, result) => {
if (err) throw err
resolve(result)
})
})
}
let insertUser = (name, msg) => {
return new Promise((resolve, reject) => {
let sql = `INSERT INTO user (name, message) VALUES ('${name}','${msg}')`
db.query(sql, (err, result) => {
if (err) { reject(err) }
resolve(result)
})
})
}
// routes
app.get('/messages', async (req, res) => {
console.log(req.body);
let data
await selectUser().then((response) => {
JSON.stringify(response)
data = response
})
res.send(data)
})
app.post('/messages', async (req, res) => {
console.log(req.body);
await insertUser(req.body.name, req.body.message).then(() => {
}).catch(() => {
res.sendStatus(500)
})
res.sendStatus(200)
})
// port
var server = app.listen(3000, () => {
console.log('Server is running on port', server.address().port);
})
您在 Netlify 上部署实时聊天应用程序时遇到的问题可能是由于您使用本地开发 URL 向服务器发出 AJAX 请求
(http://localhost:3000/messages)以下是如何修改代码以使其在本机和部署到 Netlify 时都可以工作：
更新 index.html 中的 JavaScript 代码，以便为 AJAX 请求使用相对 URL。更改此行：
$.get('http://localhost:3000/messages', (data) => {
与：
$.get('/messages', (data) => {
同样，以同样的方式更新您的 $.post 请求：
$.post('/messages', message)
此更改允许您的应用程序向其托管的同一域发出请求，无论是在本地服务器上还是在 Netlify 上。
确保您的服务器在部署到 Netlify 时配置为侦听正确的端口。在您的 server.js 中，您当前正在使用端口 3000：
var server = app.listen(3000, () => {
console.log('Server is running on port', server.address().port);
})
在Netlify等生产环境中，使用端口3000是不可行的。 Netlify 动态分配端口，您应该依赖 process.env.PORT 变量来确定正确的端口：
var server = app.listen(process.env.PORT || 3000, () => {
console.log('Server is running on port', server.address().port);
})
通过实施此调整，您的服务器将侦听 Netlify 分配的端口。
在这些更新之后，您的应用程序应该在本地开发和部署在 Netlify 上时都能无缝运行，从而消除任何路由问题。部署到生产环境时请务必调整您的服务器配置。