Page reloads after form request

Posted 1 year ago by Rainieren

Hello, I'm currently following Jeffery's tutorial about socket io. I'm at the first part. But I have a small problem. I have the same code as him until the part where he adds the function that prints out the message in the console. But my page just refreshed when I press the button, and I can't figure out why? The only thing I did was change a couple of the variable names. I came to an understanding that this has something to do with e.preventDefault(); But I could be wrong, but I don't know. If it does, It somehow does not work for me. Any suggestions on how to solve this issue? I'll leave my code below, Just for sure


var app = require('express')(); //Express is een framework die ik gesinstalleerd heb via npm install express. Wat het doet weet ik niet maar ik haal het binnen via hier
var server = require('http').Server(app); //Dit maak een nieuwe server aan
var io = require('')(server); //Haalt op

server.listen(8000, function() {

}); //Hij luistert af naar htdocs met poort nummer 8000

app.get('/', function(request, response) { //Hier pakt hij de hoofdpagina en alles wat je erin zet wordt uitgevoerd
    response.sendFile(__dirname + '/index.html');

io.on('connection', function(socket) {
    socket.on('chat.bericht', function(bericht) {
        console.log('Nieuw Bericht: ' + bericht);
    console.log('Er is iemand verbonden met de server!')


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Real time Project</title>
<body id="chat">
    <form v-on="submit: send">
        <input v-model="bericht">
        <button type="submit">Verzend naar de server</button>

    <script src=""></script>
    <script src=""></script>
        var socket = io();

        new Vue({
            el: '#chat',

            data: {
                bericht: ''

            methods: {
                send: function(e) {
                    socket.emit('chat.bericht', this.bericht);


Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.