the problem in a nutshell is:socket.emit('test2') inside socket.on('test1') is not working if the event 'test1' is fired with socket.on('test1') inside an event listener function in the browser.
process is supposed to go this way:
- user clicks on the submit button on the webpage
- event listener attached to the submit button executes
socket.emit('test1') socket.on('test1')function runs inside serversocket.on('test1')function includessocket.emit('test2')which is then firedsocket.on('test2')runs on the browser
problem is 5th step is not working, that means socket.emit('test2') didn't run in the 4th step.
can anyone tell me if i'm missing something here? why wouldn't it work? step 5 would work if `socket.on('test1') is not inside an event listener function.
EDIT: I've checked the browser websocket logs as suggested by @laggingreflex
and I've noticed the the 'test2' is fired by the server and is received
by the browser but the socket.on('test2') function is not invoked somehow, this is so strange.
heres the code piece if needed:
// 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;
}
I'm a beginnner programmer, I hope I've simplified everything good enough. Please ignore the semicolon and bracket errors if you notice any, I pasted and edited the code here. Thank you.