CODEWITHSUNDEEP
javascripthtmlnode.jsexpresssocket.io
William Jones
William Jones

Reputation: 1129

NodeJS - socket.on doesn't appear to be called

I am using the Node.JS POST method to submit a form to my server. It is transmitted to the server fine; no problems occur at this stage. However, when I use io.emit with socket.io to transfer the data back to the client, nothing seems to happen client-side. Nothing is printed to the console and I'm getting no errors there or in Command Prompt (where I'm running the server from).

index.html:

<form id="schoolCreateForm" action="http://localhost:3000/createSchool" method="POST">
    School name: <input name="schoolName" type="text"><br><br>
    Private?: <input name="schoolPrivate" type="checkbox"><br><br>
    Entry password: <input name="entryPassword" type="password"><br><br>
    <button type="submit">Submit</button>
</form>

<script>
    var socket = io();
    socket.on('updateSchool', function(response) {
        console.log(response);
        document.getElementById("headerSchoolName").innerHTML = data.schoolName;
    });
</script>

app.js:

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

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());

app.post('/createSchool', function(req, res) {
    response = {
        school_name: req.body.schoolName,
        school_private: req.body.schoolPrivate,
        entry_password: req.body.entryPassword
    };
    console.log(response);

    res.sendFile(__dirname + '/client/index.html');

    io.emit('updateSchool', response);
});

serv.listen(3000);
console.log("Server started on localhost://3000");

Does anyone know what's going on?

Upvotes: 0

Views: 55

Answers (1)

Nver Abgaryan
Nver Abgaryan

Reputation: 621

<form  action="http://localhost:3000/createSchool" method="POST">
School name: <input name="schoolName" type="text"><br><br>
Private?: <input name="schoolPrivate" type="checkbox"><br><br>
Entry password: <input name="entryPassword" type="password"><br><br>
<button type="submit" id="schoolCreateForm">Submit</button>

After submitting your form data it will reload your page, it means socket connection will be ended. If you want to see a response with socket make ajax.post request without reloading the page. 

<form id="schoolCreateForm">
School name: <input name="schoolName" type="text"><br><br>
Private?: <input name="schoolPrivate" type="checkbox"><br><br>
Entry password: <input name="entryPassword" type="password"><br><br>
<button type="submit">Submit</button>
</form>

<script>
   document.querySelector('#schoolCreateForm').addEventListener('click', 
   function(e) {
     e.proventDefault() // this line will not all to reload page after 
                       /// submitting the 
                       //form data
 ### writh you ajax request functionality here 

  })
var socket = io();
socket.on('updateSchool', function(response) {
    console.log(response);
    document.getElementById("headerSchoolName").innerHTML = data.schoolName;
});

Upvotes: 1

Related Questions