在与 socket.io 聊天时跟踪用户的问题

Question

我正在尝试与socket.io 建立实时聊天。但是，我在用户方面遇到了一些问题。一旦使用“userSet”事件进行设置，“user”变量在事件外部将变为未定义。你能帮我吗？

服务器：

  const express = require("express");
const http = require("http");
const { Server } = require("socket.io");

const app = express();
const httpServer = http.createServer(app);
const io = new Server(httpServer);

app.use(express.static("./www"));
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

const users = [];

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

io.on("connection", (socket) => {
  console.log("Utente connesso");
  console.log(users.toString());
  socket.on("setUsername", (data) => {
    if (users.indexOf(data) > -1) {
      socket.emit("checkUser", "Il nome " + data + " è già stato preso. Riprova con un altro.");
    } else users.push(data);
    console.log("Benvenuto " + data);
    socket.emit("userSet", data);
  });

  socket.on("messaggio", (data) => {
    console.log("mes: " + data);
    io.emit("mostraMessaggio", data);
  });
});

httpServer.listen(3000);

客户：

      const socket = io();
var par;

function setUsername() {
  socket.emit("setUsername", document.getElementById("username").value);
}

let user;

socket.on("userSet", (data) => {
  user = data;
  alert("set " + user + " " + data);
});

socket.on("checkUser", (data) => {
  alert(data);
  alert("c" + user);
});

function inviaMessaggio() {
  const msg = document.getElementById("testo").value;
  alert("i " + user);
  if (msg) {
    socket.emit("messaggio", msg);
  }
}

socket.on("mostraMessaggio", (data) => {
  if (user) {
    par = document.createElement("p");
    par.id = "messaggio";
    par.innerHTML = user + ": " + data;
    document.getElementById("chat").appendChild(par);
  }
});

我已经尝试过将用户名作为 json 传递，例如使用

{msg: msg, user:user}

。但问题是，在

userSet

事件之外，用户变量未定义

Answer 1

user

变量的范围问题。 要解决此问题，您需要在更广泛的范围内声明

user

变量，以便可以在整个模块中访问它。您可以通过在事件处理程序外部声明它来完成此操作。

这是客户端代码的更新版本：

const socket = io();
var par;
let user; // Declare user variable outside of the setUsername function

function setUsername() {
  const username = document.getElementById("username").value;
  socket.emit("setUsername", username);
}

socket.on("userSet", (data) => {
  user = data;
  alert("set " + user + " " + data);
});

socket.on("checkUser", (data) => {
  alert(data);
  alert("c" + user);
});

function inviaMessaggio() {
  const msg = document.getElementById("testo").value;
  alert("i " + user);
  if (msg) {
    socket.emit("messaggio", msg);
  }
}

socket.on("mostraMessaggio", (data) => {
  if (user) {
    par = document.createElement("p");
    par.id = "messaggio";
    par.innerHTML = user + ": " + data;
    document.getElementById("chat").appendChild(par);
  }
});