Javascript 如何在client.js中访问登录表单的输入标记值（名称）

我不知道如何解释这一点，但：

我正在使用socket.io和NodeJS（Express）制作一个聊天应用程序——一切都进行得很顺利，我曾经给出输入姓名的提示，因此它很容易被访问为

const name=prompt（“输入您的姓名”）

但是现在我决定使用一个登录页面而不仅仅是一个提示，我制作了一个输入标签表单

主要问题来了：我有两个JS文件，client.JS和Server.JS

当我输入我的名字并按Enter键时，页面将重定向到主应用程序，因此更难的部分来了：如何访问该输入名称，以便在client.js中将该名称用作变量

比如，我可以通过使用body Parse轻松访问Server.js中的输入名称——只需使用
req.body.name
，但如果我在Client.js中需要相同的名称呢

我正在把我的两个文件都放上去。请看一看

原谅我把事情搞得一团糟

Client.js:

const socket = io();
const form = document.getElementById("sendContainer");
const messageInput = document.getElementById("messageInput");
const messageContainer = document.querySelector(".container");
const name = prompt("Enter your name");
var audio = new Audio("sound.mp3");

const append = (message,position)=>{
  const messageElement = document.createElement('div');
  messageElement.innerText = message;
  messageElement.classList.add("message");
  messageElement.classList.add(position);
  messageContainer.append(messageElement);
  if(position==="left"){
      audio.play();
  }

}

form.addEventListener('submit', (e)=>{
  e.preventDefault();
  const message = messageInput.value;
  append(`You: ${message}`, "right");
  socket.emit("send", message);
  messageInput.value = "";
})




socket.emit('new-user-joined', name); //This is where i need the name so that server side can access the name


socket.on("user-joined", (name)=>{
append(`${name} joined the chat`, "right");
})

socket.on("recieve", (data)=>{
append(`${data.name}: ${data.message} `, "left");
})

socket.on("left", (name)=>{
  append(`${name} has left the chat`, "left");
})

const express = require("express");
const http = require("http");
const app = express();
const socketio = require("socket.io");
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended:true}));


const path = require("path");
const server = http.createServer(app);
const io = socketio(server);
const PORT = 3000 || process.env.PORT;
app.use(express.static(path.join(__dirname, "public")));
const users = {}

app.get("/", (req,res)=>{
  res.sendFile(__dirname + "/public/signup.html");
})

// app.get('/signup.html', function(req, res) {
//   const name = req.body.firstName;
// });

app.post("/", (request,respond)=>{

  respond.sendFile(__dirname +"/public/chat.html");
})






io.on("connection", (socket)=>{
  socket.on("new-user-joined", (name)=>{
    console.log("New User", name);
    users[socket.id] = name;
    socket.broadcast.emit("user-joined", name);
  });

  socket.on("send", (message)=>{
    socket.broadcast.emit("recieve", {message: message, name: users[socket.id]})
  });


socket.on("disconnect", (message)=>{
  socket.broadcast.emit("leave", users[socket.id]);
  delete users[socket.id];
});


});
server.listen(PORT, ()=>{
  console.log("Server has just started...");
})

Server.js:

const socket = io();
const form = document.getElementById("sendContainer");
const messageInput = document.getElementById("messageInput");
const messageContainer = document.querySelector(".container");
const name = prompt("Enter your name");
var audio = new Audio("sound.mp3");

const append = (message,position)=>{
  const messageElement = document.createElement('div');
  messageElement.innerText = message;
  messageElement.classList.add("message");
  messageElement.classList.add(position);
  messageContainer.append(messageElement);
  if(position==="left"){
      audio.play();
  }

}

form.addEventListener('submit', (e)=>{
  e.preventDefault();
  const message = messageInput.value;
  append(`You: ${message}`, "right");
  socket.emit("send", message);
  messageInput.value = "";
})




socket.emit('new-user-joined', name); //This is where i need the name so that server side can access the name


socket.on("user-joined", (name)=>{
append(`${name} joined the chat`, "right");
})

socket.on("recieve", (data)=>{
append(`${data.name}: ${data.message} `, "left");
})

socket.on("left", (name)=>{
  append(`${name} has left the chat`, "left");
})

const express = require("express");
const http = require("http");
const app = express();
const socketio = require("socket.io");
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended:true}));


const path = require("path");
const server = http.createServer(app);
const io = socketio(server);
const PORT = 3000 || process.env.PORT;
app.use(express.static(path.join(__dirname, "public")));
const users = {}

app.get("/", (req,res)=>{
  res.sendFile(__dirname + "/public/signup.html");
})

// app.get('/signup.html', function(req, res) {
//   const name = req.body.firstName;
// });

app.post("/", (request,respond)=>{

  respond.sendFile(__dirname +"/public/chat.html");
})






io.on("connection", (socket)=>{
  socket.on("new-user-joined", (name)=>{
    console.log("New User", name);
    users[socket.id] = name;
    socket.broadcast.emit("user-joined", name);
  });

  socket.on("send", (message)=>{
    socket.broadcast.emit("recieve", {message: message, name: users[socket.id]})
  });


socket.on("disconnect", (message)=>{
  socket.broadcast.emit("leave", users[socket.id]);
  delete users[socket.id];
});


});
server.listen(PORT, ()=>{
  console.log("Server has just started...");
})

又是我。所以我没有得到任何人的回应。我自己又试过了。谁呼！我想出来了

我使用了Qs cdn——一种支持嵌套和数组的查询字符串解析器，具有深度限制

现在，我可以简单地这样写：

const fullName = Qs.parse(location.search), {ignorePrefixQuery:true});

只需将名字命名为：

const name = fullName.firstName;

并尽可能使用name变量