如何与多个客户实时共享表单输入值?

对于毕业论文,我必须为硬件维修公司创建一个网站,该网站将代替信息表被使用,从而使它更舒适。 我的问题是,有没有办法同时向多个客户显示实时表单值(不提交)?

预期的情况如下:

  • 员工在其计算机上填写公司信息

  • 客户端通过平板电脑填写其信息和设备问题

他们俩都可以看到表单的其他类型。

我一直在寻找socket.io,因为我知道您可以使用它进行实时项目。

我想使用Vuejs作为前端框架。

谢谢。

imauzhw 回答:如何与多个客户实时共享表单输入值?

您可以尝试以下(非常基本的)示例:

文件夹和文件:

  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>

server.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,然后尝试。

这只是一个提示,仍然有很多工作要做。

, 我认为

Socket.IO是一个不错的选择。实际上,许多nodejs的人都喜欢使用它。但是,第一次处理实时数据可能会有些痛苦。因此,我强烈推荐FeathersJS。它具有强大的CLI,可以立即创建CRUD操作。此外,它还允许REST和实时数据传输。它基于ExpressJS。

本文链接:https://www.f2er.com/3157368.html

大家都在问