express.js 在加载视图后传递变量答案

【问题标题】：express.js passing variables after loading viewexpress.js 在加载视图后传递变量
【发布时间】：2014-01-03 11:05:12
【问题描述】：

我正在编写一个聊天应用程序。首先我通过 Ajax 加载了我的视图，但后来我意识到这没有必要，因为我可以在 express insted 中使用导出。我认为这是一个更好的解决方案，但我现在不知道如何将变量从我的登录表单传递给 script.js。将 room.js 中的用户名 (username = req.body.user;) 传递给 server.js 是可行的，因为我在控制台中有一个正确的名称，我输入了文本输入，但是当我向 script.js 发出“测试”时没有任何反应，我的浏览器控制台中什么都没有。我想控制台中的消息会出现片刻，然后新视图被加载，所以它消失了。我试图改变代码的顺序，但没有帮助。有什么建议吗？难道我做错了什么？我刚刚开始学习 node 和 express，所以我将不胜感激。

server.js

 var express = require('express')
                , routes = require('./routes')
                , music = require('./routes/music')
                , art = require('./routes/art')
                , rooms = require('./routes/rooms')
                , http = require('http')
                , app = express()
                , server = http.createServer(app)
                , io = require('socket.io').listen(server)
                , path = require('path')
                , jade = require('jade')
                , mysql = require('mysql');

        app.configure(function() {
            app.set('views', __dirname + '/views');
            app.set('view engine', 'jade');
            app.set("view options", {layout: false});
            app.use(express.static(__dirname + '/public'));
            app.use(express.bodyParser());
            app.use(app.router);
        });

        app.get('/', routes.index);
        app.get('/music', music.rooms);
        app.get('/art', art.rooms);
        app.post('/rooms', rooms.rooms);

        io.sockets.on('connection', function(socket) {

            socket.on('joinRoom', function(data) {
                socket.username = username;
                socket.room = data.room; 
 console.log('socket room and username in console' + socket.room+socket.username);
                socket.join(socket.room);
                socket.emit('test');
        });

        server.listen(3000);

script.js

var socket = io.connect();

$(document).ready(function() {  

  $('#rooms').on('click', 'a', function() {
         var room = $(this).data('id');       
      socket.emit('joinRoom', {room: room});
 });   
        socket.on('test', function(){
            console.log('check if it works');
        });
    });

index.jade

include header.jade

    div#page    
        div(class="box")
                form(name="input", action='rooms', method="post")
                   div
                    p
                        | Login:
                        input(type="text", name="user", class="user")
                    input(type="submit",class="submit",value="Login")

rooms.jade

include header.jade

    div#page  
        div(class="box")    

             div#rooms
                h2 Rooms
                a(data-name='abrakadabra', data-id='1', href='music') Abrakadabra
                a(data-name='aloha', data-id='2', href='art') Aloha

路由文件夹中的rooms.js

exports.rooms = function(req, res){
res.render('rooms', { title: 'Rooms' });
    username = req.body.user;

};

music.js（房间之一）

exports.rooms = function(req, res){
  res.render('music', { title: 'Music room' });

};

【问题讨论】：

你在哪里向服务器发出joinRoom 事件？
@Krasimir 对，我更新了这个（之前在这里插入我的代码之前，我用它做了一点订单）
您能否尝试评论socket.join(socket.room);。真的有join方法吗？
是的，我把它放在这里，但是在我的代码中，该方法一直存在，所以它不是问题
如果你在它后面加上 console.log 会发生什么。执行了吗？

标签： javascript jquery node.js express

【解决方案1】：

将 event.preventDefault() 添加到您的房间点击功能。这些链接正在刷新页面，它们不应该。

var socket = io.connect();

$(document).ready(function() {  

  $('#rooms').on('click', 'a', function() {
    event.preventDefault();
    var room = $(this).data('id');       
    socket.emit('joinRoom', {room: room});
  });

  socket.on('test', function(){
    console.log('check if it works');
  });

});

【讨论】：