jquery - socket.io 应用程序总是在提交时刷新

Question

我将 socket.io 安装到我的应用程序中。但是，当我按下表单上的提交按钮时，页面始终会刷新。

我在 Google 和 StackOverflow 上查找了这个问题，尝试了几种解决方案(例如确保我的套接字代码位于 $(document).ready()... 代码等)，但仍然没有成功。

我可以简单地看到一个console.log，说明我输入的数据值，因此该部分可以正常工作。

这是我的代码:

www

    #!/usr/bin/env node

/**
 * Module dependencies.
 */

 var app = require('../app');
 var debug = require('debug')('Webtech2:server');
 var http = require('http');

 //models
 var Comment = require("../models/comments");


/**
 * Get port from environment and store in Express.
 */

 var port = normalizePort(process.env.PORT || '3000');
 app.set('port', port);

/**
 * Create HTTP server.
 */

 var server = http.createServer(app);

//Sockets komen hier
var io = require("socket.io")(server);

io.on("connection", function(socket) {
  socket.on("postComment", function(data) {

    console.log("Socket.io: server received POST");
    //log data naar console
    console.log("Client data log:"+data);

    //stuur 'data' naar iedereen
    io.sockets.emit("update_comment", data);

    Comment.save(data, function(err,res) {
      console.log(res+" added to DB");
      io.emit('update:', res);
    });
  });
});

//op connection doe dit:
io.on("connected", function(socket) {
  Comment.find().exec(function(err, output) {
    socket.emit('show_data', output);
    console.log("Output: "+output);
  });
})

/**
 * Listen on provided port, on all network interfaces.
 */

 server.listen(port);
 server.on('error', onError);
 server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

 function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

 function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
  ? 'Pipe ' + port
  : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
    console.error(bind + ' requires elevated privileges');
    process.exit(1);
    break;
    case 'EADDRINUSE':
    console.error(bind + ' is already in use');
    process.exit(1);
    break;
    default:
    throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

 function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
  ? 'pipe ' + addr
  : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

public/javascripts/sockets_comments.js(自定义名称)

//jquery voor sockets -- socket.io documentation/
$(document).ready(function() {
    console.log("socket init ok");

    var socket = io();
    var result = "";

    //data ophalen en naar mongod
    $("#commentSubmit").on("click", function(e) {
        var commentAuthor = $("#commentName").val();
        var commentBody = $("#commentBody").val();
        var commentDate = new Date();

        //log van form data
        console.log("Data opgehaald met waarde: "+commentAuthor+" als author, "+commentBody+" als bodyText en "+commentDate+" als tijdstip.");

        //naar mongo
        result = {
            "cmt_author": commentAuthor,
            "cmt_body": commentBody,
            "cmt_date": commentDate
        }.save;

        //socket connect naar localhost op 3000 en post 
        var socket = io.connect("http://localhost:3000");
        socket.emit("postComment", result);
        console.log("Verzonden: "+result);

        //reset inputs na send
        $("#commentForm").val("");
    });

    //render
    socket.on("updateComment", function(data) {
        ///
        console.log("Data: "+data);
    });

    //loop visual data
    socket.on("showData", function(output) {
        //loop
        for(var comments = 0; comments < output.length; comments++)
        {
            ////
        }
    });
});

相关Jade查看文件

extends layout

block content
    header
        div.wrapper
            a(href='/')
              img(src="", alt="Logo")
            a.hvr-grow(href="/discussions") All threads
            span(style="color: white;")   -  
            a.hvr-grow(href="/discussions/create") Start a new thread

    div.pageContainer
        h1 #{discussion.title}
        span(id="categoryMarker" class="markers" style="font-size: 1.25em;") "#{discussion.category}"
         span  
         a.hvr-grow(href="/discussions" style="float: right; margin-right: 25px;") Back to all threads
        h3 Started by #{discussion.author}
            |  -  
            span Created on #{discussion.date.toDateString()}
            span(style="display: none;")  - #{discussion.location}
            br
            br
            div#bodyText
                p #{discussion.body}
    div#commentsSection.pageContainer
        form(action="" name="inputComment" id="commentForm")
            input(id="commentName", placeholder="Your name" name="commentName" required)
            br
            br
            input(id="commentBody", placeholder="Your comment" name="commentBody" required)
            br
            br
            button(class="hvr-grow" type="submit" id="commentSubmit" style="color: black;") Post comment
    script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js")
    script(src="http://localhost:3000/socket.io/socket.io.js")
    script(src="/javascripts/sockets_comments.js")   

Answer 1

只需将 e.preventDefault(); 放在 click 处理程序的开头即可:

$("#commentSubmit").on("click", function(e) {
    e.preventDefault();
    var commentAuthor = $("#commentName").val();
    //...
});

顺便说一句，您不必在每次单击时连接到 socket.io 服务器。您应该只连接一次，就像使用 var socket = io(); 那样，因此您可以删除此行:

var socket = io.connect("http://localhost:3000");

编辑: 正如 @lxe 所注意到的，实际上最好监听表单的 submit 事件，因为它也允许您拦截按 Enter 键。