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

标签 javascript node.js socket.io

对于我的毕业论文,我必须为硬件维修公司制作一个网站,该网站将用来代替信息表,以使其更舒适。 我的问题是,有没有办法同时向多个客户端显示实时表单值(无需提交)?

预期场景如下:

  • 员工在电脑中填写公司信息

  • 客户通过平板电脑填写他们的信息和设备问题

他们都可以看到对方在表单中输入的内容。

我一直在寻找 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/

相关文章:

node.js - socket.io 获取所有已连接客户端数量的房间

javascript - node.js/JavaScript 语法 - 向传递的参数添加额外的参数

javascript - chartjs 不工作 php 页面但在 html 页面上工作

javascript - 如何设置 ember 引擎?

javascript - node.js ParseError - 哪个文件抛出错误?

javascript - 当 Socket.io 发出完成时运行函数

node.js - 如何从 Socket.IO 响应将数据加载到 Ember Data 中?

javascript - 如何为gapi添加onload事件?

javascript - 检查函数是否始终返回 bool 值

javascript - 如何在 Node.js 中设置请求的当前工作目录?