如何将表单输入值传递给socket.emit parms中的变量答案

【问题标题】：How to pass form input value into variable in socket.emit parms如何将表单输入值传递给socket.emit parms中的变量
【发布时间】：2018-11-15 09:32:36
【问题描述】：

我想将表单中的username 输入传递给socket.emit params。然而，当我踏入socket.on function 时，userName 是未定义的。这应该是范围问题，而我不知道如何解决。我省略了一些代码以简化问题。不需要让代码可运行，我只是想知道如何处理这个问题的方法。

$("button").click(function (event) {
    event.preventDefault();
    setUserName($("input[name=name]").val());
});

var userName;

function setUserName(userName2) {
   userName=userName2;
}

var socket = io();

socket.on('connect', function () {
  var params = {
      name:userName
  }

  socket.emit('join', params, function (err) {
    
  });
});

<body class="centered-form">
  <div class="centered-form__form">
    <form>
      <div class="form-field">
        <label>Display name</label>
        <input type="text" name="name" autofocus/>
      </div>
      <div class="form-field">
        <button id="submit">Submit</button>
      </div>
    </form>
  </div>
</body>
<script src="/libs/jquery-3.1.0.min.js"></script>
<script src="/chat.js"></script>

【问题讨论】：

console.log(this) 看看它是什么。此外，据我从您的 sn-p 可以看出，您在全局范围内将 userName 设置为 var，所以我不确定您为什么首先尝试使用 this。

标签： javascript jquery html node.js socket.io

【解决方案1】：

您的用户名存在范围问题

$("button").click(function (event) {
    event.preventDefault();
    setUserName($("input[name=name]").val());
});

var userName;

function setUserName(userName) {
  //this refers to the scope of the function
   this.userName=userName;
}

var socket = io();

socket.on('connect', function () {
  var params = {
      //this refers to the scope of the socket
      name:this.userName
  }

  socket.emit('join', params, function (err) {
    
  });
});

试试

$("button").click(function (event) {
    console.log('__BUTTON_EVENT__');
    event.preventDefault();
    
    let name = $("input[name=name]").val();
    console.log('__USER_NAME__: ', name);
    setUserName(name);
});

var userName;

function setUserName(name) {
   userName = name;
}

var socket = io();

socket.on('connect', function () {
  var params = {
      name:userName
  }
  console.log('__CONNECTING__: ', params.name);

  socket.emit('join', params, function (err) {
    
  });
});

【讨论】：

是的，我试过了，但它仍然未定义。如果我为 userName 分配一个值，例如 var userName="888"，则 params 中的 userName 将为“888”。
问题很可能发生在点击事件或连接事件中。在调用 click 和 on 时尝试控制台日志记录。将发布修订
Alos，socket 连接何时启动？