时间戳

首页 > 解决方案 > Socket.io：事件侦听器中的 Socket.emit 工作非常奇怪

javascript - Socket.io：事件侦听器中的 Socket.emit 工作非常奇怪

问题描述

简而言之，问题是：如果在浏览器中的事件侦听器函数内部触发了事件“test1”，则
socket.emit('test2')内部不起作用。socket.on('test1')
socket.on('test1')

过程应该是这样的：

  1. 用户点击网页上的提交按钮
  2. 附加到提交按钮的事件监听器执行socket.emit('test1')
  3. socket.on('test1')函数在服务器内部运行
  4. socket.on('test1')函数包括socket.emit('test2')然后被触发
  5. socket.on('test2')在浏览器上运行

问题是第 5 步不起作用，这意味着 socket.emit('test2') 没有在第 4 步运行。

谁能告诉我我是否在这里遗漏了什么？为什么它不起作用？如果 `socket.on('test1') 不在事件侦听器函数中，第 5 步将起作用。

编辑：我已经按照@laggingreflex 的建议检查了浏览器 websocket 日志，我注意到“test2”被服务器触发并被浏览器接收，但没有以某种方式调用该函数socket.on('test2')，这太奇怪了。

如果需要，这里是代码片段：

// SERVER SIDE

var express = require('express');
var app = express();
var socket  = require('socket.io');

// console.log(process.env.PORT);
var ip = process.env.IP || '127.0.0.1';
var port = process.env.PORT || '1336';


var server = app.listen(port, ip);

io = socket.listen(server);

io.on('connection', function(socket){
    console.log('a user connected'+socket.id);

    socket.on('disconnect', function(){
        console.log('user disconnected');
    });

    socket.on('REQlogin', function(data){
        socket.emit('test2',"this line won't work");
        console.log(data.username+" "+data.password);
    });


    socket.on('returnreqtest', function(){
        socket.emit('test',"this will work");
    });

//404 page

app.use(function(req, res){
    res.status(404).send("not found");
});

// BROWSER SIDE

var socket = io()
// socket.emit('test', "testy");

var loginForm = document.getElementById('loginform');
var loginForm_Username = document.getElementById('loginform_username');
var loginForm_Password = document.getElementById('loginform_password');
loginForm.addEventListener('submit', function(e){
    e.preventDefault();
    login_data = {username: loginForm_Username.value,
                  password: loginForm_Password.value};
    socket.emit('REQlogin', login_data);
});

socket.on('test', function(da){
    da = da?da:"";
    console.log("."+da);
});

socket.on('test2', function(da){
    da = da?da:"";
    console.log("."+da);
});

// socket.emit('REQlogin', {username: "myassesess", password: "frickthis"}); //debug test


<!-- BROWSER HTML -->

<html>
    <head>
        <link href="/assets/styles/mainstyleA.css" rel="stylesheet"/>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
    </head>
    <body class="preload flexColumn">
        <div id="mainwrapper" class="flexColumn">
            <form id="loginform" class="flexColumn">
                <p class="maintext">login</p>
                <span style="height:60px;"></span>
                <input id="loginform_username" class="log_reg_input"type="text" placeholder="username"/>
                <input id="loginform_password" class="log_reg_input"type="password" placeholder="password"/>
                <a href="register">create an account</a>
                <input id = "formsubmit" style="visibility: hidden;" type="submit"></input>
            </form>
        </div>
        <!-- scripts -->
        <script src = "/assets/scripts/loginpagecode.js"></script>
    </body>
</html>


/* CSS if you dont want to tackle an ugly page */
*{
    margin: 0px;
    padding: 0px;
    /* color: white */
}

.preload * {
    transition: none;
}

body{
    background-color: #7FFED4;
    height: 100%;
    width: 100%;
    /* +flex */
}

.flexColumn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#mainwrapper{
    height:400px;
    width: 300px;
    background-color: aliceblue;
    box-shadow: #7FFED4 2px 2px, white 5px 5px;
    transition: box-shadow .3s;

}

#mainwrapper:hover{
    box-shadow: #7FFED4 2px 2px, rgba(255, 255, 255, 0) 30px 30px 30px;
}

.maintext{
    color: #5014c7;
    font-family: Tahoma;
    font-size: 30px;
    text-align: center;
    margin: 5px;
}

.log_reg_input{
    border: 2px solid rgb(7, 161, 167);
    padding: 6px;
    margin: 10px;
    color: grey;
    text-align: center;
    letter-spacing: 1px;
    transition: letter-spacing .2s;
}

.log_reg_input:hover{
    letter-spacing: 2px;

}


.log_reg_input::placeholder{
    letter-spacing: 5px;
    text-align: center;
    transition: letter-spacing .2s, color .2s;
}

.log_reg_input:focus{
    outline: none;
    letter-spacing: 2px;
}

.log_reg_input:hover::placeholder{
    color: rgba(0, 0, 0, .3);
    letter-spacing: 6px;
}

.log_reg_input:focus::placeholder{
    color: rgba(255,255,255,0)
}

a:link, a:active, a:visited{
    text-decoration-line: none;
}

a:hover{
    text-decoration-line: underline;
}

我是一个初学者程序员，我希望我已经简化了一切足够好。如果您发现任何分号和括号错误，请忽略，我在这里粘贴并编辑了代码。谢谢你。

标签： javascriptnode.jswebsocketsocket.io

解决方案

推荐阅读