2014-07-06 171 views
3

我正在嘗試使用Node.js,socket.io和express來創建一個簡單的聊天應用程序。但是,如果我單擊main.jade文件中的發送按鈕,頁面將刷新,並且不會顯示任何消息。我在Firebug也出現此錯誤:當我發送消息時,Socket.io聊天應用程序刷新

到WS連接://127.0.0.1:3000/socket.io/EIO = 2 &運輸= WebSocket的& SID = d_hNMPdXHed-j7LrAAAH中,而頁面中斷?正在加載。

Main.jade

doctype html 
html 
head 
    meta(charset = "UTF-8") 

    script(src="/socket.io/socket.io.js") 
    script(src="http://code.jquery.com/jquery-1.11.1.js") 
    script. 
     var socket = io(); 
     $('form').submit(function(){ 
      socket.emit('chat message', $('#m').val()); 
      $('#m').val(''); 
      return false; 
     }); 
     socket.on('chat message', function(msg){ 
      $('#messages').append($('<li>').text(msg)); 
     }); 

body  
    ul#messages 
    form(action = "") 
     input#m(type = "text") 
     button Send 

app.js

var express = require('express') 
var path = require('path'); 
var favicon = require('static-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 

var mongo = require('mongodb'); 
var mongodb = require("mongodb"); 
var monk = require('monk'); 
var db = monk('localhost:27017/pesterchum'); 


var routes = require('./routes/index'); 
var users = require('./routes/users'); 

var app = express(); 

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'jade'); 

app.use(favicon()); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded()); 
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.use(function(req,res,next){ 
    req.db = db; 
    next(); 
}); 

app.use('/', routes); 
app.use('/users', users); 

/// catch 404 and forward to error handler 
app.use(function(req, res, next) { 
    var err = new Error('Not Found'); 
    err.status = 404; 
    next(err); 
}); 

/// error handlers 

// development error handler 
// will print stacktrace 
if (app.get('env') === 'development') { 
    app.use(function(err, req, res, next) { 
    res.status(err.status || 500); 
    res.render('error', { 
     message: err.message, 
     error: err 
    }); 
    }); 
} 

// production error handler 
// no stacktraces leaked to user 
app.use(function(err, req, res, next) { 
    res.status(err.status || 500); 
    res.render('error', { 
    message: err.message, 
    error: {} 
    }); 
}); 


module.exports = app; 

WWW

#!/usr/bin/env node 
var debug = require('debug')('app'); 
var app = require('../app'); 

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

var server = app.listen(app.get('port'), function() { 
    debug('Express server listening on port ' + server.address().port); 
}); 

var io = require('socket.io').listen(server); 

io.sockets.on('connection', function(socket){ 
    socket.on('chat message', function(msg){ 
     io.sockets.emit('chat message', msg); 
    }); 
}); 

index.js

var express = require('express'); 
var router = express.Router(); 

/* GET Main page. */ 
router.get('/main', function(req, res) { 
     res.render('main', { title: 'Main'}); 
}); 

回答

2

看起來該頁面正在被重新加載,因爲您忘記了將您的客戶端js代碼與$(document).ready(function() { ... });

相關問題