对于我的毕业论文,我必须为硬件维修公司制作一个网站,该网站将用来代替信息表,以使其更舒适。 我的问题是,有没有办法同时向多个客户端显示实时表单值(无需提交)?
预期场景如下:
员工在电脑中填写公司信息
客户通过平板电脑填写他们的信息和设备问题
他们都可以看到对方在表单中输入的内容。
我一直在寻找 socket.io,因为我知道你可以用它来制作实时项目。
我想使用Vuejs作为前端框架。
提前谢谢您。
最佳答案
您可以尝试以下(非常基本的)示例:
文件夹和文件:
server.js
package.json
-public
index.html
bix.js
package.json
{
"dependencies": {
"express": "^4.17.1",
"socket.io": "^2.3.0"
}
}
index.html
<html>
<body>
<h1>Bix</h1>
<h3>
first input: <input id='first' type='text' /><br><br>
second input: <input id='second' type='text' /><br><br>
</h3>
<script src='/socket.io/socket.io.js'></script>
<script src='bix.js'></script>
</body>
</html>
服务器.js
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const PORT = 5000;
app.use(express.static('public'));
http.listen(PORT, () => {
console.log('server listening on port ' + PORT);
});
io.sockets.on('connection', socket => {
socket.on('first', value => {
io.emit('first', value);
});
socket.on('second', value => {
io.emit('second', value);
});
});
bix.js
const socket = io();
const first = document.getElementById('first');
const second = document.getElementById('second');
first.addEventListener('input', () => socket.emit('first', first.value));
second.addEventListener('input', () => socket.emit('second', second.value));
socket.on('first', value => {
first.value = value
});
socket.on('second', value => {
second.value = value;
});
创建文件,运行npm install
,运行node server
,在两个选项卡中打开http://localhost:5000
并尝试请。
这只是一个提示,还有很多工作要做。
关于javascript - 如何与多个客户端实时共享表单输入值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58717078/