socket.io - socket.on 等待承諾

Question

我有一個按鈕與服務器進行一些通信，以檢查輸入的值（通過輸入框）是否已經存在。 代碼如下：

$("#button").click(function () {
    var exists = false;
    var name = $("#name").val();
    socket.emit("check", name);

    socket.on("checkReturn", function (data) {
        exists = data.result;
    });

    if (exists) {
        console.log("exists")
    } else {
        if (name.length > 0) {
            socket.emit("create", name);
        }
    }
});
});

問題在於checkReturn調用是異步的，因此代碼會繼續執行而無需實際等待結果。 我如何確保checkReturn首先完成，然后才執行其余代碼？

Answer 1

除了其他答案，您還可以使用確認，在客戶端和服務器之間傳遞回調。 然后你可以只使用emit函數的回調：

$("#button").click(function() {
  var exists = false; 
  var name = $("#name").val(); 

  socket.emit('check', name, function (data) { 
    exists = data.result;
    if (exists) console.log("exists");
    else (if (name.length > 0) socket.emit("create", name));
  });
});

在服務器端，它看起來像這樣：

io.sockets.on('connection', function (socket) {
  socket.on('ferret', function(name, fn) {
    // find if "name" exists
    fn({ exists: false });
  });
});

Answer 2

@hexacyanide aswer 的替代方案可以這樣完成：

$("#button").click(async function() {
  var exists = false; 
  var name = $("#name").val(); 

  exists = await new Promise(resolve => socket.emit('check', name, data => resolve(data.result)))

  if (exists) console.log("exists");
  else (if (name.length > 0) socket.emit("create", name));
});

套接字發射被包裹在一個承諾中，因此它可以等待回調，並避免嵌套在多個花括號內。

不是那么優雅，但如果將代碼封裝在單獨的函數中，可以使您的代碼更易於閱讀：

function check(name){
  return new Promise(resolve => socket.emit('check', name, data => resolve(data.result)))
}

並像這樣使用：

$("#button").click(async function() {
  var exists = false; 
  var name = $("#name").val(); 

  exists = await check(name)

  if (exists) console.log("exists");
  else (if (name.length > 0) socket.emit("create", name));
});

Answer 3

$("#button").click(function () 
{ var exists = false; 
var name = $("#name").val(); 
socket.emit("check", name);

socket.on("checkReturn", function (data) { 
exists = data.result;
if (exists) { console.log("exists") } else { if (name.length > 0) { socket.emit("create", name); } } });    
});

Answer 4

您可以使用 socket.io.wait 從 socket.io 獲取同步響應：

https://www.npmjs.com/package/socket.io.wait

$("#button").click(async function ()
{
    var exists = false;
    var name = $("#name").val();

    let exists = await socket.emitWait("check", name);


    if (exists == true)
    {
        console.log("exists");
    } 
    else
    {
        if (name.length > 0)
        {
            socket.emit("create", name);
        }
    }
});